wip

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to `nova-tags-field` will be documented in this file
 
+## 4.0.2 - 2022-04-10
+
+## What's Changed
+
+- added TW classes to tags items and suggested list by @sp4r74cus in https://github.com/spatie/nova-tags-field/pull/151
+
+## New Contributors
+
+- @sp4r74cus made their first contribution in https://github.com/spatie/nova-tags-field/pull/151
+
+**Full Changelog**: https://github.com/spatie/nova-tags-field/compare/4.0.1...4.0.2
+
+## 4.0.1 - 2022-04-07
+
+## What's Changed
+
+- Dark mode support by @saundefined in https://github.com/spatie/nova-tags-field/pull/149
+- Remove unused sass
+
+## New Contributors
+
+- @saundefined made their first contribution in https://github.com/spatie/nova-tags-field/pull/149
+
+**Full Changelog**: https://github.com/spatie/nova-tags-field/compare/4.0.0...4.0.1
+
 ## 4.0.0 - 2022-04-07
 
 ## What's Changed

dist/js/field.js.LICENSE.txt

@@ -4,3 +4,12 @@
  * @author   Feross Aboukhadijeh <https://feross.org>
  * @license  MIT
  */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */

package.json

@@ -23,7 +23,8 @@
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.50.0",
         "sass-loader": "^12.1.0",
-        "vue-loader": "^16.2.0"
+        "vue-loader": "^16.2.0",
+        "lodash": "^4.17.21"
     },
     "dependencies": {
         "animated-scroll-to": "^1.2.2",

resources/js/components/Tags/MultiTagsInput.vue

@@ -19,15 +19,15 @@
             }"
         >
             <div
-                class="tags-input w-full form-control form-input form-input-bordered flex items-center"
+                class="tags-input w-full form-control form-input form-input-bordered h-auto p-2 flex flex-wrap items-center"
                 :class="{ 'border-danger': errors.has(name) }"
                 @click="focusInput"
             >
-                <span v-for="tag in tags" :key="tag" class="tags-input-tag mr-1">
+
+                <span v-for="tag in tags" :key="tag" class="flex items-center space-x-2 px-2 py-1 bg-primary-500 mr-1 mb-1 rounded text-white">
                     <span>{{ tag }}</span>
                     <button
                         type="button"
-                        class="tags-input-remove"
                         @click.prevent.stop="removeTag(tag)"
                     >
                         &times;
@@ -36,16 +36,17 @@
                 <input
                     v-if="canAddTag"
                     ref="input"
-                    class="tags-input-text dark:bg-gray-900"
+                    class="dark:bg-gray-900 outline-none p-1 w-32"
                     :placeholder="placeholder ? placeholder : __('Add tag...')"
                     v-bind="inputProps"
                     v-on="inputEvents"
                 />
+
             </div>
-            <ul v-if="suggestions.length" class="tags-input-suggestions">
-                <li v-for="suggestion in suggestions" :key="suggestion" class="mr-1">
+            <ul v-if="suggestions.length" class="flex mt-2 p-0">
+                <li v-for="suggestion in suggestions" :key="suggestion" class="mr-2">
                     <button
-                        class="tags-input-tag"
+                        class="px-2 py-1 bg-primary-100 rounded text-primary-500"
                         @mousedown.prevent
                         @click.prevent="insertSuggestion(suggestion)"
                     >

resources/js/components/Tags/TagsInput.vue

@@ -1,5 +1,6 @@
 <script>
 import { h } from 'vue';
+import { throttle } from 'lodash';
 
 export default {
     props: {
@@ -26,7 +27,7 @@ export default {
     },
 
     created() {
-        this.throttledGetSuggested = window._.throttle(this.getSuggested, 400);
+        this.throttledGetSuggested = throttle(this.getSuggested, 400);
     },
 
     computed: {

src/TagsFieldServiceProvider.php

@@ -14,7 +14,7 @@ public function boot()
     {
         Nova::serving(function (ServingNova $event) {
             Nova::script('nova-tags-field', __DIR__.'/../dist/js/field.js');
-            Nova::style('nova-tags-field', __DIR__.'/../dist/css/field.css');
+            //Nova::style('nova-tags-field', __DIR__.'/../dist/css/field.css');
         });
 
         $this->app->booted(function () {