feat(): add HeroDevs Vue module

web/modules/herodevs/herodevs_vue/README.md

@@ -0,0 +1,3 @@
+# HeroDevs Vue Module
+
+Here is the perfect place to add more information about the module!

web/modules/herodevs/herodevs_vue/config/install/herodevs_vue.settings.yml

@@ -0,0 +1,3 @@
+herodevs_vue:
+  page_title: "Hero Devs Vue"
+  vue_cdn: "https://unpkg.com/vue@3/dist/vue.global.js"

web/modules/herodevs/herodevs_vue/config/schema/herodevs_vue.schema.yml

@@ -0,0 +1,20 @@
+herodevs_vue.settings:
+  type: config_object
+  label: 'HeroDevs Vue settings'
+  mapping:
+    herodevs_vue:
+      type: mapping
+      mapping:
+        page_title:
+          type: text
+          label: 'HeroDevs Vue page title:'
+        source_text:
+          type: text
+          label: 'CDN link for Vue'
+block.settings.herodevs_vue_block:
+  type: block_settings
+  label: 'HeroDevs Vue block'
+  mapping:
+    herodevs_vue_block_settings:
+      type: text
+      label: 'HeroDevs Vue block settings'

web/modules/herodevs/herodevs_vue/herodevs_vue.info.yml

@@ -0,0 +1,8 @@
+name: Hero Devs Vue
+description: Creates an example page with CDN support of Vue 3
+package: custom
+
+type: module
+core_version_requirement: ^9.4 || ^10
+
+configure: herodevs_vue.admin

web/modules/herodevs/herodevs_vue/herodevs_vue.install

@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * @file
+ * Installation functions for HeroDevs Vue Module
+ */
+
+use Drupal\user\RoleInterface;
+
+/**
+ * Implements hook_install().
+ */
+function herodevs_vue_install() {
+  user_role_change_permissions(RoleInterface::ANONYMOUS_ID, array(
+    'HeroDevs Vue' => TRUE,
+  ));
+}

web/modules/herodevs/herodevs_vue/herodevs_vue.links.menu.yml

@@ -0,0 +1,5 @@
+herodevs_vue.admin:
+  title: 'HeroDevs Vue settings'
+  description: 'Configure settings for the HeroDevs Vue module.'
+  route_name: herodevs_vue.admin
+  parent: 'system.admin_config_development'

web/modules/herodevs/herodevs_vue/herodevs_vue.module

@@ -0,0 +1,33 @@
+<?php
+
+use Drupal\Core\Routing\RouteMatchInterface;
+
+/**
+ * Implements hook_help().
+ */
+function herodevs_vue_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    case 'help.page.herodevs_vue':
+      return t('
+        <h2>HeroDevs Vue 3 Integration for Drupal.</h2>
+        <h3>Instructions</h3>
+        <p>This is a demo Help Page!</p>
+      ');
+  }
+}
+
+/**
+ * Implements hook_theme().
+ */
+function herodevs_vue_theme($existing, $type, $theme, $path) {
+  $variables = [
+    'herodevs_vue' => [
+      'variables' => [
+        'vue_cdn' => NULL,
+      ],
+      'template' => 'herodevs_vue',
+    ],
+  ];
+  return $variables;
+}
+

web/modules/herodevs/herodevs_vue/herodevs_vue.permissions.yml

@@ -0,0 +1,3 @@
+HeroDevs Vue:
+  title: 'HeroDevs Vue module permission'
+  description: 'Grant users access to the HeroDevs Vue page'

web/modules/herodevs/herodevs_vue/herodevs_vue.routing.yml

@@ -0,0 +1,14 @@
+herodevs_vue.home:
+  path: '/herodevs/home'
+  defaults:
+    _controller: '\Drupal\herodevs_vue\Controller\HeroDevsVueController::home'
+  requirements:
+    _permission: 'HeroDevs Vue'
+
+herodevs_vue.admin:
+  path: '/admin/config/development/herodevs_vue'
+  defaults:
+    _form: '\Drupal\herodevs_vue\Form\HeroDevsVueForm'
+    _title: 'HeroDevs Vue settings'
+  requirements:
+    _permission: 'administer site configuration'

web/modules/herodevs/herodevs_vue/src/Controller/HeroDevsVueController.php

@@ -0,0 +1,21 @@
+<?php
+namespace Drupal\herodevs_vue\Controller;
+
+use Drupal\Component\Utility\Html;
+
+class HeroDevsVueController{
+
+  public function home() {
+    // Default settings.
+    $config = \Drupal::config('herodevs_vue.settings');
+    // Page title and source text.
+    $page_title = $config->get('herodevs_vue.page_title');
+    $vue_cdn = $config->get('herodevs_vue.vue_cdn');
+
+    $element['#title'] = Html::escape($page_title);
+    $element['#vue_cdn'] = $vue_cdn;
+    $element['#theme'] = 'herodevs_vue';
+
+    return $element;
+  }
+}

web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueBlockForm.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace Drupal\herodevs_vue\Form;
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Url;
+
+/**
+ * HeroDevs Vue block form
+ */
+class HeroDevsVueBlockForm extends FormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'herodevs_vue_block_form';
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    // How many paragraphs?
+    // $options = new array();
+    $options = array_combine(range(1, 10), range(1, 10));
+    $form['paragraphs'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Paragraphs'),
+      '#options' => $options,
+      '#default_value' => 4,
+      '#description' => $this->t('How many?'),
+    ];
+
+    // How many phrases?
+    $form['phrases'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Phrases'),
+      '#default_value' => '20',
+      '#description' => $this->t('Maximum per paragraph'),
+    ];
+
+    // Submit.
+    $form['submit'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Generate'),
+    ];
+
+    return $form;
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function validateForm(array &$form, FormStateInterface $form_state) {
+    $phrases = $form_state->getValue('phrases');
+    if (!is_numeric($phrases)) {
+      $form_state->setErrorByName('phrases', $this->t('Please use a number.'));
+    }
+
+    if (floor($phrases) != $phrases) {
+      $form_state->setErrorByName('phrases', $this->t('No decimals, please.'));
+    }
+
+    if ($phrases < 1) {
+      $form_state->setErrorByName('phrases', $this->t('Please use a number greater than zero.'));
+    }
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $form_state->setRedirect('herodevs_vue.home', [
+      'paragraphs' => $form_state->getValue('paragraphs'),
+      'phrases' => $form_state->getValue('phrases'),
+    ]);
+  }
+
+}

web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueForm.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace Drupal\herodevs_vue\Form;
+
+use Drupal\Core\Form\ConfigFormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+class HeroDevsVueForm extends ConfigFormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'herodevs_vue_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    // Form constructor.
+    $form = parent::buildForm($form, $form_state);
+    // Default settings.
+    $config = $this->config('herodevs_vue.settings');
+
+    // Page title field.
+    $form['page_title'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('HeroDevs Vue Page Title:'),
+      '#default_value' => $config->get('herodevs_vue.page_title'),
+      '#description' => $this->t('Give your HeroDevs Vue page a title.'),
+    ];
+    // Source text field.
+    $form['vue_cdn'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Vue CDN URL'),
+      '#default_value' => $config->get('herodevs_vue.vue_cdn'),
+      '#description' => $this->t('URL for Vue CDN used in the HeroDevs page'),
+    ];
+
+    return $form;
+  }
+
+  /**
+    * {@inheritdoc}
+    */
+   public function validateForm(array &$form, FormStateInterface $form_state) {
+
+   }
+
+     /**
+      * {@inheritdoc}
+      */
+     public function submitForm(array &$form, FormStateInterface $form_state) {
+       $config = $this->config('herodevs_vue.settings');
+       $config->set('herodevs_vue.vue_cdn', $form_state->getValue('vue_cdn'));
+       $config->set('herodevs_vue.page_title', $form_state->getValue('page_title'));
+       $config->save();
+       return parent::submitForm($form, $form_state);
+     }
+/**
+   * {@inheritdoc}
+   */
+  protected function getEditableConfigNames() {
+    return [
+      'herodevs_vue.settings',
+    ];
+  }
+}

web/modules/herodevs/herodevs_vue/src/Plugin/Block/HeroDevsVueBlock.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace Drupal\herodevs_vue\Plugin\Block;
+
+use Drupal\Core\Access\AccessResult;
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Session\AccountInterface;
+
+/**
+ * Provides a HeroDevs Vue block.
+ *
+ * @Block(
+ *   id = "herodevs_vue_block",
+ *   admin_label = @Translation("HeroDevs Vue block"),
+ * )
+ */
+class HeroDevsVueBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    return \Drupal::formBuilder()->getForm('Drupal\herodevs_vue\Form\HeroDevsVueBlockForm');
+  }
+  /**
+   * {@inheritdoc}
+   */
+  protected function blockAccess(AccountInterface $account) {
+    return AccessResult::allowedIfHasPermission($account, 'HeroDevs Vue');
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function blockForm($form, FormStateInterface $form_state) {
+    $form = parent::blockForm($form, $form_state);
+    $config = $this->getConfiguration();
+    return $form;
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function blockSubmit($form, FormStateInterface $form_state) {
+    $this->setConfigurationValue('herodevs_vue_block_settings', $form_state
+    ->getValue('herodevs_vue_block_settings'));
+  }
+
+}

web/modules/herodevs/herodevs_vue/templates/herodevs_vue.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * HeroDevs Vue Page Template
+ *
+ * Available variables:
+ *   - vue_cdn
+ *
+ * @ingroup themeable
+ */
+#}
+<h3>Drupal PHP page:</h3>
+Fetching Vue from: <a href="{{vue_cdn}}">{{vue_cdn}}</a>
+
+<h3>Vue App</h3>
+<script src="{{vue_cdn}}"></script>
+<div id="app">
+  <p v-html="message">
+  </p>
+</div>
+<script>
+  const { createApp, ref } = Vue
+  createApp({
+    setup() {
+      const message = ref('This is an example Vue app!')
+      return {
+        message
+      }
+    }
+  }).mount('#app')
+</script>