Merge pull request #5 from Muetze42/development

0.0.2 with requirements

Author: Muetze42

README.md

@@ -1,7 +1,7 @@
-# Nova Textarea with BBCodes
+# Nova Textarea- & Text field with BBCodes
 Quickly developed. Short tutorial.  
 
-With this Nova field you have the _Textarea_ with _BBCodes_.  
+With this Nova field you have the _Textarea_ or _Text_ with _BBCodes_.  
 
 (Tested with Nova 4)
 
@@ -20,6 +20,16 @@ BBCode::make(__('Name'), 'name')->codes([
     '{date}' => __('This code insert the date'),
 ]),
 ```
+Or Text Field:
+```php
+
+use NormanHuth\BBCode\BB;
+
+BB::make(__('Name'), 'name')->codes([
+    '{author}' => __('This code insert the author'),
+    '{date}' => __('This code insert the date'),
+]),
+```
 
 ### Don't always show the content of textarea fields inside Nova
 ```php

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "norman-huth/nova-bbcode-textarea",
-    "description": "Textarea with BBCodes. A Laravel Nova field.",
+    "description": "Laravel Nova Textarea and Text field with BBCodes",
     "keywords": [
         "laravel",
         "nova"

dist/js/field.js

@@ -1,4 +1,3 @@
 {
-    "/js/field.js": "/js/field.js",
-    "/css/field.css": "/css/field.css"
+    "/js/field.js": "/js/field.js"
 }

dist/mix-manifest.json

@@ -0,0 +1,75 @@
+<template>
+    <DefaultField
+        :field="currentField"
+        :errors="errors"
+        :show-help-text="showHelpText"
+    >
+        <template #field>
+            <input
+                v-bind="extraAttributes"
+                class="w-full form-control form-input form-input-bordered mb-2"
+                @input="handleChange"
+                :value="value"
+                :id="currentField.uniqueKey"
+                :dusk="field.attribute"
+                :disabled="currentlyIsReadonly"
+                :list="`${field.attribute}-list`"
+            />
+            <span v-for="(title, code) in currentField.codes" :class="currentField.btnClass" :title="title" @submit.prevent="" @click="addCode(code)" :style="currentField.btnStyle">
+                {{ code }}
+            </span>
+            <datalist
+                v-if="currentField.suggestions && currentField.suggestions.length > 0"
+                :id="`${field.attribute}-list`"
+            >
+                <option
+                    :key="suggestion"
+                    v-for="suggestion in currentField.suggestions"
+                    :value="suggestion"
+                />
+            </datalist>
+        </template>
+    </DefaultField>
+</template>
+
+<script>
+import {DependentFormField, HandlesValidationErrors} from './../../mixins'
+
+export default {
+    mixins: [HandlesValidationErrors, DependentFormField],
+
+    computed: {
+        defaultAttributes() {
+            return {
+                type: this.currentField.type || 'text',
+                min: this.currentField.min,
+                max: this.currentField.max,
+                step: this.currentField.step,
+                pattern: this.currentField.pattern,
+                placeholder: this.currentField.placeholder || this.field.name,
+                class: this.errorClasses,
+                codes: this.currentField.codes,
+                btnClass: this.currentField.btnClass,
+                btnStyle: this.currentField.btnStyle,
+            }
+        },
+
+        extraAttributes() {
+            const attrs = this.currentField.extraAttributes
+
+            return {
+                // Leave the default attributes even though we can now specify
+                // whatever attributes we like because the old number field still
+                // uses the old field attributes
+                ...this.defaultAttributes,
+                ...attrs,
+            }
+        },
+    },
+    methods: {
+        addCode(code) {
+            this.value = this.value + " " + code
+        }
+    },
+}
+</script>

resources/css/field.css

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import {DependentFormField, HandlesValidationErrors} from './../mixins'
+import {DependentFormField, HandlesValidationErrors} from './../../mixins'
 
 export default {
     mixins: [HandlesValidationErrors, DependentFormField],

resources/js/components/DetailField.vue

@@ -1,7 +1,7 @@
-import DetailField from './components/DetailField'
-import FormField from './components/FormField'
+import FormField from './components/bbcode/FormField'
+import FormField2 from './components/bb/FormField'
 
 Nova.booting((app, store) => {
-  app.component('detail-bbcode', DetailField)
-  app.component('form-bbcode', FormField)
+    app.component('form-bbcode', FormField)
+    app.component('form-bb', FormField2)
 })

resources/js/components/bb/FormField.vue

@@ -0,0 +1,113 @@
+<?php
+
+namespace NormanHuth\BBCode;
+
+use Laravel\Nova\Fields\Text as Field;
+use Laravel\Nova\Http\Requests\NovaRequest;
+
+class BB extends Field
+{
+    /**
+     * The codes in key => value: code => title
+     *
+     * @var array
+     */
+    protected array $codes = [];
+
+    /**
+     * The button class attribute
+     *
+     * @var string
+     */
+    protected string $btnClass = 'shadow relative bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900 cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring inline-flex items-center justify-center h-9 px-3 shadow relative bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900 mr-2';
+
+    /**
+     * Button inline style attribute
+     *
+     * @var string
+     */
+    protected string $btnStyle = '';
+
+    /**
+     * Get the component name for the field.
+     *
+     * @return string
+     */
+    public function component(): string
+    {
+        if (isset(static::$customComponents[get_class($this)])) {
+            return static::$customComponents[get_class($this)];
+        }
+
+        if (request()->input('editing')) {
+            return 'bb';
+        }
+
+        return 'text-field';
+    }
+
+    /**
+     * @param array $codes
+     * @return $this
+     */
+    public function codes(array $codes): static
+    {
+        $this->codes = $codes;
+
+        return $this;
+    }
+
+    /**
+     * Change the button inline style attribute
+     *
+     * @param string $style
+     * @return $this
+     */
+    public function btnStyle(string $style): static
+    {
+        $this->btnStyle = $style;
+
+        return $this;
+    }
+
+    /**
+     * Change the button class attribute
+     *
+     * @param string $class
+     * @return $this
+     */
+    public function btnClass(string $class): static
+    {
+        $this->btnClass = $class;
+
+        return $this;
+    }
+
+    /**
+     * Prepare the element for JSON serialization.
+     *
+     * @return array<string, mixed>
+     */
+    public function jsonSerialize(): array
+    {
+        $request = app(NovaRequest::class);
+
+        if ($request->isCreateOrAttachRequest()
+            || $request->isUpdateOrUpdateAttachedRequest()
+            || $request->isActionRequest() === true
+        ) {
+            return array_merge(parent::jsonSerialize(), [
+                'suggestions' => $this->resolveSuggestions($request),
+                'codes'       => $this->codes,
+                'btnStyle'    => $this->btnStyle,
+                'btnClass'    => $this->btnClass,
+            ]);
+        }
+
+        return array_merge(parent::jsonSerialize(), [
+            'codes'    => $this->codes,
+            'btnStyle' => $this->btnStyle,
+            'btnClass' => $this->btnClass,
+        ]);
+    }
+}