added TW classes to tags items and suggested list (#151)

spatie · Apr 10, 2022 · 30c886c · 30c886c
1 parent 384e0c2
commit 30c886c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/js/field.js.LICENSE.txt b/dist/js/field.js.LICENSE.txt
@@ -0,0 +1,6 @@
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
diff --git a/resources/js/components/Tags/MultiTagsInput.vue b/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)"
                     >

diff --git a/src/TagsFieldServiceProvider.php b/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 () {