nova-settings-tool icon indicating copy to clipboard operation
nova-settings-tool copied to clipboard

Passing css classes through to components

Open tnorthcutt opened this issue 11 months ago • 2 comments

It seems like it would be really handy to be able to pass CSS classes through to components. E.g. in nova-settings-tool.php being able to do this:

[
    'key' => 'setting_1',
    'label' => 'Custom delay setting',
    'type' => 'select',
    'options' => [
        '0' => 'No Delay',
        '7' => '1 Week',
        '14' => '2 Weeks',
        '21' => '3 Weeks',
        '28' => '4 Weeks',
    ],
    'classes' => ['form-input', 'whatever-other-classes'],
    'panel' => 'Customers',
];

And then in SelectSetting.vue (for this example) having (note the :class line added):

<select
    :id="setting.key"
    :value="setting.value"
    @change="
        $emit('update', {
            key: setting.key,
            value: $event.target.value,
        })
    "
    class="w-full block form-control form-select form-select-bordered"
    :class="setting.classes"
>
    <option value="" selected>{{ setting.placeholder || __('Choose an option') }}</option>
    <option v-for="(label, option) in setting.options" :key="option" :value="option">
        {{ __(label) }}
    </option>
</select>

But, maybe there's a reason for not doing this that I haven't thought of. Is this something you'd be open to adding support for?

tnorthcutt avatar Nov 18 '24 20:11 tnorthcutt