@mekari/pixel-autocomplete - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/mekari-pixel-autocomplete.cjs.dev.js

@@ -11,2 +11,3 @@ 'use strict';
 var pixelSpinner = require('@mekari/pixel-spinner');
+var pixelButton = require('@mekari/pixel-button');
 var pixelUtils = require('@mekari/pixel-utils');
@@ -50,2 +51,5 @@
  * @prop {boolean} isManualFilter - If true, autocomplete filter data will handle manually. Useful when data is being filtered server side.
+ * @prop {boolean} usePortal - If true, autocomplete popover content is rendered with portal.
+ * @prop {boolean} isShowButtonAction - If true, autocomplete will show button action.
+ * @prop {boolean} buttonActionText - Text in autocomplete button action.
  */
@@ -110,3 +114,15 @@ const useAutocompleteProps = {
   isInfinityScroll: [Boolean],
-  isManualFilter: [Boolean]
+  isManualFilter: [Boolean],
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isShowButtonAction: {
+    type: Boolean,
+    default: false
+  },
+  buttonActionText: {
+    type: String,
+    default: 'Button'
+  }
 };
@@ -242,6 +258,7 @@
 
-    handleClear() {
+    handleClear(e) {
       this.isFocused = false;
       this.currentLabel = '';
       this.handleSelect('');
+      this.$emit('clear', e);
     },
@@ -314,2 +331,7 @@
       this.observer = null;
+    },
+
+    handleButtonAction(e) {
+      this.$emit('button-action', e);
+      this.handleClosePopover();
     }
@@ -345,3 +367,4 @@
         isManual: true,
-        initialFocusRef: `#${this.getId}`
+        initialFocusRef: `#${this.getId}`,
+        usePortal: this.usePortal
       }
@@ -411,2 +434,3 @@ }, [h(pixelPopover.MpPopoverTrigger, {}, [h(pixelBox.MpBox, {}, [h(pixelInput.MpInputGroup, {
         boxShadow: 'lg',
+        position: 'relative',
         ...this.contentStyle
@@ -469,5 +493,36 @@ }
       attrs: {
-        id: `scroll-end-${this.id}`
+        position: 'relative'
       }
-    }, '')])])]);
+    }, [h(pixelBox.MpBox, {
+      attrs: {
+        id: `scroll-end-${this.id}`,
+        position: 'absolute',
+        bottom: '0',
+        h: '2',
+        w: 'full'
+      }
+    })]), this.isShowButtonAction && h(pixelButton.MpButton, {
+      props: {
+        variant: 'unstyled'
+      },
+      attrs: {
+        width: 'full',
+        textAlign: 'center',
+        roundedTop: '0',
+        borderTop: '1px',
+        borderColor: 'blue.50',
+        color: 'blue.400',
+        position: 'sticky',
+        bottom: '0px',
+        bg: 'white',
+        fontSize: 'md',
+        zIndex: '999',
+        _hover: {
+          color: 'blue.500'
+        }
+      },
+      on: {
+        click: this.handleButtonAction
+      }
+    }, this.buttonActionText)])])]);
   }
@@ -474,0 +529,0 @@

dist/mekari-pixel-autocomplete.cjs.prod.js

@@ -11,2 +11,3 @@ 'use strict';
 var pixelSpinner = require('@mekari/pixel-spinner');
+var pixelButton = require('@mekari/pixel-button');
 var pixelUtils = require('@mekari/pixel-utils');
@@ -50,2 +51,5 @@
  * @prop {boolean} isManualFilter - If true, autocomplete filter data will handle manually. Useful when data is being filtered server side.
+ * @prop {boolean} usePortal - If true, autocomplete popover content is rendered with portal.
+ * @prop {boolean} isShowButtonAction - If true, autocomplete will show button action.
+ * @prop {boolean} buttonActionText - Text in autocomplete button action.
  */
@@ -110,3 +114,15 @@ const useAutocompleteProps = {
   isInfinityScroll: [Boolean],
-  isManualFilter: [Boolean]
+  isManualFilter: [Boolean],
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isShowButtonAction: {
+    type: Boolean,
+    default: false
+  },
+  buttonActionText: {
+    type: String,
+    default: 'Button'
+  }
 };
@@ -242,6 +258,7 @@
 
-    handleClear() {
+    handleClear(e) {
       this.isFocused = false;
       this.currentLabel = '';
       this.handleSelect('');
+      this.$emit('clear', e);
     },
@@ -314,2 +331,7 @@
       this.observer = null;
+    },
+
+    handleButtonAction(e) {
+      this.$emit('button-action', e);
+      this.handleClosePopover();
     }
@@ -345,3 +367,4 @@
         isManual: true,
-        initialFocusRef: `#${this.getId}`
+        initialFocusRef: `#${this.getId}`,
+        usePortal: this.usePortal
       }
@@ -411,2 +434,3 @@ }, [h(pixelPopover.MpPopoverTrigger, {}, [h(pixelBox.MpBox, {}, [h(pixelInput.MpInputGroup, {
         boxShadow: 'lg',
+        position: 'relative',
         ...this.contentStyle
@@ -469,5 +493,36 @@ }
       attrs: {
-        id: `scroll-end-${this.id}`
+        position: 'relative'
       }
-    }, '')])])]);
+    }, [h(pixelBox.MpBox, {
+      attrs: {
+        id: `scroll-end-${this.id}`,
+        position: 'absolute',
+        bottom: '0',
+        h: '2',
+        w: 'full'
+      }
+    })]), this.isShowButtonAction && h(pixelButton.MpButton, {
+      props: {
+        variant: 'unstyled'
+      },
+      attrs: {
+        width: 'full',
+        textAlign: 'center',
+        roundedTop: '0',
+        borderTop: '1px',
+        borderColor: 'blue.50',
+        color: 'blue.400',
+        position: 'sticky',
+        bottom: '0px',
+        bg: 'white',
+        fontSize: 'md',
+        zIndex: '999',
+        _hover: {
+          color: 'blue.500'
+        }
+      },
+      on: {
+        click: this.handleButtonAction
+      }
+    }, this.buttonActionText)])])]);
   }
@@ -474,0 +529,0 @@

dist/mekari-pixel-autocomplete.esm.js

@@ -7,2 +7,3 @@ import { MpInputGroup, MpInput, MpInputRightAddon } from '@mekari/pixel-input';
 import { MpSpinner } from '@mekari/pixel-spinner';
+import { MpButton } from '@mekari/pixel-button';
 import { createStyledAttrsMixin, isUndef, isNonNullObject, useId, getElementById } from '@mekari/pixel-utils';
@@ -46,2 +47,5 @@
  * @prop {boolean} isManualFilter - If true, autocomplete filter data will handle manually. Useful when data is being filtered server side.
+ * @prop {boolean} usePortal - If true, autocomplete popover content is rendered with portal.
+ * @prop {boolean} isShowButtonAction - If true, autocomplete will show button action.
+ * @prop {boolean} buttonActionText - Text in autocomplete button action.
  */
@@ -106,3 +110,15 @@ const useAutocompleteProps = {
   isInfinityScroll: [Boolean],
-  isManualFilter: [Boolean]
+  isManualFilter: [Boolean],
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isShowButtonAction: {
+    type: Boolean,
+    default: false
+  },
+  buttonActionText: {
+    type: String,
+    default: 'Button'
+  }
 };
@@ -238,6 +254,7 @@
 
-    handleClear() {
+    handleClear(e) {
       this.isFocused = false;
       this.currentLabel = '';
       this.handleSelect('');
+      this.$emit('clear', e);
     },
@@ -310,2 +327,7 @@
       this.observer = null;
+    },
+
+    handleButtonAction(e) {
+      this.$emit('button-action', e);
+      this.handleClosePopover();
     }
@@ -341,3 +363,4 @@
         isManual: true,
-        initialFocusRef: `#${this.getId}`
+        initialFocusRef: `#${this.getId}`,
+        usePortal: this.usePortal
       }
@@ -407,2 +430,3 @@ }, [h(MpPopoverTrigger, {}, [h(MpBox, {}, [h(MpInputGroup, {
         boxShadow: 'lg',
+        position: 'relative',
         ...this.contentStyle
@@ -465,5 +489,36 @@ }
       attrs: {
-        id: `scroll-end-${this.id}`
+        position: 'relative'
       }
-    }, '')])])]);
+    }, [h(MpBox, {
+      attrs: {
+        id: `scroll-end-${this.id}`,
+        position: 'absolute',
+        bottom: '0',
+        h: '2',
+        w: 'full'
+      }
+    })]), this.isShowButtonAction && h(MpButton, {
+      props: {
+        variant: 'unstyled'
+      },
+      attrs: {
+        width: 'full',
+        textAlign: 'center',
+        roundedTop: '0',
+        borderTop: '1px',
+        borderColor: 'blue.50',
+        color: 'blue.400',
+        position: 'sticky',
+        bottom: '0px',
+        bg: 'white',
+        fontSize: 'md',
+        zIndex: '999',
+        _hover: {
+          color: 'blue.500'
+        }
+      },
+      on: {
+        click: this.handleButtonAction
+      }
+    }, this.buttonActionText)])])]);
   }
@@ -470,0 +525,0 @@

package.json

 {
   "name": "@mekari/pixel-autocomplete",
   "description": "Mekari Pixel | Selecting items in a list from a text input component",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "homepage": "https://mekari.design/",
@@ -34,3 +34,4 @@ "repository": {
     "@mekari/pixel-text": "^0.1.0",
-    "@mekari/pixel-utils": "^0.2.0"
+    "@mekari/pixel-utils": "^0.2.0",
+    "@mekari/pixel-button": "^0.1.9"
   },
@@ -37,0 +38,0 @@ "devDependencies": {

src/autocomplete.js

@@ -13,2 +13,3 @@ import { MpInput, MpInputGroup, MpInputRightAddon } from '@mekari/pixel-input'
 import { MpSpinner } from '@mekari/pixel-spinner'
+import { MpButton } from '@mekari/pixel-button'
 import {
@@ -146,6 +147,7 @@ createStyledAttrsMixin,
     },
-    handleClear() {
+    handleClear(e) {
       this.isFocused = false
       this.currentLabel = ''
       this.handleSelect('')
+      this.$emit('clear', e)
     },
@@ -210,2 +212,6 @@ handleBlur(e) {
       this.observer = null
+    },
+    handleButtonAction(e) {
+      this.$emit('button-action', e)
+      this.handleClosePopover()
     }
@@ -246,3 +252,4 @@ },
               isManual: true,
-              initialFocusRef: `#${this.getId}`
+              initialFocusRef: `#${this.getId}`,
+              usePortal: this.usePortal
             }
@@ -335,2 +342,3 @@ },
                   boxShadow: 'lg',
+                  position: 'relative',
                   ...this.contentStyle
@@ -340,11 +348,62 @@ }
               [
-                h(
-                  MpPopoverList, {},
-                  [
-                    this.getSuggestions.length === 0
-                      ? h(
+                h(MpPopoverList, {}, [
+                  this.getSuggestions.length === 0
+                    ? h(
+                        MpText,
+                        {
+                          attrs: {
+                            color: 'gray.400',
+                            fontSize: 'md',
+                            fontWeight: 'regular',
+                            lineHeight: 'md',
+                            width: 'full',
+                            display: 'flex',
+                            justifyContent: 'flex-start',
+                            paddingX: '3'
+                          }
+                        },
+                        this.emptyText
+                      )
+                    : this.getSuggestions.map((item, index) => {
+                        return h(
+                          MpPopoverListItem,
+                          {
+                            props: {
+                              isActive: (item.value ? item.value : item) === this.currentValue
+                            },
+                            attrs: {
+                              backgroundColor: this.handleBackgroundSuggestion(item, index)
+                            },
+                            on: {
+                              click: (e) => {
+                                this.handleSelect(item.value || item, item, e)
+                              }
+                            }
+                          },
+                          this.$scopedSlots.default
+                            ? this.$scopedSlots.default({ item })
+                            : item[this.labelProp] || item
+                        )
+                      }),
+                  this.isContentLoading &&
+                    h(
+                      MpPopoverListItem,
+                      {
+                        attrs: {
+                          _hover: {
+                            backgroundColor: 'transparent',
+                            cursor: 'default'
+                          }
+                        }
+                      },
+                      [
+                        h(MpSpinner, {
+                          props: { size: 'sm' },
+                          attrs: { paddingLeft: '3' }
+                        }),
+                        h(
                           MpText,
                           {
                             attrs: {
-                              color: 'gray.400',
+                              color: 'dark',
                               fontSize: 'md',
@@ -356,66 +415,48 @@ fontWeight: 'regular',
                               justifyContent: 'flex-start',
-                              paddingX: '3'
+                              marginLeft: '3',
+                              paddingRight: '3'
                             }
                           },
-                          this.emptyText
+                          'Loading...'
                         )
-                      : this.getSuggestions.map((item, index) => {
-                          return h(
-                            MpPopoverListItem,
-                            {
-                              props: {
-                                isActive: (item.value ? item.value : item) === this.currentValue
-                              },
-                              attrs: {
-                                backgroundColor: this.handleBackgroundSuggestion(item, index)
-                              },
-                              on: {
-                                click: (e) => {
-                                  this.handleSelect(item.value || item, item, e)
-                                }
-                              }
-                            },
-                            this.$scopedSlots.default
-                              ? this.$scopedSlots.default({ item })
-                              : item[this.labelProp] || item
-                          )
-                        }),
-                    this.isContentLoading &&
-                      h(
-                        MpPopoverListItem,
-                        {
-                          attrs: {
-                            _hover: {
-                              backgroundColor: 'transparent',
-                              cursor: 'default'
-                            }
-                          }
-                        },
-                        [
-                          h(MpSpinner, {
-                            props: { size: 'sm' },
-                            attrs: { paddingLeft: '3' }
-                          }),
-                          h(
-                            MpText,
-                            {
-                              attrs: {
-                                color: 'dark',
-                                fontSize: 'md',
-                                fontWeight: 'regular',
-                                lineHeight: 'md',
-                                width: 'full',
-                                display: 'flex',
-                                justifyContent: 'flex-start',
-                                marginLeft: '3',
-                                paddingRight: '3'
-                              }
-                            },
-                            'Loading...'
-                          )
-                        ]
-                      )
-                  ]
-                ),
-                this.isInfinityScroll && h(MpBox, { attrs: { id: `scroll-end-${this.id}` } }, '')
+                      ]
+                    )
+                ]),
+                this.isInfinityScroll &&
+                  h(MpBox, { attrs: { position: 'relative' } }, [
+                    h(MpBox, {
+                      attrs: {
+                        id: `scroll-end-${this.id}`,
+                        position: 'absolute',
+                        bottom: '0',
+                        h: '2',
+                        w: 'full'
+                      }
+                    })
+                  ]),
+                this.isShowButtonAction &&
+                  h(
+                    MpButton,
+                    {
+                      props: { variant: 'unstyled' },
+                      attrs: {
+                        width: 'full',
+                        textAlign: 'center',
+                        roundedTop: '0',
+                        borderTop: '1px',
+                        borderColor: 'blue.50',
+                        color: 'blue.400',
+                        position: 'sticky',
+                        bottom: '0px',
+                        bg: 'white',
+                        fontSize: 'md',
+                        zIndex: '999',
+                        _hover: { color: 'blue.500' }
+                      },
+                      on: {
+                        click: this.handleButtonAction
+                      }
+                    },
+                    this.buttonActionText
+                  )
               ]
@@ -422,0 +463,0 @@ )

src/utils/autocomplete.props.js

@@ -24,2 +24,5 @@ /**
  * @prop {boolean} isManualFilter - If true, autocomplete filter data will handle manually. Useful when data is being filtered server side.
+ * @prop {boolean} usePortal - If true, autocomplete popover content is rendered with portal.
+ * @prop {boolean} isShowButtonAction - If true, autocomplete will show button action.
+ * @prop {boolean} buttonActionText - Text in autocomplete button action.
  */
@@ -49,3 +52,6 @@
   isInfinityScroll: [Boolean],
-  isManualFilter: [Boolean]
+  isManualFilter: [Boolean],
+  usePortal: { type: Boolean, default: false },
+  isShowButtonAction: { type: Boolean, default: false },
+  buttonActionText: { type: String, default: 'Button' }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62926

increased by10.59%

Lines of code

1966

increased by11.9%

Worsened metrics

Dependency count

11

increased by10%

Dependency changes

• + Added@mekari/pixel-button@^0.1.9