Initalize

.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Elevate Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,36 @@
+# Nova Charcounter Fields
+Text and textarea fields with a character counter for Laravel Nova.
+
+### Installation
+You can require this package using composer:
+
+```composer require elevate-digital/nova-charcounted-fields```
+
+# Usage
+
+You can add the field with a resolver as follows:
+```
+use ElevateDigital\CharcountedFields\TextCounted;
+use ElevateDigital\CharcountedFields\TextareaCounted;
+
+TextCounted::make('Meta title')
+```
+
+![Image of character counter](docs/screenshot.jpg)
+
+You can use the text and textarea fields with charactercounters on you Nova model. The max number of characters aren't enforced, but just encouraged with warning colors and the counter. (You could enforce the max number of characters with Nova's built in _rules_ and with a _maxlength_ extra attribute).
+
+```php
+TextCounted::make('Meta title')
+    ->maxChars(60)
+    ->warningAt(50)
+    ->withMeta(['extraAttributes' => ['maxlength' => '65']]),
+
+TextareaCounted::make('Meta description')
+    ->maxChars(160)
+    ->warningAt(150)
+    ->rows(3),
+```
+
+The maxChars and warningAt are both optional. The color of the counter will change when the max or warningAt limit is reached.
+![Image of character counter with indication](docs/screenshot-errors.jpg)

composer.json

@@ -0,0 +1,29 @@
+{
+    "name": "elevate-digital/nova-charcounted-fields",
+    "description": "Text and textarea fields with a character counter.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "ElevateDigital\\CharcountedFields\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "ElevateDigital\\CharcountedFields\\FieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/css/field.css

@@ -0,0 +1 @@
+.text-orange{color:#f6993f}

mix-manifest.json

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

package.json

@@ -0,0 +1,20 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "cross-env": "^5.0.0",
+        "laravel-mix": "^1.0",
+        "laravel-nova": "^1.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0"
+    }
+}

resources/js/components/Charcounter.vue

@@ -0,0 +1,29 @@
+<template>
+    <p class="text-right font-bold opacity-50 text-80 text-xs mt-2">
+        <span :class="indicatorClass">{{ value.length }}</span><span v-if="maxChars"> / {{ maxChars }}</span>
+    </p>
+</template>
+
+<script>
+    export default {
+        props: ['value', 'maxChars', 'warningThreshold'],
+
+        computed: {
+            indicatorClass: function () {
+                if (this.maxChars) {
+                    if (this.value.length > this.maxChars) {
+                        return 'text-danger';
+                    }
+                }
+
+                if (this.warningThreshold) {
+                    if (this.value.length > this.warningThreshold) {
+                        return 'text-orange';
+                    }
+                }
+
+                return 'text-success';
+            }
+        },
+    }
+</script>

resources/js/components/TextCounted/DetailField.vue

@@ -0,0 +1,9 @@
+<template>
+    <panel-item :field="field" />
+</template>
+
+<script>
+export default {
+    props: ['resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

resources/js/components/TextCounted/FormField.vue

@@ -0,0 +1,60 @@
+<template>
+    <default-field :field="field" :errors="errors">
+        <template slot="field">
+            <div class="relative">
+                <input
+                    type="text"
+                    class="w-full form-control form-input form-input-bordered"
+                    :id="field.attribute"
+                    :readonly="readonly"
+                    :required="required"
+                    v-model="value"
+                    v-bind="extraAttributes"
+                />
+
+                <charcounter :value="value" :max-chars="field.maxChars" :warning-threshold="field.warningAt"></charcounter>
+            </div>
+
+            <p v-if="hasError" class="my-2 text-danger">
+                {{ firstError }}
+            </p>
+        </template>
+    </default-field>
+</template>
+
+<script>
+    import {FormField, HandlesValidationErrors} from 'laravel-nova';
+    import Charcounter from '../Charcounter';
+
+    export default {
+        mixins: [FormField, HandlesValidationErrors],
+
+        props: ['resourceName', 'resourceId', 'field'],
+
+        components: {
+            Charcounter
+        },
+
+        computed: {
+            defaultAttributes() {
+                return {
+                    pattern: this.field.pattern,
+                    placeholder: this.field.placeholder || this.field.name,
+                    class: this.errorClasses,
+                }
+            },
+
+            extraAttributes() {
+                const attrs = this.field.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,
+                }
+            },
+        }
+    }
+</script>

resources/js/components/TextCounted/IndexField.vue

@@ -0,0 +1,9 @@
+<template>
+    <span>{{ field.value }}</span>
+</template>
+
+<script>
+export default {
+    props: ['resourceName', 'field'],
+}
+</script>

resources/js/components/TextareaCounted/DetailField.vue

@@ -0,0 +1,9 @@
+<template>
+    <panel-item :field="field" />
+</template>
+
+<script>
+export default {
+    props: ['resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

resources/js/components/TextareaCounted/FormField.vue

@@ -0,0 +1,57 @@
+<template>
+    <default-field :field="field" :errors="errors" :full-width-content="true">
+        <template slot="field">
+            <div class="relative">
+                <textarea
+                    class="w-full form-control form-input form-input-bordered py-3 h-auto"
+                    :id="field.attribute"
+                    :readonly="readonly"
+                    :required="required"
+                    v-model="value"
+                    v-bind="extraAttributes"
+                ></textarea>
+
+                <charcounter :value="value" :max-chars="field.maxChars" :warning-threshold="field.warningAt"></charcounter>
+
+            </div>
+
+            <p v-if="hasError" class="my-2 text-danger">
+                {{ firstError }}
+            </p>
+        </template>
+    </default-field>
+</template>
+
+<script>
+    import {FormField, HandlesValidationErrors} from 'laravel-nova';
+    import Charcounter from '../Charcounter';
+
+    export default {
+        mixins: [FormField, HandlesValidationErrors],
+
+        props: ['resourceName', 'resourceId', 'field'],
+
+        components: {
+            Charcounter
+        },
+
+        computed: {
+            defaultAttributes() {
+                return {
+                    rows: this.field.rows,
+                    class: this.errorClasses,
+                    placeholder: this.field.name,
+                }
+            },
+            
+            extraAttributes() {
+                const attrs = this.field.extraAttributes
+
+                return {
+                    ...this.defaultAttributes,
+                    ...attrs,
+                }
+            },
+        }
+    }
+</script>

resources/js/components/TextareaCounted/IndexField.vue

@@ -0,0 +1,9 @@
+<template>
+    <span>{{ field.value }}</span>
+</template>
+
+<script>
+export default {
+    props: ['resourceName', 'field'],
+}
+</script>

resources/js/field.js

@@ -0,0 +1,9 @@
+Nova.booting((Vue, router) => {
+    Vue.component('index-text-counted', require('./components/TextCounted/IndexField'));
+    Vue.component('detail-text-counted', require('./components/TextCounted/DetailField'));
+    Vue.component('form-text-counted', require('./components/TextCounted/FormField'));
+
+    Vue.component('index-textarea-counted', require('./components/TextareaCounted/IndexField'));
+    Vue.component('detail-textarea-counted', require('./components/TextareaCounted/DetailField'));
+    Vue.component('form-textarea-counted', require('./components/TextareaCounted/FormField'));
+})

resources/sass/field.scss

@@ -0,0 +1,4 @@
+// Nova Tool CSS
+.text-orange {
+    color: #f6993f;
+}

src/FieldCounted.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace ElevateDigital\CharcountedFields;
+
+use Laravel\Nova\Fields\Field;
+
+class FieldCounted extends Field
+{
+
+    public function maxChars(int $characters)
+    {
+        return $this->withMeta(['maxChars' => $characters]);
+    }
+
+    public function warningAt(int $characters)
+    {
+        return $this->withMeta(['warningAt' => $characters]);
+    }
+
+}

src/FieldServiceProvider.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace ElevateDigital\CharcountedFields;
+
+use Laravel\Nova\Nova;
+use Laravel\Nova\Events\ServingNova;
+use Illuminate\Support\ServiceProvider;
+
+class FieldServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('nova-charcounted-fields', __DIR__.'/../dist/js/field.js');
+            Nova::style('nova-charcounted-fields', __DIR__.'/../dist/css/field.css');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}