Skip to content

Commit f308e94

Browse files
pavloniympavloniym
committed
feature(ActionButton): merged key for button + added icon html and icon url methods
1 parent a081519 commit f308e94

10 files changed

+5756
-129
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ public function fields(Request $request)
3737
// ... Nova default fields
3838

3939
ActionButton::make('') // Name in resource table column
40-
->icon('<svg></svg>') // Svg icon or heroicon name (optional) ->icon('lightning-bolt')
40+
->icon('lightning-bolt') // heroicon name ->icon('lightning-bolt')
41+
->iconHtml('<svg></svg>') // Svg (or html) icon
42+
->iconUrl('https://img.com/icon.png') // Url of icon
4143
->text('Refresh') // Title (optional)
4244
->tooltip('Magic tooltip here') // Tooltip text (optional). If not provided, it will default to the action name.
4345
->styles([]) // Custom css styles (optional)

‎dist/css/field.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/field.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/components/ActionButtonField.vue

+10-91
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,6 @@
11
<template>
22
<div class="relative">
3-
<a
4-
href="#"
5-
:style="finalStyles"
6-
:class="finalClasses"
7-
:title="name"
8-
@click.stop.prevent="fireAction"
9-
@mouseenter="onMouseEnterTooltip"
10-
@mouseleave="onMouseLeaveTooltip"
11-
>
12-
<span v-if="text" v-text="text"></span>
13-
<template v-if="icon">
14-
<span v-if="isHtmlIcon" v-html="icon"></span>
15-
<Icon v-else :type="icon" />
16-
</template>
17-
</a>
18-
<div
19-
v-if="tooltipIsVisible && tooltip"
20-
class="absolute z-10 left-1/2 -top-1 transform -translate-x-1/2 -translate-y-full px-2 py-1 bg-gray-700 text-white text-xs rounded"
21-
>
22-
{{ tooltip }}
23-
</div>
3+
<action-button v-bind="{field, fireAction}" />
244
<component
255
v-if="confirmActionModalOpened"
266
v-bind="options"
@@ -34,66 +14,23 @@
3414

3515
<script setup>
3616
37-
// Vue
38-
import {computed, ref} from 'vue'; // Composables
39-
import {useHandleAction} from '../mixins/HandlesActions' // Props
17+
// Components
18+
import ActionButton from './_components/button/ActionButton.vue';
4019
41-
// Props
20+
// Composables
21+
import {computed, ref} from 'vue';
22+
import {useHandleAction} from '../mixins/HandlesActions'
23+
24+
// Props
4225
const props = defineProps({
4326
field: {type: Object, default: null},
4427
queryString: {type: Object, default: null},
4528
resourceName: {type: String, default: null},
4629
});
4730
48-
const tooltipIsVisible = ref(false);
49-
50-
// Computed
51-
const text = computed(() => props?.field?.text || null);
52-
const icon = computed(() => props?.field?.icon || null);
53-
const hasTooltip = computed(() => props?.field?.hasTooltip === true);
54-
const tooltip = computed(() => props?.field?.tooltip || props?.field?.action?.name);
55-
const name = computed(() => props?.field?.name || props?.field?.title || null);
56-
const customStyles = computed(() => props?.field?.styles || []);
57-
const customClasses = computed(() => props?.field?.classes || []);
58-
const asToolbarButton = computed(() => props?.field?.asToolbarButton === true);
59-
const isHtmlIcon = computed(() => icon.value && /<\/?[a-z][\s\S]*>/i.test(icon?.value));
60-
61-
const actionButtonClasses = computed(() => [
62-
'flex-shrink-0', 'shadow', 'rounded', 'focus:outline-none', 'ring-primary-200', 'dark:ring-gray-600',
63-
'focus:ring', 'bg-primary-500', 'hover:bg-primary-400', 'active:bg-primary-600',
64-
'text-white', 'dark:text-gray-800', 'inline-flex', 'items-center', 'font-bold', 'px-2', 'mx-1', 'h-9', 'text-sm', 'flex-shrink-0',
65-
])
66-
const toolbarButtonClasses = computed(() => [
67-
'toolbar-button', 'hover:text-primary-500', 'px-2', 'v-popper--has-tooltip', 'w-10'
68-
])
69-
70-
// Computed
71-
// Get action button styles
72-
const actionButtonStyles = computed(() => {
73-
return {
74-
margin: '0 2px',
75-
}
76-
})
77-
78-
79-
// Computed
80-
// Get final styles
81-
const finalStyles = computed(() => {
82-
return {
83-
...(asToolbarButton?.value === true ? null : actionButtonStyles?.value),
84-
...(customStyles.value || {}),
85-
}
86-
})
8731
8832
// Computed
89-
// Get final classes
90-
const finalClasses = computed(() => {
91-
return [
92-
...(asToolbarButton?.value === true ? toolbarButtonClasses.value : actionButtonClasses.value),
93-
...(customClasses.value || [])
94-
]
95-
})
96-
33+
// Get query string options
9734
const queryString = computed(() => ({
9835
action: selectedAction?.value?.uriKey,
9936
search: props?.queryString?.currentSearch,
@@ -104,8 +41,8 @@ import {useHandleAction} from '../mixins/HandlesActions' // Props
10441
viaRelationship: props?.queryString?.viaRelationship,
10542
}));
10643
44+
// Computed
10745
const selectedAction = computed(() => props?.field?.action);
108-
10946
const selectedResources = computed(() => [props?.field?.resourceId]);
11047
11148
// Bindings
@@ -135,22 +72,4 @@ import {useHandleAction} from '../mixins/HandlesActions' // Props
13572
selectedResources: selectedResources?.value,
13673
}))
13774
138-
const onMouseLeaveTooltip = () => {
139-
tooltipIsVisible.value = false;
140-
}
141-
142-
const onMouseEnterTooltip = () => {
143-
if (hasTooltip.value) tooltipIsVisible.value = true;
144-
}
145-
14675
</script>
147-
<style scoped>
148-
149-
.tooltip {
150-
@apply invisible absolute;
151-
}
152-
153-
.has-tooltip:hover .tooltip {
154-
@apply visible z-50;
155-
}
156-
</style>

‎resources/js/components/ActionButtonsField.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="flex align-center" :class="alignClasses">
3-
<template v-for="(action, k) in actions" :key="k">
3+
<template v-for="action in actions" :key="action?.key">
44
<action-button v-bind="action"/>
55
</template>
66
</div>
@@ -25,7 +25,8 @@
2525
const collection = computed(() => props?.field?.collection || []);
2626
const actions = computed(() => (collection?.value || [])
2727
.filter((field) => field.action.showOnIndex)
28-
.map(field => ({
28+
.map((field, i) => ({
29+
key: new Date().getTime() + i,
2930
field: field,
3031
queryString: props?.queryString,
3132
resourceName: props?.resourceName,

‎resources/js/components/DetailActionButtonField.vue

+6-31
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
<template>
22
<panel-item :field="field">
33
<template v-slot:value>
4-
<a href="#" :style="finalStyles" :class="finalClasses" :title="name" @click.stop.prevent="fireAction">
5-
<span v-if="text" v-text="text"/>
6-
<span v-if="icon" v-html="icon"/>
7-
</a>
8-
9-
<!-- Action Confirmation Modal -->
4+
<action-button v-bind="{field, fireAction}"/>
105
<portal to="modals" transition="fade-transition">
116
<component
127
v-if="confirmActionModalOpened"
@@ -23,8 +18,12 @@
2318

2419
<script setup>
2520
26-
// Vue
21+
// Components
22+
import ActionButton from './_components/button/ActionButton.vue';
23+
24+
// Composables
2725
import {computed} from 'vue';
26+
import {useHandleAction} from '../mixins/HandlesActions'
2827
2928
// Props
3029
const props = defineProps({
@@ -33,29 +32,6 @@
3332
resourceName: {type: String, default: null},
3433
});
3534
36-
// Composables
37-
import {useHandleAction} from '../mixins/HandlesActions'
38-
39-
// Computed
40-
const text = computed(() => props?.field?.text || null);
41-
const icon = computed(() => props?.field?.icon || null);
42-
const name = computed(() => props?.field?.name || null);
43-
const customStyles = computed(() => props?.field?.styles || []);
44-
const customClasses = computed(() => props?.field?.classes || []);
45-
const asToolbarButton = computed(() => props?.field?.asToolbarButton === true);
46-
47-
const actionButtonClasses = computed(() => [
48-
'flex-shrink-0', 'shadow', 'rounded', 'focus:outline-none', 'ring-primary-200', 'dark:ring-gray-600',
49-
'focus:ring', 'bg-primary-500', 'hover:bg-primary-400', 'active:bg-primary-600',
50-
'text-white', 'dark:text-gray-800', 'inline-flex', 'items-center', 'font-bold', 'px-2', 'h-9', 'text-sm', 'flex-shrink-0',
51-
])
52-
const toolbarButtonClasses = computed(() => [
53-
'toolbar-button', 'hover:text-primary-500', 'px-2', 'v-popper--has-tooltip', 'w-10'
54-
])
55-
56-
const finalStyles = computed(() => ({...(customStyles.value || {})}))
57-
const finalClasses = computed(() => [...(asToolbarButton?.value === true ? toolbarButtonClasses.value : actionButtonClasses.value), ...(customClasses.value || [])])
58-
5935
const queryString = computed(() => ({
6036
action: selectedAction?.value?.uriKey,
6137
search: props?.queryString?.currentSearch,
@@ -67,7 +43,6 @@
6743
}));
6844
6945
const selectedAction = computed(() => props?.field?.action);
70-
7146
const selectedResources = computed(() => [props?.field?.resourceId]);
7247
7348
// Bindings

‎resources/js/components/DetailActionButtonsField.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<panel-item :field="field">
33
<template v-slot:value>
44
<div class="flex items-center ">
5-
<template v-for="(action, k) in actions" :key="k">
5+
<template v-for="action in actions" :key="action?.key">
66
<action-button v-bind="action"/>
77
</template>
88
</div>
@@ -28,7 +28,8 @@
2828
const collection = computed(() => props?.field?.collection || []);
2929
const actions = computed(() => (collection?.value || [])
3030
.filter((field) => field.action.showOnDetail)
31-
.map(field => ({
31+
.map((field, i) => ({
32+
key: new Date().getTime() + i,
3233
field: field,
3334
queryString: props?.queryString,
3435
resourceName: props?.resourceName,

‎resources/js/components/_components/button/ActionButton.vue

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<a href="#"
3+
v-bind="actionOptions"
4+
@click.stop.prevent="fireAction"
5+
@mouseenter="onMouseEnterTooltip"
6+
@mouseleave="onMouseLeaveTooltip"
7+
>
8+
9+
<!-- Text -->
10+
<span v-if="text" v-text="text"></span>
11+
12+
<!-- Icon -->
13+
<template v-if="hasIcon">
14+
<span v-if="htmlIcon" v-html="htmlIcon"></span>
15+
<Icon v-if="icon" :type="icon" />
16+
<img v-if="urlIcon" :alt="title" :src="urlIcon" class="w-6 h-6 inline" />
17+
</template>
18+
19+
<!-- Tooltip -->
20+
<div v-if="tooltipIsVisible && tooltip" class="absolute z-10 left-1/2 -top-1 transform -translate-x-1/2 -translate-y-full px-2 py-1 bg-gray-700 text-white text-xs rounded">
21+
{{ tooltip }}
22+
</div>
23+
24+
</a>
25+
</template>
26+
27+
<script setup>
28+
29+
// Composables
30+
import {computed} from 'vue'
31+
32+
// Props
33+
const props = defineProps({
34+
field: {type: Object, default: null},
35+
fireAction: {type: Function, default: null},
36+
});
37+
38+
// State
39+
const tooltipIsVisible = ref(false);
40+
41+
// Computed
42+
const title = computed(() => props?.field?.name || props?.field?.title || null);
43+
const text = computed(() => props?.field?.text || null);
44+
const tooltip = computed(() => props?.field?.tooltip || props?.field?.action?.name);
45+
46+
// Computed
47+
// Styles
48+
const customStyles = computed(() => props?.field?.styles || []);
49+
const customClasses = computed(() => props?.field?.classes || []);
50+
const asToolbarButton = computed(() => props?.field?.asToolbarButton === true);
51+
52+
// Computed
53+
// Icon
54+
const icon = computed(() => props?.field?.icon || null);
55+
const urlIcon = computed(() => props?.field?.urlIcon || null);
56+
const htmlIcon = computed(() => props?.field?.htmlIcon || null);
57+
58+
// Computed
59+
const hasIcon = computed(() => icon?.value !== null || htmlIcon?.value !== null || urlIcon?.value !== null);
60+
const hasTooltip = computed(() => props?.field?.hasTooltip === true);
61+
62+
63+
// Computed
64+
// Get action options
65+
const actionOptions = computed(() => {
66+
return {
67+
title: title?.value,
68+
class: [
69+
...(asToolbarButton?.value === true ? toolbarButtonClasses.value : actionButtonClasses.value),
70+
...(customClasses.value || [])
71+
],
72+
style: {
73+
...(asToolbarButton?.value === true ? null : actionButtonStyles?.value),
74+
...(customStyles.value || {}),
75+
}
76+
}
77+
})
78+
79+
// Computed
80+
// Get action button classes
81+
const actionButtonClasses = computed(() => [
82+
'flex-shrink-0', 'shadow', 'rounded', 'focus:outline-none', 'ring-primary-200', 'dark:ring-gray-600',
83+
'focus:ring', 'bg-primary-500', 'hover:bg-primary-400', 'active:bg-primary-600',
84+
'text-white', 'dark:text-gray-800', 'inline-flex', 'items-center', 'font-bold', 'px-2', 'mx-1', 'h-9', 'text-sm', 'flex-shrink-0',
85+
])
86+
87+
// Computed
88+
// Get toolbar button classes
89+
const toolbarButtonClasses = computed(() => [
90+
'toolbar-button', 'hover:text-primary-500', 'px-2', 'v-popper--has-tooltip', 'w-10'
91+
])
92+
93+
// Computed
94+
// Get action button styles
95+
const actionButtonStyles = computed(() => {
96+
return {
97+
margin: '0 2px',
98+
}
99+
})
100+
101+
// Methods
102+
// Fire mouse actions for tooltip
103+
const onMouseLeaveTooltip = () => tooltipIsVisible.value = false
104+
const onMouseEnterTooltip = () => tooltipIsVisible.value = hasTooltip.value;
105+
106+
</script>

‎src/ActionButton.php

+23
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,29 @@ public function icon(string $icon): self
6767
}
6868

6969

70+
/**
71+
* Icon url inside the button.
72+
*
73+
* @param string $iconUrl
74+
* @return $this
75+
*/
76+
public function iconUrl(string $iconUrl): self
77+
{
78+
return $this->withMeta(compact('iconUrl'));
79+
}
80+
81+
/**
82+
* Icon html inside the button.
83+
*
84+
* @param string $iconHtml
85+
* @return $this
86+
*/
87+
public function iconHtml(string $iconHtml): self
88+
{
89+
return $this->withMeta(compact('iconHtml'));
90+
}
91+
92+
7093
/**
7194
* Apply styles to button
7295
*

0 commit comments

Comments
 (0)