fix(ActionButtons): fixed align of action buttons collection, #6

Author: pavloniym

dist/js/field.js

@@ -33,22 +33,46 @@
     // Computed
     const text = computed(() => props?.field?.text || null);
     const icon = computed(() => props?.field?.icon || null);
-    const name = computed(() => props?.field?.name || null);
+    const name = computed(() => props?.field?.name || props?.field?.title || null);
     const customStyles = computed(() => props?.field?.styles || []);
     const customClasses = computed(() => props?.field?.classes || []);
     const asToolbarButton = computed(() => props?.field?.asToolbarButton === true);
 
     const actionButtonClasses = computed(() => [
         'flex-shrink-0', 'shadow', 'rounded', 'focus:outline-none', 'ring-primary-200', 'dark:ring-gray-600',
         'focus:ring', 'bg-primary-500', 'hover:bg-primary-400', 'active:bg-primary-600',
-        'text-white', 'dark:text-gray-800', 'inline-flex', 'items-center', 'font-bold', 'px-2', 'h-9', 'text-sm', 'flex-shrink-0',
+        'text-white', 'dark:text-gray-800', 'inline-flex', 'items-center', 'font-bold', 'px-2', 'mx-1', 'h-9', 'text-sm', 'flex-shrink-0',
     ])
     const toolbarButtonClasses = computed(() => [
         'toolbar-button', 'hover:text-primary-500', 'px-2', 'v-popper--has-tooltip', 'w-10'
     ])
 
-    const finalStyles = computed(() => ({...(customStyles.value || {})}))
-    const finalClasses = computed(() => [...(asToolbarButton?.value === true ? toolbarButtonClasses.value : actionButtonClasses.value), ...(customClasses.value || [])])
+    // Computed
+    // Get action button styles
+    const actionButtonStyles = computed(() => {
+        return {
+            margin: '0 2px',
+        }
+    })
+
+
+    // Computed
+    // Get final styles
+    const finalStyles = computed(() => {
+        return {
+            ...(asToolbarButton?.value === true ? null : actionButtonStyles?.value),
+            ...(customStyles.value || {}),
+        }
+    })
+
+    // Computed
+    // Get final classes
+    const finalClasses = computed(() => {
+        return [
+            ...(asToolbarButton?.value === true ? toolbarButtonClasses.value : actionButtonClasses.value),
+            ...(customClasses.value || [])
+        ]
+    })
 
     const queryString = computed(() => ({
         action: selectedAction?.value?.uriKey,

resources/js/components/ActionButtonField.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex items-center justify-center">
+    <div class="flex align-center" :class="alignClasses">
         <template v-for="(action, k) in actions" :key="k">
             <action-button v-bind="action"/>
         </template>
@@ -32,4 +32,14 @@
         })))
 
 
+    // Computed
+    // Align classes
+    const alignClasses = computed(() => {
+        return {
+            'justify-end': props?.field?.textAlign === 'right',
+            'justify-start': props?.field?.textAlign === 'left',
+            'justify-center': props?.field?.textAlign === 'center',
+        }
+    })
+
 </script>