nodered_cfg/node_modules/@flowfuse/node-red-dashboard/nodes/widgets/ui_dropdown.html

<script type="text/javascript">
    (function () {
        function hasProperty (obj, prop) {
            return Object.prototype.hasOwnProperty.call(obj, prop)
        }
        RED.nodes.registerType('ui-dropdown', {
            category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
            color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.light'),
            defaults: {
                group: { type: 'ui-group', required: true },
                name: { value: '' },
                label: { value: 'Select Option:' },
                tooltip: { value: '' },
                order: { value: 0 },
                width: {
                    value: 0,
                    validate: function (v) {
                        const width = v || 0
                        const currentGroup = $('#node-input-group').val() || this.group
                        const groupNode = RED.nodes.node(currentGroup)
                        const valid = !groupNode || +width <= +groupNode.width
                        $('#node-input-size').toggleClass('input-error', !valid)
                        return valid
                    }
                },
                height: { value: 0 },
                passthru: { value: false },
                multiple: { value: false },
                chips: { value: false },
                clearable: { value: false },
                options: {
                    value: [{ value: '', label: '' }],
                    validate: function (v) {
                        const unique = new Set(v.map(function (o) { return o.value }))
                        return v.length === unique.size
                    }
                },
                payload: { value: '' },
                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
                topicType: { value: 'msg' },
                className: { value: '' },
                // This field controls if the used component is going to be a `v-combox` or a `v-select`, `v-combox` allows typing and filtering possible values
                typeIsComboBox: { value: true }
            },
            inputs: 1,
            outputs: 1,
            icon: 'font-awesome/fa-bars',
            paletteLabel: 'dropdown',
            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'dropdown' },
            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
            oneditprepare: function () {
                if (this.multiple === undefined) {
                    $('#node-input-multiple').prop('checked', false)
                }
                if (this.chips === undefined) {
                    $('#node-input-chips').prop('checked', false)
                }    
                if (this.clearable === undefined) {
                    $('#node-input-clearable').prop('checked', false)
                }  
                if (this.typeIsComboBox === undefined) {
                    $('#node-input-typeIsComboBox').prop('checked', true)
                }                            
                // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                if (RED.nodes.subflow(this.z)) {
                    // change inputs from hidden to text & display them
                    $('#node-input-width').attr('type', 'text')
                    $('#node-input-height').attr('type', 'text')
                    $('div.form-row.nr-db-ui-element-sizer-row').hide()
                    $('div.form-row.nr-db-ui-manual-size-row').show()
                } else {
                    // not in a subflow, use the elementSizer
                    $('div.form-row.nr-db-ui-element-sizer-row').show()
                    $('div.form-row.nr-db-ui-manual-size-row').hide()
                    $('#node-input-size').elementSizer({
                        width: '#node-input-width',
                        height: '#node-input-height',
                        group: '#node-input-group'
                    })
                }
                const un = new Set(this.options.map(function (o) { return o.value }))
                if (this.options.length === un.size) { $('#valWarning').hide() } else { $('#valWarning').show() }

                function generateOption (i, option) {
                    const container = $('<li/>', { style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);' })
                    const row = $('<div/>').appendTo(container)
                    $('<div/>', { style: 'padding-top:5px; padding-left:175px;' }).appendTo(container)
                    $('<div/>', { style: 'padding-top:5px; padding-left:120px;' }).appendTo(container)

                    $('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-option-handle fa fa-bars"></i>').appendTo(row)

                    $('<input/>', { class: 'node-input-option-value', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Value', value: option.value }).appendTo(row).typedInput({ default: option.type || 'str', types: ['str', 'num', 'bool'] })
                    $('<input/>', { class: 'node-input-option-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Label', value: option.label }).appendTo(row)

                    const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
                    const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
                    $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton)

                    deleteButton.click(function () {
                        container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' })
                        container.fadeOut(300, function () {
                            $(this).remove()
                        })
                    })

                    $('#node-input-option-container').append(container)
                }

                $('#node-input-add-option').click(function () {
                    generateOption($('#node-input-option-container').children().length + 1, {})
                    $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight)
                })

                for (let i = 0; i < this.options.length; i++) {
                    const option = this.options[i]
                    generateOption(i + 1, option)
                }

                $('#node-input-option-container').sortable({
                    axis: 'y',
                    handle: '.node-input-option-handle',
                    cursor: 'move'
                })

                $('#node-input-topic').typedInput({
                    default: 'str',
                    typeField: $('#node-input-topicType'),
                    types: ['str', 'msg', 'flow', 'global']
                })

                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
                $('.ui-node-popover-title').tooltip({
                    show: {
                        effect: 'slideDown',
                        delay: 150
                    }
                })
            },
            oneditsave: function () {
                const options = $('#node-input-option-container').children()
                const node = this
                node.options = []
                options.each(function (i) {
                    const option = $(this)
                    const o = {
                        label: option.find('.node-input-option-label').val(),
                        value: option.find('.node-input-option-value').typedInput('value'),
                        type: option.find('.node-input-option-value').typedInput('type')
                    }
                    if (option.find('.node-input-option-value').typedInput('type') === 'num') {
                        o.value = Number(o.value)
                    }
                    if (option.find('.node-input-option-value').typedInput('type') === 'bool') {
                        o.value = (o.value === 'true')
                    }
                    node.options.push(o)
                })
            },
            oneditresize: function () {
            }
        })
    })()
</script>

<script type="text/html" data-template-name="ui-dropdown">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name">
    </div>
    <div class="form-row">
        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row nr-db-ui-element-sizer-row">
        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-dropdown.label.size">Size</label>
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-dropdown.label.width">Width</label>
        <input type="hidden" id="node-input-width">
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-dropdown.label.height">Height</label>
        <input type="hidden" id="node-input-height">
    </div>
    <div class="form-row">
        <label for="node-input-label"><i class="fa fa-tag"></i> Label</label>
        <input type="text" id="node-input-label" placeholder="optional label">
    </div>
    <div class="form-row">
        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
        <div style="display: inline;">
            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
            <a
                data-html="true"
                title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
                class="red-ui-button ui-node-popover-title"
                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
                <i style="font-family: ui-serif;">fx</i>
            </a>
        </div>
    </div>
    <!--<div class="form-row">
        <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
        <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
    </div>-->
    <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Options</label>
        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
            <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
        </div>
        <a
            data-html="true"
            title="Dynamic Property: Send 'msg.options' in order to override this property."
            class="red-ui-button ui-node-popover-title"
            style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
            <i style="font-family: ui-serif;">fx</i>
        </a>
    </div>
    <div class="form-row">
        <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>option</span></a>
    </div>
    <div class="form-row">
        <label style="width:auto" for="node-input-multiple"><i class="fa fa-th-list"></i> Allow multiple selections from list: </label>
        <input type="checkbox" checked id="node-input-multiple" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
    </div>
    <div class="form-row">
        <label style="width:auto" for="node-input-chips"><i class="fa fa-circle-o"></i> Show selected elements in chips </label>
        <input type="checkbox" checked id="node-input-chips" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
    </div>
    <div class="form-row">
        <label style="width:auto" for="node-input-clearable"><i class="fa fa-times"></i> Clear selection with button </label>
        <input type="checkbox" checked id="node-input-clearable" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
    </div>   
    <div class="form-row">
        <label style="width:auto" for="node-input-typeIsComboBox"><i class="fa fa-pencil-square"></i> Allow Search </label>
        <input type="checkbox" checked id="node-input-typeIsComboBox" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
        </div>
    </div>  
    <div class="form-row">
        <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
    </div>
    <div class="form-row">
        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
        <input type="text" id="node-input-topic" style="width:70%" placeholder="optional msg.topic">
        <input type="hidden" id="node-input-topicType">
    </div>
</script>