Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: scroll to top when searching #341

Merged
merged 1 commit into from
Feb 7, 2023
+130 −100
Merged

feature: scroll to top when searching #341

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
### 1.4.4

- scroll mew select to top when searching [#341](https://github.com/MyEtherWallet/mew-components/pull/341)

### 1.4.3-hotfix.2

- fix menu popup overflow [#340](https://github.com/MyEtherWallet/mew-components/pull/340)
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@myetherwallet/mew-components",
"version": "1.4.3-hotfix.2",
"version": "1.4.4",
"description": "MEW Components",
"main": "dist/mew-components.umd.js",
"module": "dist/mew-components.esm.js",
22 changes: 11 additions & 11 deletions src/components/MewMenuPopup/MewMenuPopup.vue
View file
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@
:src="btnIcon"
alt="Icon"
:class="btnTitle ? 'mr-2' : ''"
/>
>
<span :style="btnTitleStyle">{{ btnTitle }}</span>
</v-btn>

@@ -77,27 +77,27 @@ export default {
},
color: {
type: String,
default: "white",
default: 'white',
},
btnTitle: {
type: String,
default: "",
default: '',
},
btnSize: {
type: String,
default: "large",
default: 'large',
},
btnFontSize: {
type: String,
default: "14px",
default: '14px',
},
btnIcon: {
type: String,
default: "",
default: '',
},
btnIconSize: {
type: String,
default: "30px",
default: '30px',
},
left: {
type: Boolean,
@@ -158,12 +158,12 @@ export default {
toggleMenu() {
this.show = !this.show;
if (this.show) {
window.addEventListener("click", this.detactOutsideClick);
window.addEventListener('click', this.detactOutsideClick);
} else {
window.removeEventListener("click", this.detactOutsideClick);
window.removeEventListener('click', this.detactOutsideClick);
}
this.$emit("input", this.show);
this.$emit('input', this.show);
},
// =============================================================================
// Whenever outside of menu content window is clicked, close the menu
@@ -181,7 +181,7 @@ export default {
)
) {
this.show = false;
window.removeEventListener("click", this.detactOutsideClick);
window.removeEventListener('click', this.detactOutsideClick);
}
},
},
70 changes: 46 additions & 24 deletions src/components/MewOverlay/MewOverlay.vue
View file
Original file line number Diff line number Diff line change
@@ -18,7 +18,12 @@
class="mobile-title-block pa-3 d-flex align-center justify-space-between full-width"
>
<div style="min-width: 36px">
<v-btn v-if="back" icon color="textBlack2" @click="back">
<v-btn
v-if="back"
icon
color="textBlack2"
@click="back"
>
<v-icon size="24">
mdi-arrow-left
</v-icon>
@@ -31,8 +36,16 @@
{{ title }}
</h3>
<div style="min-width: 36px">
<v-btn v-if="close" icon color="textBlack2" @click="close">
<v-icon size="24" color="textBlack2">
<v-btn
v-if="close"
icon
color="textBlack2"
@click="close"
>
<v-icon
size="24"
color="textBlack2"
>
mdi-close
</v-icon>
</v-btn>
@@ -78,11 +91,17 @@
]"
@click="close"
>
<v-icon size="24" color="textBlack2">
<v-icon
size="24"
color="textBlack2"
>
mdi-close
</v-icon>
</v-btn>
<v-container :class="['ma-0 pa-0', isMobile ? 'full-height' : '']" fluid>
<v-container
:class="['ma-0 pa-0', isMobile ? 'full-height' : '']"
fluid
>
<!-- ===================================================================================== -->
<!-- White sheet (displays on the overlay - size is based on the contentSize prop) -->
<!-- ===================================================================================== -->
@@ -106,8 +125,8 @@
isMobile
? 'mew-heading-2 ml-3'
: isMobile && !back
? 'mew-heading-2 ml-4'
: 'mew-subtitle',
? 'mew-heading-2 ml-4'
: 'mew-subtitle',
]"
>
{{ title }}
@@ -131,7 +150,10 @@
<!-- ===================================================================================== -->
<!-- Footer -->
<!-- ===================================================================================== -->
<v-row justify="center" class="ma-0 py-8 textMedium--text">
<v-row
justify="center"
class="ma-0 py-8 textMedium--text"
>
{{ footer.text }}
<a
v-if="footer && footer.linkTitle && footer.link"
@@ -150,14 +172,14 @@

<script>
const sizes = {
small: "small",
medium: "medium",
large: "large",
xlarge: "xlarge",
small: 'small',
medium: 'medium',
large: 'large',
xlarge: 'xlarge',
};
export default {
name: "MewOverlay",
name: 'MewOverlay',
props: {
/**
* Displays on the outside bottom of the white sheet.
@@ -184,7 +206,7 @@ export default {
*/
title: {
type: String,
default: "",
default: '',
},
/**
* Function that gets triggered
@@ -212,7 +234,7 @@ export default {
*/
contentSize: {
type: String,
default: "small",
default: 'small',
},
},
data() {
@@ -228,18 +250,18 @@ export default {
if (this.contentSize) {
switch (this.contentSize.toLowerCase()) {
case sizes.small:
return "384px";
return '384px';
case sizes.medium:
return "504px";
return '504px';
case sizes.large:
return "624px";
return '624px';
case sizes.xlarge:
return "744px";
return '744px';
default:
return "384px";
return '384px';
}
}
return "384px";
return '384px';
},
},
watch: {
@@ -261,12 +283,12 @@ export default {
methods: {
// Remove html element's side bar to fix double sidebar bug
removeHtmlScrollbar() {
const htmlElement = document.querySelector("html");
htmlElement.style.overflow = "hidden";
const htmlElement = document.querySelector('html');
htmlElement.style.overflow = 'hidden';
},
// Restore html element's side bar on exit
restoreHtmlScrollbar() {
const htmlElement = document.querySelector("html");
const htmlElement = document.querySelector('html');
htmlElement.style.overflow = null;
},
},
50 changes: 27 additions & 23 deletions src/components/MewSelect/MewSelect.vue
View file
Original file line number Diff line number Diff line change
@@ -195,7 +195,7 @@
class="mew-caption font-weight-regular textSecondary--text"
>{{
data.item.tokenBalance
? data.item.tokenBalance + ' ' + data.item.symbol
? data.item.tokenBalance + " " + data.item.symbol
: data.item.subtext
}}</span></span>
</div>
@@ -218,36 +218,36 @@ import get from 'lodash/get';
export default {
name: 'MewSelect',
components: {
MewTokenContainer
MewTokenContainer,
},
props: {
/**
* Adds a "Buy more" string to the end of the first index of the errorMessages prop.
*/
buyMoreStr: {
type: String,
default: ''
default: '',
},
/**
* Error messages to display
*/
errorMessages: {
type: [String, Array],
default: ''
default: '',
},
/**
* Adds filter to select items
*/
hasFilter: {
type: Boolean,
default: true // change to false
default: true, // change to false
},
/**
* Filter placeholder
*/
filterPlaceholder: {
type: String,
default: 'Search token name'
default: 'Search token name',
},
/**
* MEW select value
@@ -256,14 +256,14 @@ export default {
type: Object,
default: () => {
return {};
}
},
},
/**
* Disables the select dropdown.
*/
disabled: {
type: Boolean,
default: false
default: false,
},
/**
* Can be an array of objects or array of strings. When using objects, will look for a text and value field.
@@ -276,60 +276,64 @@ export default {
type: Array,
default: () => {
return [];
}
},
},
/**
* Sets the select label
*/
label: {
type: String,
default: ''
default: '',
},
/**
* Applies Custom Select styles
*/
isCustom: {
type: Boolean,
default: false
default: false,
},
/**
* Loading state
*/
loading: {
type: Boolean,
default: false
default: false,
},
/**
* Normal dropdown with no icon
*/
normalDropdown: {
type: Boolean,
default: false
default: false,
},
/**
* Remove Capitalize style from all forms
*/
noCapitalize: {
type: Boolean,
default: false
}
default: false,
},
},
data() {
return {
selectModel: null,
selectItems: [],
search: ''
search: '',
};
},
computed: {
defaultItem() {
return this.items.find(obj => {
return this.items.find((obj) => {
return obj.selectLabel || obj.name;
});
}
},
},
watch: {
search(newVal) {
const dropdown = document.querySelector('.v-menu__content');
if (dropdown) {
dropdown.scroll(0, 0);
}
if (newVal === '' || newVal === null) {
this.selectItems = this.items;
} else {
@@ -376,15 +380,15 @@ export default {
}
},
items: {
handler: function (newVal) {
handler: function(newVal) {
this.selectItems = newVal;
this.selectModel =
this.value && Object.keys(this.value).length !== 0
? this.value
: this.defaultItem;
},
deep: true
}
deep: true,
},
},
mounted() {
this.selectItems = this.items;
@@ -416,8 +420,8 @@ export default {
this.$refs.filterTextField.$refs.input.focus();
}
}, 100);
}
}
},
},
};
</script>

80 changes: 40 additions & 40 deletions src/wrapper.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
import MewButton from "./components/MewButton/MewButton.vue";
import MewSuperButton from "./components/MewSuperButton/MewSuperButton.vue";
import MewAddressSelect from "./components/MewAddressSelect/MewAddressSelect.vue";
import MewBlockie from "./components/MewBlockie/MewBlockie.vue";
import MewInfoCard from "./components/MewInfoCard/MewInfoCard.vue";
import MewTooltip from "./components/MewTooltip/MewTooltip.vue";
import MewBanner from "./components/MewBanner/MewBanner.vue";
import MewCarousel from "./components/MewCarousel/MewCarousel.vue";
import MewCheckbox from "./components/MewCheckbox/MewCheckbox.vue";
import MewExpandPanel from "./components/MewExpandPanel/MewExpandPanel.vue";
import MewInput from "./components/MewInput/MewInput.vue";
import MewIconButton from "./components/MewIconButton/MewIconButton.vue";
import MewMenu from "./components/MewMenu/MewMenu.vue";
import MewMenuPopup from "./components/MewMenuPopup/MewMenuPopup.vue";
import MewModule from "./components/MewModule/MewModule.vue";
import MewOverlay from "./components/MewOverlay/MewOverlay.vue";
import MewPopup from "./components/MewPopup/MewPopup.vue";
import MewProgressBar from "./components/MewProgressBar/MewProgressBar.vue";
import MewSelect from "./components/MewSelect/MewSelect.vue";
import MewStepper from "./components/MewStepper/MewStepper.vue";
import MewSwitch from "./components/MewSwitch/MewSwitch.vue";
import MewTabs from "./components/MewTabs/MewTabs.vue";
import MewTable from "./components/MewTable/MewTable.vue";
import MewToggle from "./components/MewToggle/MewToggle.vue";
import MewToast from "./components/MewToast/MewToast.vue";
import MewTokenContainer from "./components/MewTokenContainer/MewTokenContainer.vue";
import MewBadge from "./components/MewBadge/MewBadge.vue";
import MewNotification from "./components/MewNotification/MewNotification.vue";
import MewWarningSheet from "./components/MewWarningSheet/MewWarningSheet.vue";
import MewIcon from "./components/MewIcon/MewIcon.vue";
import MewChart from "./components/MewChart/MewChart.vue";
import MewTransformHash from "./components/MewTransformHash/MewTransformHash.vue";
import MewCopy from "./components/MewCopy/MewCopy.vue";
import MewSheet from "./components/MewSheet/MewSheet.vue";
import MewTextArea from "./components/MewTextArea/MewTextArea.vue";
import MewSearch from "./components/MewSearch/MewSearch.vue";
import MewDropdown from "./components/MewDropdown/MewDropdown.vue";
import MewAlert from "./components/MewAlert/MewAlert.vue";
import MewButton from './components/MewButton/MewButton.vue';
import MewSuperButton from './components/MewSuperButton/MewSuperButton.vue';
import MewAddressSelect from './components/MewAddressSelect/MewAddressSelect.vue';
import MewBlockie from './components/MewBlockie/MewBlockie.vue';
import MewInfoCard from './components/MewInfoCard/MewInfoCard.vue';
import MewTooltip from './components/MewTooltip/MewTooltip.vue';
import MewBanner from './components/MewBanner/MewBanner.vue';
import MewCarousel from './components/MewCarousel/MewCarousel.vue';
import MewCheckbox from './components/MewCheckbox/MewCheckbox.vue';
import MewExpandPanel from './components/MewExpandPanel/MewExpandPanel.vue';
import MewInput from './components/MewInput/MewInput.vue';
import MewIconButton from './components/MewIconButton/MewIconButton.vue';
import MewMenu from './components/MewMenu/MewMenu.vue';
import MewMenuPopup from './components/MewMenuPopup/MewMenuPopup.vue';
import MewModule from './components/MewModule/MewModule.vue';
import MewOverlay from './components/MewOverlay/MewOverlay.vue';
import MewPopup from './components/MewPopup/MewPopup.vue';
import MewProgressBar from './components/MewProgressBar/MewProgressBar.vue';
import MewSelect from './components/MewSelect/MewSelect.vue';
import MewStepper from './components/MewStepper/MewStepper.vue';
import MewSwitch from './components/MewSwitch/MewSwitch.vue';
import MewTabs from './components/MewTabs/MewTabs.vue';
import MewTable from './components/MewTable/MewTable.vue';
import MewToggle from './components/MewToggle/MewToggle.vue';
import MewToast from './components/MewToast/MewToast.vue';
import MewTokenContainer from './components/MewTokenContainer/MewTokenContainer.vue';
import MewBadge from './components/MewBadge/MewBadge.vue';
import MewNotification from './components/MewNotification/MewNotification.vue';
import MewWarningSheet from './components/MewWarningSheet/MewWarningSheet.vue';
import MewIcon from './components/MewIcon/MewIcon.vue';
import MewChart from './components/MewChart/MewChart.vue';
import MewTransformHash from './components/MewTransformHash/MewTransformHash.vue';
import MewCopy from './components/MewCopy/MewCopy.vue';
import MewSheet from './components/MewSheet/MewSheet.vue';
import MewTextArea from './components/MewTextArea/MewTextArea.vue';
import MewSearch from './components/MewSearch/MewSearch.vue';
import MewDropdown from './components/MewDropdown/MewDropdown.vue';
import MewAlert from './components/MewAlert/MewAlert.vue';

// import Vue from 'vue';
// import wrap from '@vue/web-component-wrapper';
@@ -99,9 +99,9 @@ const plugin = {
// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;

if (typeof window !== "undefined") {
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
} else if (typeof global !== 'undefined') {
// eslint-disable-next-line no-undef
GlobalVue = global.Vue;
}