WIP

composer.json

@@ -11,7 +11,8 @@
   "license": "MIT",
   "require": {
     "php": ">=8.0",
-    "laravel/nova": "^4.0"
+    "laravel/nova": "^4.0",
+    "nova-kit/nova-packages-tool": "^1.0.1"
   },
   "autoload": {
     "psr-4": {

dist/js/entry.js.LICENSE.txt

@@ -1,20 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.63
+  * vue-tippy v6.0.0-alpha.65
   * (c) 2022 
   * @license MIT
   */
-
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <http://feross.org>
- * @license  MIT
- */
-
-/*!
- * vuex v4.0.2
- * (c) 2021 Evan You
- * @license MIT
- */
-
-/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

package.json

@@ -8,26 +8,26 @@
     "format": "prettier --write 'resources/**/*.{css,scss,js,vue}'"
   },
   "devDependencies": {
-    "@inertiajs/inertia": "^0.11.0",
+    "@inertiajs/inertia": "^0.11.1",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "axios": "^0.27.2",
     "cross-env": "^7.0.3",
     "form-backend-validation": "^2.4.0",
     "laravel-mix": "^6.0.49",
-    "postcss": "^8.4.16",
-    "postcss-import": "^14.1.0",
+    "postcss": "^8.4.17",
+    "postcss-import": "^15.0.0",
     "prettier": "^2.7.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.54.4",
-    "sass-loader": "^13.0.2",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
     "tailwindcss": "^3.1.8",
-    "terser-webpack-plugin": "^5.3.3",
+    "terser-webpack-plugin": "^5.3.6",
     "vue-loader": "^17.0.0",
-    "vue-template-compiler": "^2.7.8",
+    "vue-template-compiler": "^2.7.10",
     "vuex": "^4.0.2"
   },
   "dependencies": {
-    "vue": "^3.2.37",
-    "vue-tippy": "^6.0.0-alpha.63"
+    "vue": "^3.2.40",
+    "vue-tippy": "^6.0.0-alpha.65"
   }
 }

resources/js/components/Tooltip.vue

@@ -2,12 +2,17 @@
   <Tippy
     :content="field.content"
     :allowHTML="field.allowHtml"
-    class="o1-cursor-pointer o1-items-center o1-flex o1-justify-center o1-text-90 hover:o1-text-primary"
+    class="o1-cursor-pointer o1-flex o1-text-90 hover:o1-text-primary"
+    :class="{
+      'o1-justify-center': field.textAlign === 'center',
+      'o1-justify-start': field.textAlign === 'left',
+      'o1-justify-end': field.textAlign === 'right',
+    }"
   >
-    <span class="o1-mr-2" v-if="field.text && field.iconPosition === 'right'">{{ field.text }}</span>
+    <div class="o1-mr-2" v-if="field.text && field.iconPosition === 'right'">{{ field.text }}</div>
     <img v-if="field.iconUrl" :width="field.size || 25" :src="field.iconUrl" />
-    <span class="o1-inline-flex o1-text-70" v-if="field.iconPath" v-html="field.iconPath"></span>
-    <span class="o1-ml-2" v-if="field.text && field.iconPosition === 'left'">{{ field.text }}</span>
+    <span class="o1-inline-flex o1-text-70" :class="field.textAlign" v-if="field.iconPath" v-html="field.iconPath" />
+    <div class="o1-ml-2" v-if="field.text && field.iconPosition === 'left'">{{ field.text }}</div>
   </Tippy>
 </template>
 

resources/js/entry.js

@@ -2,7 +2,7 @@ import IndexField from './components/IndexField';
 import DetailField from './components/DetailField';
 import FormField from './components/FormField';
 
-Nova.booting((Vue, router) => {
+Nova.booting((Vue, store) => {
   Vue.component('index-o1-tooltip-field', IndexField);
   Vue.component('detail-o1-tooltip-field', DetailField);
   Vue.component('form-o1-tooltip-field', FormField);

webpack.mix.js

@@ -10,6 +10,7 @@ mix
   .webpackConfig({
     externals: {
       vue: 'Vue',
+      'laravel-nova': 'LaravelNova',
     },
     output: {
       uniqueName: 'outl1ne/nova-tooltip-field',
@@ -18,7 +19,4 @@ mix
   .autoload({
     jquery: ['$', 'window.jQuery', 'jQuery'],
   })
-  .postCss('resources/css/entry.css', 'dist/css/', [postcss(), tailwindcss('tailwind.config.js')])
-  .alias({
-    'laravel-nova': path.join(__dirname, 'vendor/laravel/nova/resources/js/mixins/packages.js'),
-  });
+  .postCss('resources/css/entry.css', 'dist/css/', [postcss(), tailwindcss('tailwind.config.js')]);