ColorPicker Ui Component

Un componente escondido que te permite escoger valores de colores

Como parte de las contribuciones que he hecho en el proyecto de Adobe Stock Integration recientemente tuve que implementar un filtro de búsqueda para el atributo color en listado de imágenes.

Nota: Uno de los mejores métodos a la hora de crear una funcionalidad Magento y no tienes muy claro como es buscar referencias y ejemplos en los archivos del core. Si luego de esto, sigues sin encontrar lo que buscas es hora de mirar en Google o Magento StackExchange.

En mi caso no tuve que ir a ningún lado porque un escaneo rápido por los archivos del core reveló algo interesante:

Mirando el historial de cambios en el repositorio de Magento2, puede ver que este componente se agregó al núcleo alrededor de Mar 2018 pero por alguna razón no pude encontrar ninguna explicación de cómo usarlo en los DevDocs, Magento StackExchange o incluso Google.

ACTUALIZACIÓN: Un [PR que creé(https://github.com/magento/devdocs/pull/4885)] para agregar esta información a

los DevDocs se mergeo ayer, por lo que ahora también podemos ver el informacion sobre el componente ColorPicker aquí.

Volviendo al tema, aquí está cómo se puede implementar ...

Cómo funciona

El componente ColorPicker utiliza las librerías de Spectrum y tinycolor.js para que sea más fácil elegir e implementar valores de color.

El componente ColorPicker debe implementarse como sub componente o componente hijo del Listing o del Form.

Opciones de configuración

Opción Descripción Tipo Valor por defecto
colorFormat Define el formato de color que se muestra en la herramienta de selección y el campo de entrada. Formatos válidos: hex, rgb, hsl, hsv, name, none Cadena de texto -
colorPickerMode Define el modo que afecta a la funcionalidad del selector de color disponible. Modos válidos: simple, full, noalpha, palette Cadena de texto -
elementTmpl La ruta a la plantilla .html que utilizara el componente (color-picker). Cadena de texto ui/form/element/color-picker

Examples

ColorPicker como parte de un Componente de Form

    <form>
    ...
        <colorPicker name="colors_filter" class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/color-picker">
            <settings>
                <label translate="true">Color</label>
                <elementTmpl>ui/form/element/color-picker</elementTmpl>
                <colorFormat>rgb</colorFormat>
                <colorPickerMode>full</colorPickerMode>
                <dataScope>colors_filter</dataScope>
            </settings>
        </colorPicker>
    ...
    </form>

ColorPicker como un filtro para un Componente Listing

IMPORTANTE: Si intentas implementar el ColorPicker dentro de los filtros usando el ejemplo anterior, funcionará, pero las reglas definidas en el XSD te van a decir que no está permitido hacer esto, así que en su lugar, puedes implementarlo usando el siguiente ejemplo:

    <filters>
    ...
            <filterInput name="colors_filter" class="\Magento\AdobeStockImageAdminUi\Ui\Component\Listing\Filter\Color"  template="Magento_AdobeStockImageAdminUi/grid/filter/color" provider="${ $.parentName }">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">Color</item>
                        <item name="colorFormat" xsi:type="string">HEX</item>
                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/color-picker</item>
                        <item name="dataScope" xsi:type="string">colors_filter</item>
                        <item name="placeholder" xsi:type="string">HEX color</item>
                    </item>
                </argument>
                <settings>
                    <label translate="true">Color</label>
                </settings>
            </filterInput>
    ...
    </filters>

Comentarios

Entrada Anterior