Issue #3510924 by grimreaper: Support for coloris widget

.cspell-project-words.txt

-canonicalizer
-canonicalized
-corge
-criticals
-endsandbox
-getattr
-grault
-kint
-maxcontains
-mincontains
-proptype
-recursivity
-sameas
-sdc's
-subcomponent
-toolset
-daisyui
+coloris
+coloriswidget
+colorpicker
 uips

config/schema/ui_patterns_settings.sources.schema.yml

+ui_patterns_source.color:
+  type: mapping
+  label: 'Source: Color'
+  mapping:
+    value:
+      type: color_hex
+      label: 'Color value'
+
+ui_patterns_source.coloris:
+  type: mapping
+  label: 'Source: Coloris'
+  mapping:
+    value:
+      type: string
+      label: 'Coloris value'
+      constraints:
+        Regex:
+          # See color_hex in Core.
+          pattern: '/^#[0-9a-fA-F]{6}[0-9a-fA-F]{2}?$/'
+          message: "%value is not a valid hexadecimal color with transparency."
+
 ui_patterns_source.media:
   type: mapping
   label: 'Source: Media'

src/Plugin/UiPatterns/PropType/ColorPropType.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\ui_patterns_settings\Plugin\UiPatterns\PropType;
+
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\ui_patterns\Attribute\PropType;
+use Drupal\ui_patterns\PropTypeConversionTrait;
+use Drupal\ui_patterns\PropTypePluginBase;
+
+/**
+ * Provides a 'color' PropType.
+ */
+#[PropType(
+  id: 'color',
+  label: new TranslatableMarkup('Color'),
+  description: new TranslatableMarkup('Hexadecimal color with optional transparency.'),
+  default_source: 'color',
+  schema: [
+    'type' => 'string',
+    'pattern' => '^#(([0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{6}[0-9a-fA-F]{2}?)$',
+  ],
+  priority: 1,
+  typed_data: ['string']
+)]
+class ColorPropType extends PropTypePluginBase {
+
+  use PropTypeConversionTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function normalize(mixed $value, ?array $definition = NULL): string {
+    return static::convertToString($value);
+  }
+
+}

src/Plugin/UiPatterns/Source/ColorWidget.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\ui_patterns_settings\Plugin\UiPatterns\Source;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\ui_patterns\Attribute\Source;
+use Drupal\ui_patterns\SourcePluginPropValueWidget;
+
+/**
+ * Plugin implementation of the source.
+ */
+#[Source(
+  id: 'color',
+  label: new TranslatableMarkup('Color'),
+  description: new TranslatableMarkup('Default colorpicker'),
+  prop_types: ['color'],
+  tags: ['widget']
+)]
+class ColorWidget extends SourcePluginPropValueWidget {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getPropValue(): string {
+    return (string) parent::getPropValue();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state): array {
+    $form = parent::settingsForm($form, $form_state);
+    $form['value'] = [
+      '#type' => 'color',
+      '#title' => $this->t('Color selection'),
+      '#default_value' => $this->getSetting('value'),
+    ];
+    $this->addRequired($form['value']);
+    return $form;
+  }
+
+}

src/Plugin/UiPatterns/Source/ColorisWidget.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\ui_patterns_settings\Plugin\UiPatterns\Source;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\ui_patterns\Attribute\Source;
+use Drupal\ui_patterns\SourcePluginPropValueWidget;
+
+/**
+ * Plugin implementation of the source.
+ */
+#[Source(
+  id: 'coloris',
+  label: new TranslatableMarkup('Coloris'),
+  description: new TranslatableMarkup('Coloris color selector'),
+  prop_types: ['color'],
+  tags: ['widget']
+)]
+class ColorisWidget extends SourcePluginPropValueWidget {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getPropValue(): string {
+    return (string) parent::getPropValue();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state): array {
+    $form = parent::settingsForm($form, $form_state);
+    if (!$this->moduleHandler->moduleExists('coloris')) {
+      $form['warning'] = [
+        '#theme' => 'status_messages',
+        '#message_list' => [
+          'error' => [
+            $this->t('You need to enable the Coloris module to use this source.'),
+          ],
+        ],
+      ];
+      return $form;
+    }
+
+    $form['value'] = [
+      '#type' => 'coloriswidget',
+      '#title' => $this->t('Color selection'),
+      '#default_value' => $this->getSetting('value'),
+      '#swatches' => $this->propDefinition['swatches'] ?? [],
+    ];
+    $this->addRequired($form['value']);
+    return $form;
+  }
+
+}

src/Plugin/UiPatterns/Source/MediaSource.php

@@ -18,7 +18,7 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
 #[Source(
   id: 'media',
   label: new TranslatableMarkup('Media'),
-  description: new TranslatableMarkup('Provides a Media source..'),
+  description: new TranslatableMarkup('Provides a Media source.'),
   prop_types: ['slot']
 )]
 class MediaSource extends SourcePluginBase {

ui_patterns_settings.module

@@ -26,6 +26,24 @@ function ui_patterns_settings_theme(): array {
   ];
 }
 
+/**
+ * Implements hook_ui_patterns_source_info_alter().
+ */
+function ui_patterns_settings_ui_patterns_source_info_alter(array &$sources): void {
+  if (isset($sources['textfield'])) {
+    $sources['textfield']['prop_types'][] = 'color';
+  }
+}
+
+/**
+ * Implements hook_prop_type_info_alter().
+ */
+function ui_patterns_settings_prop_type_info_alter(array &$propTypes): void {
+  if (isset($propTypes['string'])) {
+    $propTypes['string']['convert_from'][] = 'color';
+  }
+}
+
 /**
  * Implements hook_preprocess_ui_patterns_settings_select_widget().
  */