wip

nova-components/NovaCustomHtml/.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

nova-components/NovaCustomHtml/composer.json

@@ -0,0 +1,29 @@
+{
+    "name": "nurmuhammet/nova-custom-html",
+    "description": "A Laravel Nova field.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": "^7.3|^8.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "Nurmuhammet\\NovaCustomHtml\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Nurmuhammet\\NovaCustomHtml\\FieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

nova-components/NovaCustomHtml/dist/css/field.css

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

nova-components/NovaCustomHtml/dist/mix-manifest.json

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

nova-components/NovaCustomHtml/nova.mix.js

@@ -0,0 +1,40 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+  name() {
+    return 'nova-extension'
+  }
+
+  register(name) {
+    this.name = name
+  }
+
+  webpackPlugins() {
+    return new webpack.ProvidePlugin({
+      _: 'lodash',
+      Errors: 'form-backend-validation',
+    })
+  }
+
+  webpackConfig(webpackConfig) {
+    webpackConfig.externals = {
+      vue: 'Vue',
+    }
+
+    webpackConfig.resolve.alias = {
+      ...(webpackConfig.resolve.alias || {}),
+      'laravel-nova': path.join(
+        __dirname,
+        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+      ),
+    }
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    }
+  }
+}
+
+mix.extend('nova', new NovaExtension())

nova-components/NovaCustomHtml/package.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production",
+    "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.22",
+    "form-backend-validation": "^2.3.3",
+    "laravel-mix": "^6.0.41",
+    "lodash": "^4.17.21",
+    "postcss": "^8.3.11",
+    "vue-loader": "^16.8.3"
+  },
+  "dependencies": {}
+}

nova-components/NovaCustomHtml/postcss.config.js

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

nova-components/NovaCustomHtml/resources/css/field.css

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

nova-components/NovaCustomHtml/resources/js/components/DetailField.vue

@@ -0,0 +1,44 @@
+<template>
+  <FieldWrapper
+      :class="{'hidden': hidden, 'w-full': fullWidth}"
+      v-if="field.visible"
+    >
+      <div
+        v-html="field.html"
+        :class="classes"
+      />
+    </FieldWrapper>
+</template>
+
+<script>
+export default {
+  props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
+
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.fullWidth = this.field.fullWidth || true;
+      this.value = this.field.value || ''
+      this.html = this.field.html || ''
+      this.alert_message = this.field.alert_message || null
+      this.hidden = this.field.hidden || false
+    },
+
+      computed: {
+        classes: () => [
+          'remove-last-margin-bottom',
+          'leading-normal',
+          'w-full',
+          'py-4',
+          'px-8',
+        ],
+      },
+
+    mounted() {
+        if (this.alert_message) {
+            alert(this.alert_message)
+        }
+    }
+}
+</script>

nova-components/NovaCustomHtml/resources/js/components/FormField.vue

@@ -0,0 +1,57 @@
+<template>
+    <FieldWrapper
+      :class="{'hidden': hidden, 'w-full': fullWidth}"
+      v-if="currentField.visible"
+    >
+      <div
+        v-html="currentField.html"
+        :class="classes"
+      />
+    </FieldWrapper>
+</template>
+
+<script>
+import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
+
+export default {
+  mixins: [DependentFormField, HandlesValidationErrors],
+
+  props: ['resourceName', 'resourceId', 'field'],
+
+  methods: {
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.fullWidth = this.field.fullWidth || true;
+      this.value = this.field.value || ''
+      this.html = this.field.html || ''
+      this.alert_message = this.field.alert_message || null
+      this.hidden = this.field.hidden || false
+    },
+
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill(formData) {
+      formData.append(this.field.attribute, this.value || '')
+    },
+  },
+
+  computed: {
+    classes: () => [
+      'remove-last-margin-bottom',
+      'leading-normal',
+      'w-full',
+      'py-4',
+      'px-8',
+    ],
+  },
+
+  mounted() {
+    if (this.alert_message) {
+        alert(this.alert_message)
+    }
+  }
+}
+</script>

nova-components/NovaCustomHtml/resources/js/components/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>

nova-components/NovaCustomHtml/resources/js/field.js

@@ -0,0 +1,9 @@
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
+import FormField from './components/FormField'
+
+Nova.booting((app, store) => {
+  app.component('index-nova-custom-html', IndexField)
+  app.component('detail-nova-custom-html', DetailField)
+  app.component('form-nova-custom-html', FormField)
+})

nova-components/NovaCustomHtml/src/FieldServiceProvider.php

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

nova-components/NovaCustomHtml/src/NovaCustomHtml.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace Nurmuhammet\NovaCustomHtml;
+
+use Laravel\Nova\Fields\Field;
+use Laravel\Nova\Fields\SupportsDependentFields;
+
+class NovaCustomHtml extends Field
+{
+     use SupportsDependentFields;
+
+    /**
+     * The field's component.
+     *
+     * @var string
+     */
+    public $component = 'nova-custom-html';
+
+    /**
+     * Make field html
+     *
+     * @var string
+     */
+    public function html(string $html): self
+    {
+        return $this->withMeta(['html' => $html]);
+    }
+
+    /**
+     * Full width
+     */
+    public function fullWidth(): self
+    {
+        return $this->withMeta(['fullWidth' => true]);
+    }
+
+    /**
+     * Alert if there is message
+     *
+     * @var string
+     */
+    public function alert(string $message): self
+    {
+        return $this->withMeta(['alert_message' => $message]);
+    }
+
+    /**
+     * Hide
+     * @param  bool|boolean
+     */
+    public function hidden(bool $hidden = true): self
+    {
+        return $this->withMeta(['hidden' => $hidden]);
+    }
+}

nova-components/NovaCustomHtml/webpack.mix.js

@@ -0,0 +1,10 @@
+let mix = require('laravel-mix')
+
+require('./nova.mix')
+
+mix
+  .setPublicPath('dist')
+  .js('resources/js/field.js', 'js')
+  .vue({ version: 3 })
+  .css('resources/css/field.css', 'css')
+  .nova('nurmuhammet/nova-custom-html')