Tweak css to match latest style changes from icon-action-toolbar pa…

…ckage (#4)
dcasia · Oct 21, 2023 · e149b8f · e149b8f
1 parent e89f4dc
commit e149b8f
Show file tree

Hide file tree

Showing 4 changed files with 320 additions and 298 deletions.
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
         "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "@vue/compiler-sfc": "^3.2.22",
+        "@vue/compiler-sfc": "^3.3.6",
         "laravel-mix": "^6.0.41",
         "vue-loader": "^17.3.0"
     }

diff --git a/resources/js/components/Toolbar.vue b/resources/js/components/Toolbar.vue
@@ -15,23 +15,19 @@
 
         <div v-for="field of actions">
 
-            <Dropdown
+            <button
                 v-tooltip="field.batchEditable.tooltip || field.batchEditable.title || __(`Update :name`, { name: field.name })"
-                :handle-internal-clicks="false"
-                class="flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg focus:ring-2"
-                :trigger-override-function="() => openModal(field)">
+                @click.stop="() => openModal(field)"
+                type="button"
+                class="hover:text-primary-500 inline-flex items-center justify-center w-9 h-9 focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 rounded-lg">
 
-                <div class="toolbar-button px-2">
+                <template v-if="field.batchEditable.icon.startsWith('<svg')">
+                    <div v-html="field.batchEditable.icon"/>
+                </template>
 
-                    <template v-if="field.batchEditable.icon.startsWith('<svg')">
-                        <div v-html="field.batchEditable.icon"/>
-                    </template>
+                <Icon v-else :type="field.batchEditable.icon"/>
 
-                    <Icon v-else :type="field.batchEditable.icon"/>
-
-                </div>
-
-            </Dropdown>
+            </button>
 
         </div>