Style update (#17)

Author: rawilk

.github/workflows/psalm.yml

@@ -30,4 +30,4 @@ jobs:
                 run: composer install -n --prefer-dist
 
             -   name: Run psalm
-                run: ./vendor/bin/psalm
+                run: ./vendor/bin/psalm --output-format=github

.github/workflows/run-tests.yml

@@ -20,7 +20,7 @@ jobs:
                 dependency-version: [prefer-lowest, prefer-stable]
                 include:
                     -   laravel: 8.*
-                        testbench: 6.*
+                        testbench: 6.15.*
 
         name: P${{ matrix.php }} - L${{ matrix.laravel }} - ${{ matrix.dependency-version }} - ${{ matrix.os }}
 

.php_cs.dist

@@ -10,6 +10,7 @@ $finder = Symfony\Component\Finder\Finder::create()
     ])
     ->name('*.php')
     ->notName('*.blade.php')
+    ->notName('Timezone.php') // disable it on this class for now to prevent linting errors
     ->ignoreDotFiles(true)
     ->ignoreVCS(true);
 

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to `laravel-form-components` will be documented in this file
 
+## 4.0.0 - 2021-03-25
+### Changed
+- Inline most tailwind class names on form components
+- Remove majority of styles from stylesheet
+- Change styling from sass to css/postcss
+- Enable border by default on `<x-form-group>` when it is inline and not the first child in a container
+- Enable margins on `<x-form-group>` by default
+- Change how `<x-custom-select>` "scrolls" to each option
+
+### Added
+- Add ability to specify grid columns on `<x-checkbox-group>` component (when inline)
+
+### Removed
+- Remove `$fixedPosition` prop from `<x-custom-select>`
+
+### Fixed
+- Fix array to string conversion error on textarea when no value is passed in to it
+- Prevent `$wire` from breaking `<x-custom-select>` when not used in a livewire component
+- `<x-custom-select>` will now position itself correctly and will not require the `fixed-position` prop anymore (requires Popper.js)
+
 ## 3.1.1 - 2021-03-01
 ### Fixed
 - Prevent inputs from rendering the string `[]` when name is omitted

composer.json

@@ -27,13 +27,14 @@
         "illuminate/view": "^8.0"
     },
     "require-dev": {
-        "blade-ui-kit/blade-heroicons": "^0.3",
-        "friendsofphp/php-cs-fixer": "^2.16",
-        "gajus/dindent": "^2.0",
-        "orchestra/testbench": "^6.4",
-        "phpunit/phpunit": "^9.4",
+        "blade-ui-kit/blade-heroicons": "^1.0",
+        "friendsofphp/php-cs-fixer": "^2.18",
+        "gajus/dindent": "^2.0.2",
+        "orchestra/testbench": "^6.15",
+        "phpunit/phpunit": "^9.5.4",
         "psalm/plugin-laravel": "^1.4",
-        "vimeo/psalm": "^4.0"
+        "spatie/phpunit-snapshot-assertions": "^4.2",
+        "vimeo/psalm": "^4.6"
     },
     "suggest": {
         "blade-ui-kit/blade-heroicons": "Required for the default icons used in this package",

config/form-components.php

@@ -212,6 +212,8 @@
             'https://unpkg.com/filepond/dist/filepond.css',
             'https://unpkg.com/filepond/dist/filepond.js',
         ],
+
+        'popper' => 'https://unpkg.com/@popperjs/core@2',
     ],
 
     /*

dist/form-components.js

@@ -1 +1 @@
-{"/form-components.js":"/form-components.js?id=c4316ae6fc0652830acf"}
+{"/form-components.js":"/form-components.js?id=599115a2fc037f2325f8"}

dist/form-components.js.map

@@ -11,6 +11,8 @@ import findLastIndex from '../util/findLastIndex';
 import { normalizeOptions } from '../util/options';
 import { isArray } from '../util/inspect';
 
+let createPopper;
+
 export default function customSelect(config) {
     return {
         focusedOptionIndex: null,
@@ -31,8 +33,7 @@ export default function customSelect(config) {
         disabledField: 'disabled',
         labelField: 'label', // used for an "optgroup"'s label
         optionsField: 'options', // used when creating "optgroups"
-        fixedPosition: false,
-        positionOnTop: false,
+        popper: null,
         ...config,
 
         get buttonDisplay() {
@@ -63,6 +64,11 @@ export default function customSelect(config) {
             this.open = false;
             this.focusedOptionIndex = null;
             this.search = '';
+
+            if (this.popper) {
+                this.popper.destroy();
+                this.popper = null;
+            }
         },
 
         clear() {
@@ -149,6 +155,12 @@ export default function customSelect(config) {
         },
 
         init($wire = null, $dispatch = null) {
+            createPopper = window.Popper ? window.Popper.createPopper : window.createPopper;
+
+            if (typeof createPopper !== 'function') {
+                throw new TypeError(`<x-custom-select> requires Popper (https://popper.js.org)`);
+            }
+
             this.data = [...normalizeOptions(this.data, this.fieldNames)];
             this.options = this.data;
 
@@ -253,6 +265,30 @@ export default function customSelect(config) {
                 this.focusedOptionIndex = this.options.findIndex(o => ! o.disabled && ! this.isOptgroup(o));
             }
 
+            this.popper = createPopper(this.$refs.button, this.$refs.container, {
+                placement: 'bottom-start',
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 4],
+                        },
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            boundary: 'clippingParents',
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        options: {
+                            padding: 30,
+                        },
+                    },
+                ],
+            });
+
             this.open = true;
 
             this.$nextTick(() => {
@@ -262,8 +298,6 @@ export default function customSelect(config) {
                     });
                 }
 
-                this.positionMenu();
-
                 this.scrollToOption(this.focusedOptionIndex);
             });
         },
@@ -353,9 +387,11 @@ export default function customSelect(config) {
             }
 
             try {
-                this.$refs.listbox.children[index].scrollIntoView({
-                    block: 'center',
-                });
+                const child = this.$refs.listbox.children[index];
+                const offsetTop = child.offsetTop;
+                this.$refs.listbox.scrollTop = offsetTop || 0;
+
+                this.$refs.listbox.children[index].focus();
             } catch (e) {}
         },
 
@@ -366,53 +402,5 @@ export default function customSelect(config) {
 
             this.openMenu();
         },
-
-        positionMenu() {
-            if (this.fixedPosition) {
-                return this.positionFixedMenu();
-            }
-
-            this.$refs.container.style.marginTop = null;
-            this.positionOnTop = false;
-
-            // give a little bit of breathing room at the bottom of the screen.
-            const tolerance = 10;
-            const menuHeight = this.$refs.listbox.offsetHeight;
-            const largestHeight = window.innerHeight - menuHeight - tolerance;
-
-            const { top } = this.$refs.listbox.getBoundingClientRect();
-
-            if (top > largestHeight) {
-                this.positionOnTop = true;
-                this.$refs.container.style.marginTop = `-${this.$refs.button.offsetHeight + menuHeight + 20}px`
-            }
-        },
-
-        positionFixedMenu() {
-            // So we can accurately determine where it should be placed...
-            this.$refs.container.style.position = 'absolute';
-            this.$refs.container.style.top = null;
-
-            const { width, left: buttonLeft, top: buttonTop } = this.$refs.button.getBoundingClientRect();
-
-            // give a little breathing room at the bottom of the screen.
-            const tolerance = 40;
-            const menuHeight = this.$refs.listbox.offsetHeight;
-            const largestHeight = window.innerHeight - menuHeight - tolerance;
-
-            const { top } = this.$refs.container.getBoundingClientRect();
-
-            if (top > largestHeight) {
-                const buttonHeight = this.$refs.button.offsetHeight;
-                const menuTop = buttonTop - menuHeight - 25 - buttonHeight;
-                this.$refs.container.style.top = `${menuTop}px`;
-            } else {
-                this.$refs.container.style.top = `${top}px`;
-            }
-
-            this.$refs.container.style.position = 'fixed';
-            this.$refs.container.style.width = `${width}px`;
-            this.$refs.container.style.left = `${buttonLeft}px`;
-        },
     };
 };