add text and textarea transformer field

.gitignore

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

README.md

@@ -0,0 +1,35 @@
+## Overview
+
+A custom Laravel Nova field to transforming text to Hiragana or Katakana.
+
+![Transforming Romaji](/screenshots/transform.gif)
+
+## Installation
+
+Install the package via Composer:
+```shell
+composer require bocanhcam/nova-japanese-transformer
+```
+
+## Usage
+
+### Usage
+Add the field to your Nova resource:
+
+```php
+use Bocanhcam\NovaJapaneseTransformer\JapaneseTransformerText;
+use Bocanhcam\NovaJapaneseTransformer\JapaneseTransformerTextarea;
+
+// Text
+JapaneseTransformerText::make('Name'), // Convert Romaji to Kana. outputs Hiragana by default; uppercase text outputs Katakana.
+JapaneseTransformerText::make('Hiragana')->toHiragana(), // Convert Katakana or Romaji to Hiragana.
+JapaneseTransformerText::make('Katakana')->toKatakana(), // Convert Hiragana or Romaji to Katakana.
+// Textarea
+JapaneseTransformerTextarea::make('Description'), // Have the same function like Text field
+```
+
+### Powered by `wanakana`
+For more details on wanakana, check out their [documentation](https://github.com/WaniKani/WanaKana).
+
+## License
+This package is open-sourced software licensed under the [MIT license](https://opensource.org/license/MIT).

composer.json

@@ -0,0 +1,37 @@
+{
+    "name": "bocanhcam/nova-japanese-transformer",
+    "description": "A Laravel Nova field.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": "^8.1",
+        "illuminate/support": "^10.0|^11.0"
+    },
+    "require-dev": {
+        "laravel/nova": "^5.0",
+        "laravel/nova-devtool": "^1.1"
+    },
+    "repositories": [
+        { "type": "composer", "url": "https://nova.laravel.com" }
+    ],
+    "autoload": {
+        "psr-4": {
+            "Bocanhcam\\NovaJapaneseTransformer\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Bocanhcam\\NovaJapaneseTransformer\\FieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/css/field.css

@@ -0,0 +1 @@
+

dist/mix-manifest.json

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

package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "prod": "npm run production",
+    "production": "mix --production"
+  },
+  "devDependencies": {
+    "laravel-nova-devtool": "file:vendor/laravel/nova-devtool",
+    "lodash": "^4.17.21"
+  },
+  "dependencies": {
+    "wanakana": "^5.3.1"
+  }
+}

postcss.config.js

@@ -0,0 +1 @@
+module.exports = {}

resources/css/field.css

@@ -0,0 +1 @@
+/* Nova Field CSS */

resources/js/components/Text/DetailField.vue

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

resources/js/components/Text/FormField.vue

@@ -0,0 +1,71 @@
+<template>
+    <DefaultField
+        :field="currentField"
+        :errors="errors"
+        :show-help-text="showHelpText"
+        :full-width-content="fullWidthContent"
+    >
+        <template #field>
+            <input
+                :id="currentField.uniqueKey"
+                type="text"
+                class="w-full form-control form-input form-control-bordered"
+                :class="errorClasses"
+                :placeholder="currentField.placeholder"
+                @change="handleChange"
+            />
+        </template>
+    </DefaultField>
+</template>
+
+<script>
+import {DependentFormField, HandlesValidationErrors} from 'laravel-nova'
+import * as wanakana from 'wanakana';
+
+export default {
+    mixins: [DependentFormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    mounted() {
+        this.setInitialValue()
+
+        wanakana.bind(this.getInputElement(), {
+            IMEMode: this.currentField.IMEMode || true,
+            ...this.currentField.options,
+        })
+    },
+
+    unmounted() {
+        wanakana.unbind(this.getInputElement())
+    },
+
+    methods: {
+        getInputElement() {
+            return document.getElementById(this.currentField.uniqueKey)
+        },
+
+        handleChange() {
+            this.emitFieldValueChange(this.fieldAttribute, this.getInputElement().value)
+            this.$emit('field-changed')
+        },
+        /*
+         * Set the initial, internal value for the field.
+         */
+        setInitialValue() {
+            const input = this.getInputElement()
+
+            if (input) {
+                input.value = this.currentField.value || ''
+            }
+        },
+
+        /**
+         * Fill the given FormData object with the field's internal value.
+         */
+        fill(formData) {
+            formData.append(this.fieldAttribute, this.getInputElement().value || '')
+        },
+    },
+}
+</script>

resources/js/components/Text/IndexField.vue

@@ -0,0 +1,15 @@
+<template>
+  <span>{{ fieldValue }}</span>
+</template>
+
+<script>
+export default {
+  props: ['resourceName', 'field'],
+
+  computed: {
+    fieldValue() {
+      return this.field.displayedAs || this.field.value
+    },
+  }
+}
+</script>

resources/js/components/Textarea/DetailField.vue

@@ -0,0 +1,17 @@
+<template>
+    <PanelItem :index="index" :field="field">
+        <template #value>
+            <Excerpt
+                :content="field.value"
+                :plain-text="true"
+                :should-show="field.shouldShow"
+            />
+        </template>
+    </PanelItem>
+</template>
+
+<script>
+export default {
+    props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

resources/js/components/Textarea/FormField.vue

@@ -0,0 +1,72 @@
+<template>
+    <DefaultField
+        :field="currentField"
+        :errors="errors"
+        :show-help-text="showHelpText"
+        :full-width-content="fullWidthContent"
+    >
+        <template #field>
+      <textarea
+          :id="currentField.uniqueKey"
+          type="text"
+          class="block w-full form-control form-input form-control-bordered py-3 h-auto"
+          :class="errorClasses"
+          :placeholder="currentField.placeholder"
+          :rows="currentField.rows"
+          @change="handleChange"
+      />
+        </template>
+    </DefaultField>
+</template>
+
+<script>
+import {DependentFormField, HandlesValidationErrors} from 'laravel-nova'
+import * as wanakana from "wanakana";
+
+export default {
+    mixins: [DependentFormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    mounted() {
+        this.setInitialValue()
+
+        wanakana.bind(this.getInputElement(), {
+            IMEMode: this.currentField.IMEMode || true,
+            ...this.currentField.options,
+        })
+    },
+
+    unmounted() {
+        wanakana.unbind(this.getInputElement())
+    },
+
+    methods: {
+        getInputElement() {
+            return document.getElementById(this.currentField.uniqueKey)
+        },
+
+        handleChange() {
+            this.emitFieldValueChange(this.fieldAttribute, this.getInputElement().value)
+            this.$emit('field-changed')
+        },
+        /*
+         * Set the initial, internal value for the field.
+         */
+        setInitialValue() {
+            const input = this.getInputElement()
+
+            if (input) {
+                input.value = this.currentField.value || ''
+            }
+        },
+
+        /**
+         * Fill the given FormData object with the field's internal value.
+         */
+        fill(formData) {
+            formData.append(this.fieldAttribute, this.getInputElement().value || '')
+        },
+    },
+}
+</script>

resources/js/field.js

@@ -0,0 +1,15 @@
+import IndexField from './components/Text/IndexField.vue'
+import DetailField from './components/Text/DetailField.vue'
+import FormField from './components/Text/FormField.vue'
+
+import DetailTextareaField from './components/Textarea/DetailField.vue'
+import FormTextareaField from './components/Textarea/FormField.vue'
+
+Nova.booting((app, store) => {
+  app.component('index-japanese-transformer-text', IndexField)
+  app.component('detail-japanese-transformer-text', DetailField)
+  app.component('form-japanese-transformer-text', FormField)
+
+  app.component('detail-japanese-transformer-textarea', DetailTextareaField)
+  app.component('form-japanese-transformer-textarea', FormTextareaField)
+})

src/FieldServiceProvider.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Bocanhcam\NovaJapaneseTransformer;
+
+use Illuminate\Support\ServiceProvider;
+use Laravel\Nova\Events\ServingNova;
+use Laravel\Nova\Nova;
+
+class FieldServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(): void
+    {
+        Nova::serving(function (ServingNova $event) {
+            //Nova::mix('nova-japanese-transformer', __DIR__.'/../dist/mix-manifest.json');
+            Nova::script('nova-japanese-transformer', __DIR__.'/../dist/js/field.js');
+            Nova::style('nova-japanese-transformer', __DIR__.'/../dist/css/field.css');
+        });
+    }
+
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        //
+    }
+}

src/HasTextTransform.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Bocanhcam\NovaJapaneseTransformer;
+
+use Laravel\Nova\Fields\SupportsDependentFields;
+
+trait HasTextTransform
+{
+    use SupportsDependentFields;
+
+    public function toKatakana()
+    {
+        return $this->withMeta(['IMEMode' => 'toKatakana']);
+    }
+
+    public function toHiragana()
+    {
+        return $this->withMeta(['IMEMode' => 'toHiragana']);
+    }
+
+    public function options($options = [])
+    {
+        return $this->withMeta(['options' => $options]);
+    }
+}

src/JapaneseTransformerText.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Bocanhcam\NovaJapaneseTransformer;
+
+use Laravel\Nova\Fields\Text;
+
+class JapaneseTransformerText extends Text
+{
+    use HasTextTransform;
+
+    /**
+     * The field's component.
+     *
+     * @var string
+     */
+    public $component = 'japanese-transformer-text';
+}