Icons hover style, scrollable toolbar on detail view, replicate icon …

…fix, icon aligment on table row, introduced nova-packages-tool (#16) Co-authored-by: Rafael Milewski <[email protected]>
dcasia · Oct 8, 2024 · 199e87c · 199e87c
1 parent 2929c90
commit 199e87c
Show file tree

Hide file tree

Showing 9 changed files with 1,264 additions and 1,227 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ phpunit.xml
 .phpunit.result.cache
 .DS_Store
 Thumbs.db
+auth.json
diff --git a/composer.json b/composer.json
@@ -15,7 +15,8 @@
     "license": "MIT",
     "require": {
         "php": ">=8.1",
-        "laravel/nova": "^4.28.0"
+        "laravel/nova": "^4.28.0",
+        "nova-kit/nova-packages-tool": "^1.17"
     },
     "autoload": {
         "psr-4": {
@@ -35,4 +36,3 @@
     "minimum-stability": "dev",
     "prefer-stable": true
 }
-
diff --git a/dist/css/tool.css b/dist/css/tool.css
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/nova.mix.js b/nova.mix.js
@@ -14,12 +14,12 @@ class NovaExtension {
     webpackConfig(webpackConfig) {
         webpackConfig.externals = {
             vue: 'Vue',
+            'laravel-nova': 'LaravelNova',
+            'laravel-nova-ui': 'LaravelNovaUi',
         }
 
         webpackConfig.resolve.alias = {
             ...(webpackConfig.resolve.alias || {}),
-            'laravel-nova': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/packages.js'),
-            'laravel-nova-ui': path.join(__dirname, '../../vendor/laravel/nova/node_modules/laravel-nova-ui'),
             '@': path.resolve(__dirname, '../../vendor/laravel/nova/resources/js/'),
         }
 

diff --git a/resources/css/tool.css b/resources/css/tool.css
@@ -1,2 +1,2 @@
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
diff --git a/resources/js/components/ActionDropdown.vue b/resources/js/components/ActionDropdown.vue
@@ -14,22 +14,24 @@
             :action="selectedAction"
             :errors="errors"
             @confirm="runAction"
-            @close="closeConfirmationModal"
-        />
+            @close="closeConfirmationModal"/>
 
         <component
             v-if="responseModalVisible"
             :show="responseModalVisible"
             :is="actionResponseData?.modal"
             @confirm="handleResponseModalConfirm"
             @close="handleResponseModalClose"
-            :data="actionResponseData"
-        />
-
-        <IconActionToolbar :parent-type="parentType" :actions="availableActions" @click="onClick" :standalone="true"/>
+            :data="actionResponseData"/>
 
     </div>
 
+    <IconActionToolbar
+        :parent-type="parentType"
+        :actions="availableActions"
+        @click="onClick"
+        :standalone="true"/>
+
 </template>
 
 <script setup>
@@ -105,8 +107,9 @@
         const resource = instance.parent?.props?.resource
         const currentUser = Nova.store.getters[ 'currentUser' ]
         const config = Nova.config('icon_action_toolbar')
+        const isViaManyToMany = instance.parent?.props?.viaManyToMany === true
 
-        if (resource) {
+        if (resource && isViaManyToMany === false) {
 
             if (resource.authorizedToReplicate) {
 
@@ -120,7 +123,7 @@
                             viaResource: props.viaResource,
                             viaResourceId: props.viaResourceId,
                             viaRelationship: props.viaRelationship,
-                        })
+                        }).replace(Nova.config('base'), '')
 
                         Nova.visit(url)
 

diff --git a/resources/js/components/IconActionToolbar.vue b/resources/js/components/IconActionToolbar.vue
@@ -1,38 +1,43 @@
 <template>
 
-    <div v-if="actions.length > 0"
-         :class="{ 'rounded': standalone, 'rounded-lg bg-gray-700/5 dark:bg-gray-700': !standalone }"
-         class="flex dark:focus:ring-gray-600 justify-evenly">
+    <div :class="{ 'icon-action-toolbar-wrapper': standalone && isDetailView }">
 
-        <div v-for="{ iconActionToolbar, destructive, uriKey, name } of actions">
+        <div v-if="actions.length > 0"
+             :class="{ 'rounded': standalone, 'rounded bg-gray-700/5 dark:bg-gray-950': !standalone }"
+             class="flex dark:focus:ring-gray-600 justify-evenly">
 
-            <button
-                v-tooltip="name"
-                v-if="iconActionToolbar"
-                type="button"
-                @click.stop="() => $emit('click', uriKey)"
-                :class="{
-                    'dark:hover:text-primary-500': parentType === 'ActionSelector',
-                    'w-auto': !isDetailView && !standalone,
-                    'hover:text-red-500': destructive && !isDetailView,
-                    'dark:hover:text-primary-500 hover:text-primary-500': !destructive && !isDetailView,
-                    'rounded hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring px-3 hover:text-gray-500': standalone && isDetailView
-                }"
-                class="toolbar-button h-9 dark:text-gray-400 text-gray-500 px-2 disabled:opacity-50 disabled:pointer-events-none">
+            <div v-for="{ iconActionToolbar, destructive, uriKey, name } of actions">
 
-                <Icon v-if="typeof iconActionToolbar.icon !== 'string'" name="cube-transparent"/>
+                <button
+                    v-tooltip="name"
+                    v-if="iconActionToolbar"
+                    type="button"
+                    @click.stop="() => $emit('click', uriKey)"
+                    :class="{
+                        'dark:hover:[&:not(:disabled)]:text-primary-500 px-2': parentType === 'ActionSelector',
+                        'w-auto': !isDetailView && !standalone,
+                        'px-3 w-auto': !isDetailView && parentType === 'LoadingView.vue',
+                        'hover:[&:not(:disabled)]:text-red-400 dark:hover:[&:not(:disabled)]:text-red-400 min-w-9': destructive && !isDetailView,
+                        'hover:[&:not(:disabled)]:text-primary-500 dark:hover:[&:not(:disabled)]:text-primary-500 min-w-9': !destructive && !isDetailView,
+                        'rounded hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring px-3 hover:text-gray-500': standalone && isDetailView,
+                    }"
+                    class="inline-flex items-center justify-center toolbar-button h-9 dark:text-gray-400 text-gray-500 disabled:opacity-50 disabled:pointer-events-none">
 
-                <template v-else-if="iconActionToolbar.icon?.trim()?.startsWith('<svg')">
-                    <div v-html="iconActionToolbar.icon"/>
-                </template>
+                    <Icon v-if="typeof iconActionToolbar.icon !== 'string'" name="cube-transparent"/>
 
-                <Icon v-else-if="iconActionToolbar.icon" :name="iconActionToolbar.icon"/>
+                    <template v-else-if="iconActionToolbar.icon?.trim()?.startsWith('<svg')">
+                        <div v-html="iconActionToolbar.icon"/>
+                    </template>
 
-                <div class="ml-1 whitespace-nowrap" v-if="iconActionToolbar.label">
-                    {{ iconActionToolbar.label }}
-                </div>
+                    <Icon v-else-if="iconActionToolbar.icon" :name="iconActionToolbar.icon"/>
 
-            </button>
+                    <div class="ml-1 mr-1 whitespace-nowrap" v-if="iconActionToolbar.label">
+                        {{ iconActionToolbar.label }}
+                    </div>
+
+                </button>
+
+            </div>
 
         </div>
 
@@ -60,6 +65,11 @@
 
 <style lang="scss">
 
+    .icon-action-toolbar-wrapper {
+        width: calc(100% - 48px);
+        overflow-x: auto;
+    }
+
     div[dusk$="detail-component"] div.icon-action-toolbar {
         @apply mx-0;
     }