Green Energy Solutions

Seamless parking & Smart EV Charging Experience

The EV market has experienced rapid growth in recent years. As of October 2025, the total number of registered EVs in Hong Kong has surpassed 139,000, while public charging points exceed 15,500. Additjonally, the number of charging bays in private residential estates and commercial car parks is approaching 100,000, with the charging network continuing to expand swiftly. We pioneered EV charging solutions 2014, specializing in one-stop, comprehensive services for residential, commercial parking facilities, and various EV manufacturers.
Our commitment is to enable every customer to enjoy safe, convenient, and reliable charging experiences.

Seamless Parking Experience

Reserve charging slot via App
Automatic Number Plate Recognition (ANPR) system identifies the vehicle and guides the driver to their assigned slot.
The system automatically records parking period and charging fees. Drivers pay effortlessly through the app and depart when ready.

Professional and Reliable

Shun Hing has a large, professional team and has successfully completed EV charging‑facility projects for numerous residential estates and commercial car parks across Hong Kong. We provide site surveys, installation, technical support, and comprehensive after‑sales warranty services, making us a trusted and reliable partner.

Variety of Options to Suit Different Needs

We offer a range of EV chargers to match different requirements, and can include a mobile app as an added feature. Whether it is a single parking space or a large car park, we can tailor the most suitable solution for you.

Residential Properties

We provide a one‑stop electric‑vehicle charging solution service—on‑site inspection, installation, and free consultation services for owners’ corporations and property management companies.

Commercial and Industrial Properties

We offer professional EV charging solutions for developers, schools, public venues, and property management in the commercial sector, including installation of charging equipment, maintenance and technical support, as well as ongoing monitoring and software updates.

Our team provides one-stop professional services.

Site survey, consultation, design, installation, technical support, comprehensive after-sales maintenance and spare parts services, with dedicated personnel following up throughout the process.

Inquire Now

.taglist-checkboxes-css, .searchscope-checkboxes-css { position: absolute; left: -29999px; } .taglist-checkboxes-css:focus + label, .searchscope-checkboxes-css:focus + label { outline: 2px solid #6366f1; /* indigo-500 */ } import VueMyRevealable from '/scripts/vue-my-revealable/src/VueMyRevealable.vue?rnd=ts639155289784564533'; import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import { useFetch, useWindowSize, onKeyStroke, useFocusWithin } from '@vueuse/core'; // const { useFetch } = VueUse; // export default { components: { 'vue-my-revealable': VueMyRevealable }, props: { 'skipSearchIfNoKeyWord': { type: Boolean, default: false } }, directives: { 'esctoggle': { // v-esctoggle mounted: (el, binding, vnode) => { const handler = (e) => { //console.log('esctoggle / binding', binding); if (e.key === 'Escape' && el.type === 'checkbox') { e.preventDefault(); if (binding && binding.value && typeof(binding.value) === 'function') { binding.value(event); // Call the provided handler function } else { el.checked = false; el.dispatchEvent(new Event('change')); } } }; el.addEventListener('keydown', handler); el._escToggleHandler = handler; }, beforeUnmount: (el, binding, vnode) => { el.removeEventListener('keydown', el._escToggleHandler); } }, 'entertoggle': { // v-entertoggle mounted: (el, binding, vnode) => { const handler = (e) => { if (e.key === 'Enter' && el.type === 'checkbox') { e.preventDefault(); el.checked = !el.checked; el.dispatchEvent(new Event('change')); } }; el.addEventListener('keydown', handler); el._enterToggleHandler = handler; }, beforeUnmount: (el, binding, vnode) => { el.removeEventListener('keydown', el._enterToggleHandler); } }, 'closewhenlostfocus': { // v-closewhenlostfocus mounted(el, binding) { el.__clickOutsideHandler__ = (event) => { if (!(el === event.target || el.contains(event.target))) { if (binding && binding.value && typeof (binding.value) === 'function') { binding.value(event); // Call the provided handler function } else if (binding && binding.value && typeof (binding.value) === 'object') {// responseive overload const { effectiveFromWidth, effectiveToWidth, action } = binding.value; // typeof(effectiveFromWidth, effectiveToWidth)===Number; typeof(action)===Function if (typeof (effectiveFromWidth) === 'number' && typeof (action) === 'function') { const { width: winWidth, height: winHeight } = useWindowSize() // Incoke the action only if the viewport width is within constraints by [effectiveFromWidth] and [effectiveToWidth] if ((!effectiveToWidth || winWidth.value < effectiveToWidth) && (!effectiveFromWidth || winWidth.value >= effectiveFromWidth)) { action(event); } } else { console.warn('[closewhenlostfocus] unknown binding.value; binding=', binding, ';event=', event); } } } }; document.addEventListener('click', el.__clickOutsideHandler__); }, unmounted(el) { document.removeEventListener('click', el.__clickOutsideHandler__); }, } }, setup({ skipSearchIfNoKeyWord }) { const route = useRoute() const router = useRouter() const { width: winWidth, height: winHeight } = useWindowSize() const pdts = ref([]); const scopeTotal = ref(0); const firstRankInView = ref(0); const lastRankInView = ref(0); const totalPageCount = ref(0); const currentPageNo = ref(1); const tagLists = ref([]); const filterPaneModel = ref([]); const isInitializing = ref(true); const isLoading = ref(true); const hasSearchCriteria = ref(false); const hasConnectivityError = ref(false); const suggestions = ref([]); const spellchecks = ref([]); const suggestionPanelCloseLock = ref(false);// shut=true; free-to-open=false const suggestionPanelCloseQuickLock = ref(false);// shut=true; free-to-open=false //console.log(' on load .t=', route?.query?.t, _.chain(route?.query?.t || []).map(function (itm) { return parseInt(itm, 10); }).filter(function (itm) { return itm > 0 }).value()); const uicontrol = ref({ q: route?.query?.q || '', si: (parseInt(route?.query?.si, 10) > 0) ? (parseInt(route?.query?.si, 10) || 0) : 0, c: (parseInt(route?.query?.c, 10) > 0) ? (parseInt(route?.query?.c, 10) || 24) : 24, t: _.filter([].concat(route?.query?.t), itm => itm > 0), b: _.filter([].concat(route?.query?.b), itm => itm > 0), }); const searchboxdomref = ref(null); const searchboxdomref1 = ref(null); const scrollresetdomanchorref = ref(null);//whole search query + filter pane let lastuicontrolvalue = JSON.parse(JSON.stringify(uicontrol.value)); const pagingQueryF = (si) => { var nv = uicontrol.value; var _o = Object.assign({}, nv.q ? { q: nv.q } : {}, nv.si ? { si: nv.si } : {}, (nv.c && nv.c !== 24) ? { c: nv.c } : {}, (nv.t && nv.t.length > 0) ? { t: nv.t } : {}, (nv.b && nv.b.length > 0) ? { b: nv.b } : {}, ); _o.si = si; return _o; }; const debouncedRouteChangeF = _.debounce(function (nv) { //console.log('debounce(watch(uicontrol)) nv=', JSON.parse(JSON.stringify(nv))); router.push({ replace: true, name: 'all', query: Object.assign({}, nv.q ? { q: nv.q } : {}, nv.si ? { si: nv.si } : {}, (nv.c && nv.c !== 24) ? { c: nv.c } : {}, (nv.t && nv.t.length > 0) ? { t: _.filter([].concat(nv.t), itm => itm > 0) } : {}, (nv.b && nv.b.length > 0) ? { b: _.filter([].concat(nv.b), itm => itm > 0) } : {}, ) }); }, 360); const tagReqUrl = ref('/en/api/v1/tags/TagsJson') const tagReqData = ref({ ctxid: 2202, }); const tagPromise = useFetch(tagReqUrl, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(tagReqData.value) }, { refetch: true, timeout: 30000 }).json(); //lastAbortH.value = { // abort: abort, // canAbort: canAbort //}; Promise.all([tagPromise]).then(t => { const [tagTask] = t; const { isFetching: _isFetching, error: _error, data: _data } = tagTask; if (!tagTask) { return; } if (_error?.value) { hasConnectivityError.value = true; setTimeout(function () { hasConnectivityError.value = false }, 4500); return; } if (tagTask.data && tagTask.data.value && tagTask.data.value.success) { if (_data.value && _data.value.payload && _data.value.payload.tags && _data.value.payload.tags.length) { // _data.value.payload.tags[0].tagListLabel / _data.value.payload.tags[0].tagListUmbId const __tls = _.map(_.filter(_data.value.payload.tags, function (t) { return t.tagListMembers && !!t.tagListMembers.length }), function (tO) { return { tagumbid: tO.tagListUmbId, taglbl: tO.tagListLabel, tagmbrs: _.map(tO.tagListMembers, function (tmO) { return { tagmbrumbid: tmO.tagUmbId, tagmbrlbl: tmO.tagLabel }; }) }; }); tagLists.value.push(...__tls); tagLists.value = tagLists.value; } } }); const globalFontSizeChanged = (evt) => { if (evt && evt.type === 'myGlobalFontSizeChanged' && evt.detail && evt.detail.kind) { //console.log('tplProductCategoryItem::globalFontSizeChanged', evt, 'kind=', evt.detail.kind); //setTimeout(function () { // // refreshSuggestionPaneCoorsF(); // immediate //}); } } onMounted(() => { // window.addEventListener('myGlobalFontSizeChanged', globalFontSizeChanged); }); onBeforeUnmount(() => { window.removeEventListener('myGlobalFontSizeChanged', globalFontSizeChanged); }); /** * returns x, y coordinates for absolute positioning of a span within a given text input * at a given selection point * @param {object} input - the input element to obtain coordinates for * @param {number} selectionPoint - the selection point for the input */ const getCursorXY = (input, selectionPoint) => { const { offsetLeft: inputX, offsetTop: inputY, } = input // create a dummy element that will be a clone of our input const div = document.createElement('div') // get the computed style of the input and clone it onto the dummy element const copyStyle = getComputedStyle(input) for (const prop of copyStyle) { div.style[prop] = copyStyle[prop] } // we need a character that will replace whitespace when filling our dummy element if it's a single line <input/> const swap = '.' const inputValue = input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value // set the div content to that of the textarea up until selection const textContent = inputValue.substr(0, selectionPoint) // set the text content of the dummy element div div.textContent = textContent if (input.tagName === 'TEXTAREA') div.style.height = 'auto' // if a single line input then the div needs to be single line and not break out like a text area if (input.tagName === 'INPUT') div.style.width = 'auto' // create a marker element to obtain caret position const span = document.createElement('span') // give the span the textContent of remaining content so that the recreated dummy element is as close as possible span.textContent = inputValue.substr(selectionPoint) || '.' // append the span marker to the div div.appendChild(span) // append the dummy element to the body document.body.appendChild(div) // get the marker position, this is the caret position top and left relative to the input const { offsetLeft: spanX, offsetTop: spanY } = span // lastly, remove that dummy element // NOTE:: can comment this out for debugging purposes if you want to see where that span is rendered document.body.removeChild(div) // return an object with the x and y of the caret. account for input positioning so that you don't need to wrap the input return { x: inputX + spanX, y: inputY + spanY, } }; const isTextInputOverflowing = ref(false); const spellcheckXCoor = ref(0); const spellcheckYCoor = ref(0); const refreshSuggestionPaneCoorsF = function () { return; if (searchboxdomref.value && searchboxdomref1.value) { //console.log('watch(uicontrol): searchboxdomref: b ', searchboxdomref.value.selectionStart, 'e ', searchboxdomref.value.selectionEnd); const { x, y } = getCursorXY(searchboxdomref.value, searchboxdomref.value.selectionStart); const { y: endTop, x: endLeft } = getCursorXY(searchboxdomref.value, searchboxdomref.value.selectionEnd); const { offsetLeft, offsetWidth, offsetTop, scrollLeft, scrollTop, selectionStart, selectionEnd } = searchboxdomref.value; console.log(' x:', x, ' y:', y, ' endTop:', endTop, ' endLeft:', endLeft, ' offsetLeft:', offsetLeft, ' scrollLeft:', scrollLeft, ' offsetTop:', offsetTop); const { width } = getComputedStyle(searchboxdomref.value); const { width: width1 } = getComputedStyle(searchboxdomref1.value); isTextInputOverflowing.value = (width1 >= width); //console.log(' searchboxdomref.value[' + isTextInputOverflowing.value + ']:', parseInt(width.replace('px', ''), 10), parseInt(width1.replace('px', ''), 10)); // croplastword const { width: referencerWidth } = getComputedStyle(searchboxdomref1.value); //console.log(' searchboxdomref1.value: ', referencerWidth, ' searchboxdomref1.value.style.left', searchboxdomref1.value); const { paddingRight, lineHeight, height: inputboxHeight, width: inputboxWidth } = getComputedStyle(searchboxdomref.value); const _newY = parseInt(inputboxHeight.replace('px', ''), 10); spellcheckYCoor.value = _newY; const _newX = (parseInt(inputboxWidth.replace('px', ''), 10) - parseInt(spellcheckXCoor.value, 10)) < 0 ? -9999 : (referencerWidth.replace('px', '') - scrollLeft); spellcheckXCoor.value = _newX; //console.log(' _newX:', _newX, ' _newY:', _newY, ' inputboxWidth', inputboxWidth); } }; const croppedInputQueryStr = computed(() => { if (!(searchboxdomref.value && searchboxdomref1.value)) return; const isCaretMode = (searchboxdomref.value.selectionStart == searchboxdomref.value.selectionEnd); var _1 = (uicontrol.value.q + '').replace(/\s+$/, ''); ////if (isCaretMode) { //// _1 = _1.substring(0, searchboxdomref.value?.selectionStart); ////} //// ////var _lastSpacePos = _1.lastIndexOf(' '); ////if (_lastSpacePos > -1) { //// _1 = _1.substr(0, _lastSpacePos); ////} else { //// _1 = ''; ////} // HACK, adjust the pane xy coors on page load setTimeout(function () { refreshSuggestionPaneCoorsF(); // immediate }); return _1; }); // initialize: adjust the pane xy coors on page load setTimeout(function () { //console.log('refreshSuggestionPaneCoorsF(init)', new Date()); ////////if (searchboxdomref.value) { //////// searchboxdomref.value.focus(); // .setSelectionRange() will work only if focus() is targeted at. //////// //console.log('refreshSuggestionPaneCoorsF(init/1)', new Date()); //////// searchboxdomref.value.setSelectionRange(searchboxdomref.value.value?.length, searchboxdomref.value.value?.length); //////// //console.log('refreshSuggestionPaneCoorsF(init/2)', searchboxdomref.value.value?.length); ////////} refreshSuggestionPaneCoorsF(); // immediate }); const lastAbortH = ref(null); watch( () => route.query,//route.fullpath (nv, ov) => { uicontrol.value.q = nv.q || ''; uicontrol.value.si = parseInt(nv.si || 0, 10); uicontrol.value.c = parseInt(nv.c || 24, 10); uicontrol.value.t = nv.t || []; uicontrol.value.b = nv.b || []; // window.scrollTop reset on pagination, etc... if (scrollresetdomanchorref.value) { const _rect = scrollresetdomanchorref.value.getBoundingClientRect(); const _isInViewPort = ( _rect.top < (window.innerHeight || document.documentElement.clientHeight) && _rect.left < (window.innerWidth || document.documentElement.clientWidth) && _rect.bottom > 0 && _rect.right > 0 ); if (!_isInViewPort) { window.scrollTo({ top: 0, behavior: "instant" // smooth }); } } if (!(!nv.si && ov.si == '0')) {// optimization, prevent double querying if .si=='0' refreshSearchResultF(nv); } } ); watch(uicontrol, (nv, ov) => { let toSetSiZero = false; if (nv?.q !== lastuicontrolvalue?.q) { toSetSiZero = true; } if (_.sortBy(nv?.t).join(',') !== _.sortBy(lastuicontrolvalue?.t).join(',')) { toSetSiZero = true; } //console.log('nv?.q !== lastuicontrolvalue?.q', 'nv?.q=', nv?.q, 'lastuicontrolvalue?.q=', lastuicontrolvalue?.q); //console.log('nv?.t !== lastuicontrolvalue?.t', 'nv?.t=', nv?.t, 'lastuicontrolvalue?.t=', lastuicontrolvalue?.t); if (toSetSiZero) { nv.si = 0; // when keyword is changed, reset the .si to 0 } debouncedRouteChangeF(nv); //refreshSuggestionPaneCoorsF(); lastuicontrolvalue = JSON.parse(JSON.stringify(nv)); }, { immediate: true, deep: true }); const facetCountDir = ref([]); const facetCountInScopeF = (tagId) => { const _tagId = parseInt(tagId, 10); return computed(() => { const _foundCounts = _.filter(facetCountDir.value, function (itm) { return itm.tagid === _tagId; }); if (_foundCounts && _foundCounts.length > 0) { //console.log('itm.tagid === _tagId', _tagId, _foundCounts[0].scopecount); return _foundCounts[0].scopecount || 0; } return 0; }); }; const isHideIfEmptyResult = computed(() => { return (skipSearchIfNoKeyWord && !hasSearchCriteria.value && (!pdts.value || pdts.value.length < 1) ); }); const refreshSearchResultF = async (routeQuery) => { var nv = routeQuery; if (skipSearchIfNoKeyWord && (nv.q === undefined || nv.q.trim() === '')) { pdts.value = []; scopeTotal.value = 0; firstRankInView.value = 0; lastRankInView.value = 0; currentPageNo.value = 0; totalPageCount.value = 0; //selectedPageNo.value = 1; hasSearchCriteria.value = false; isInitializing.value = false; isLoading.value = false; return; } if (lastAbortH.value) { if (lastAbortH.value.canAbort && lastAbortH.value.canAbort.value) { lastAbortH.value.abort(); } } const keywordsSplit = (nv.q || '').replace(/\s+$/, '').split(' '); const lastKeywordsSplit = (keywordsSplit.length > 1) ? keywordsSplit[keywordsSplit.length - 1] : '*'; const reqUrl = ref('/en/api/v1/pdts/IndexJson')// const reqData = ref({ ctxid: 2202, q: nv.q || '', tids: nv.t ? [].concat(nv.t) : [], si: parseInt(nv.si || 0, 10), c: parseInt(nv.c || 24, 10), src: 'kb', }); const reqUrlCombined = ref(reqUrl.value);// + '?' + new URLSearchParams(reqData.value)) try { isLoading.value = true; const { isFetching, error, data, abort, canAbort } = await useFetch(reqUrlCombined, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(reqData.value) }, { refetch: true, timeout: 60000 }).json(); lastAbortH.value = { abort: abort, canAbort: canAbort }; if (error?.value) { hasConnectivityError.value = true; setTimeout(function () { hasConnectivityError.value = false }, 5000); return; } if (data && data.value && data.value.success && data.value.payload && data.value.payload.pdts) { pdts.value = [].concat(data.value.payload.pdts); scopeTotal.value = data.value.payload.scopetotal; firstRankInView.value = parseInt(reqData.value.si, 10) + 1; lastRankInView.value = ((parseInt(reqData.value.si, 10) + parseInt(reqData.value.c, 10)) >= scopeTotal.value) ? scopeTotal.value : (parseInt(reqData.value.si, 10) + parseInt(reqData.value.c, 10)); currentPageNo.value = Math.floor(parseInt(reqData.value.si, 10) / parseInt(reqData.value.c, 10)) + 1 totalPageCount.value = Math.ceil(scopeTotal.value / parseInt(reqData.value.c, 10)); selectedPageNo.value = currentPageNo.value; hasSearchCriteria.value = reqData.value.q?.length > 0 || reqData.value.tids?.length > 0; } if (data && data.value && data.value.success && data.value.payload && data.value.payload.facets && data.value.payload.facets.length > 0) { // 0: {dimension: "tagi", label: "3614", count: 2} // 1: {dimension: "tagi", label: "3620", count: 1} facetCountDir.value = _.chain(data.value.payload.facets) .filter(function (itm) { return itm.dimension === 'tagi' }) .map(function (itm) { return { tagid: parseInt(itm.label, 10), scopecount: parseInt(itm.count, 10) }; }) .value(); } else { facetCountDir.value = []; } if (data && data.value && data.value.success && data.value.payload && data.value.payload.su) { suggestions.value = [].concat(_.map(data.value.payload.su, function (x) { return x.text; })); } if (data && data.value && data.value.success && data.value.payload && data.value.payload.sc) { spellchecks.value = [].concat(_.chain(data.value.payload.sc).filter(function (x) { return x.partialQuery === lastKeywordsSplit; }).map(function (x) { return x.text; }).value()); } // console.log('facetCountDir.value=', facetCountDir.value); } finally { isInitializing.value = false; isLoading.value = false; // New data has just arrived, reset the close-suggestion-panel state to lock-free (i.e. false) suggestionPanelCloseLock.value = false; suggestionPanelCloseQuickLock.value = false; } }; // first init. refreshSearchResultF(route.query); const PAGINATORSLIDINGWINDOW = computed(() => { return winWidth.value < 720 ? 5 : winWidth.value < 860 ? 5 : winWidth.value < 910 ? 7 : winWidth.value < 1024 ? 9 : 11; }); const slidingWindowMin = computed(() => { let _result = 1; if (currentPageNo.value - Math.floor(PAGINATORSLIDINGWINDOW.value / 2) > 0) { _result = currentPageNo.value - Math.floor(PAGINATORSLIDINGWINDOW.value / 2) + 0; if (totalPageCount.value - _result < PAGINATORSLIDINGWINDOW.value) { _result = totalPageCount.value - PAGINATORSLIDINGWINDOW.value + 1; } } return _result; }); const slidingWindowMax = computed(() => { let _result = slidingWindowMin.value + PAGINATORSLIDINGWINDOW.value - 1; _result = _result > totalPageCount.value ? totalPageCount.value : _result; return _result; }); const selectedPageNo = ref(currentPageNo.value); const paginationSelectChangeF = (event) => { //console.log('paginationSelectChangeF', event.target.value); uicontrol.value.si = (parseInt(event.target.value, 10) - 1) * uicontrol.value.c; }; watch(filterPaneModel, function (nv, ov) { if (nv && nv.length > 1) {// Ensure only one filter panel is shown at any one time filterPaneModel.value = [].concat(nv[1]); } }); //setInterval(function () { // var fele = document.querySelectorAll(':focus'); // console.log(' >>> focused', fele); //}, 100); const suggestionpanelref = ref(null); const { focused: isFocusWithin_suggestionpanelref } = useFocusWithin(suggestionpanelref); const { focused: isFocusWithin_searchboxdomref } = useFocusWithin(searchboxdomref); const isSuggestionPanelOpen = ref(false); const debouncedSuggestionPanelOpenCloseF = _.debounce(function (nv) { isSuggestionPanelOpen.value = !!nv; }, 150); watch([ isFocusWithin_suggestionpanelref, isFocusWithin_searchboxdomref, suggestions, isInitializing,//isLoading, uicontrol, suggestionPanelCloseLock, suggestionPanelCloseQuickLock ], ([ nv1, nv2, nv3, nv4, nv5, nv6, nv7 ]) => { //console.log('1', nv1, '2', nv2, '3', nv3, '4', nv4, '5', nv5, '6', nv6, '7', nv7, ';;;nv5.q', !nv5.q); //debouncedSuggestionPanelOpenCloseF((nv1 || nv2) && nv3.length > 1 && !nv4 && !!nv5.q && !nv6 && !nv7); debouncedSuggestionPanelOpenCloseF((nv1 || nv2) && nv3.length > 1 && !nv4 && !nv6 && !nv7); }); //const watchSuggestionpanelrefOnce = watch(suggestionpanelref, function (nv) { // // initialize the DOM with tabindex html attr so that it always receive browser focus // if (suggestionpanelref.value) { // watchSuggestionpanelrefOnce();//unhook // } //}, { immediate: true }); const formattedSuggestions = computed(() => { if (suggestions.value && suggestions.value.length) { const qTrimmed = uicontrol.value.q?.replace(/\s+$/, ''); const qLastKeyword = _.chain(qTrimmed?.split(/[ ]/)).last().value(); // const __result = _.chain(suggestions.value).first(6).map(function (x) { const __r = (scopeTotal.value > 0) ? ((qTrimmed !== '') ? (qLastKeyword !== '' && qTrimmed.toLowerCase().indexOf(qLastKeyword.toLowerCase()) > -1 && x.toLowerCase().indexOf(qLastKeyword.toLowerCase()) > -1) ? qTrimmed.substr(0, qTrimmed.toLowerCase().lastIndexOf(qLastKeyword.toLowerCase())) // fusepended : (qTrimmed + ' ') // appended : '' ) : ''; return { literal: __r + x, pre: __r, suggn: x }; }).value(); return __result; } return []; }); // When clicked on any suggestion, immediately empty the suggestion candidates so the suggestion panel disappears OR const formattedSuggestionClickedF = function (w00t) { //console.log('formattedSuggestionClickedF', w00t); if (w00t) { //suggestions.value = []; suggestionPanelCloseQuickLock.value = true; if (searchboxdomref.value) { searchboxdomref.value.focus(); } uicontrol.value.q = w00t; } }; const searchboxHandleInputF = function (evt) { let isCaretAtEnd = false; let isNoTrailingSpace = false; //let isHorizontalOverflowing = false; if (evt.target.value) { const trimmedte = evt.target.value.replace(/\s+$/, ''); isCaretAtEnd = evt.target.selectionStart && (evt.target.value.length > 0) && (evt.target.value.length == evt.target.selectionStart); isNoTrailingSpace = evt.target.selectionStart && (trimmedte.length > 0) && (trimmedte.length == evt.target.selectionStart); //isHorizontalOverflowing = evt.target.scrollWidth > evt.target.clientWidth; } //console.log('searchboxHandleInputF.selectionStart', evt.target.selectionStart, 'isCaretAtEnd: ', isCaretAtEnd, 'isNoTrailingSpace: ', isNoTrailingSpace); }; const searchboxHandleEscKeyUpF = (evt) => { if (!isSuggestionPanelOpen.value) { evt.target.value = ''; } else { suggestionPanelCloseLock.value = true; debouncedSuggestionPanelOpenCloseF(false); } }; const searchboxHandleDownKeyUpF = () => { if (suggestionpanelref.value) { suggestionPanelCloseLock.value = false; suggestionPanelCloseQuickLock.value = false; //debouncedSuggestionPanelOpenCloseF(true); const firstLi = suggestionpanelref.value.querySelector('li'); if (firstLi) { firstLi.focus(); } } }; //@keyup.up="suggestionLiHandleUpKeyDownF" const suggestionLiHandleUpKeyDownF = (e) => { if (e.target.previousElementSibling) { e.target.previousElementSibling.focus(); } else if (searchboxdomref.value) { searchboxdomref.value.focus(); } }; //@keyup.down="suggestionLiHandleDownKeyDownF" const suggestionLiHandleDownKeyDownF = (e) => { if (e.target.nextElementSibling) { e.target.nextElementSibling.focus(); } }; //@keyup.left="suggestionLiHandleLeftKeyDownF" const suggestionLiHandleLeftKeyDownF = (e) => { debouncedSuggestionPanelOpenCloseF(false); if (searchboxdomref.value) { searchboxdomref.value.focus(); } }; //@keyup.backspace="suggestionLiHandleBackspaceKeyDownF" const suggestionLiHandleBackspaceKeyDownF = (e) => { debouncedSuggestionPanelOpenCloseF(false); if (searchboxdomref.value) { searchboxdomref.value.focus(); } }; const closeSuggestionClickedF = () => { suggestionPanelCloseLock.value = true; debouncedSuggestionPanelOpenCloseF(false); if (searchboxdomref.value) { searchboxdomref.value.focus(); } }; const toggleSuggestionClickedF = () => { //console.log('toggleSuggestionClickedF', (formattedSuggestions.value && formattedSuggestions.value.length)); if ((formattedSuggestions.value && formattedSuggestions.value.length)) { //suggestionPanelCloseLock.value = false; suggestionPanelCloseLock.value = false; suggestionPanelCloseQuickLock.value = false; //console.log('toggleSuggestionClickedF'); debouncedSuggestionPanelOpenCloseF(!isSuggestionPanelOpen.value); setTimeout(function () { if (isSuggestionPanelOpen.value) { searchboxdomref.value?.focus(); } }); } }; const tagMbrCheckedCountF = (taglistId) => { const _taglistId = parseInt(taglistId, 10); return computed(() => { const _foundLists = _.filter(tagLists.value, function (itm) { return itm.tagumbid === _taglistId; }); if (_foundLists && _foundLists.length > 0) { //console.log(' _foundLists[0].tagmbrs', _foundLists[0].tagmbrs); const _value = _.reduce(_foundLists[0].tagmbrs, function (memo, o) { return memo + (uicontrol.value.t.indexOf(o.tagmbrumbid.toString()) > -1 ? 1 : 0) }, 0); return parseInt(_value, 10); } return 0; }); }; // UX: when clicking anywhere outside the taglist UI, close the taglist dropdown const closeFilterPanelF = (tagumbid) => { const _tagumbid = tagumbid; return () => { setTimeout(function () { filterPaneModel.value = _.filter(filterPaneModel.value, function (itm) { return parseInt(itm, 10) !== parseInt(_tagumbid, 10); }); }); } }; const hasPrevPage = computed(() => { return (uicontrol.value.si - uicontrol.value.c >= 0); }); const prevPageRoute = computed(() => { return hasPrevPage.value ? { path: '/en/solutions/ev', query: pagingQueryF(uicontrol.value.si - uicontrol.value.c) } : null; }); const hasNextPage = computed(() => { return (uicontrol.value.si + uicontrol.value.c < totalPageCount.value * uicontrol.value.c); }); const nextPageRoute = computed(() => { return hasNextPage.value ? { path: '/en/solutions/ev', query: pagingQueryF(uicontrol.value.si + uicontrol.value.c) } : null; }); // // Keyboard left-right paging navigation // const INPUT_SELECTOR = 'input, textarea, select, [contenteditable="true"], li'; onKeyStroke(['ArrowLeft'], (e) => { if (e.altKey) return; if (document.activeElement?.matches(INPUT_SELECTOR)) return; //console.log('tplProductCategoryItem/ArrowLeft'); e.preventDefault(); //Toast.show('Arrow Left', 'info'); if (hasPrevPage.value) { router.push(prevPageRoute.value); } }); onKeyStroke(['ArrowRight'], (e) => { if (e.altKey) return; if (document.activeElement?.matches(INPUT_SELECTOR)) return; //console.log('tplProductCategoryItem/ArrowRight'); e.preventDefault(); //Toast.show('Arrow Right', 'info'); if (hasNextPage.value) { router.push(nextPageRoute.value); } }); onKeyStroke(['K', 'k'], (e) => { // Ctrl-K Control-K Ctrl+K Control+K // Check if the Ctrl/Meta key is also pressed if (e.ctrlKey || e.metaKey) { e.preventDefault(); // Prevent default browser behavior (e.g., focus URL bar) if (searchboxdomref.value) { searchboxdomref.value.focus(); } } }); const searchScopePaneVisible = ref(false); const closeSearchScopePaneF = () => { setTimeout(function () { searchScopePaneVisible.value = false; }); } return { pdts, uicontrol, searchboxdomref, searchboxdomref1, scrollresetdomanchorref, searchboxHandleInputF, croppedInputQueryStr, pagingQueryF, scopeTotal, firstRankInView, lastRankInView, totalPageCount, currentPageNo, selectedPageNo, slidingWindowMin, slidingWindowMax, isInitializing, isLoading, winWidth, paginationSelectChangeF, tagLists, filterPaneModel, facetCountInScopeF, tagMbrCheckedCountF, closeFilterPanelF, hasSearchCriteria, hasConnectivityError, hasPrevPage, hasNextPage, prevPageRoute, nextPageRoute, closeSearchScopePaneF, searchScopePaneVisible, isHideIfEmptyResult, isSuggestionPanelOpen, suggestionpanelref, suggestions, formattedSuggestions, formattedSuggestionClickedF, searchboxHandleEscKeyUpF, searchboxHandleDownKeyUpF, suggestionLiHandleUpKeyDownF, suggestionLiHandleDownKeyDownF, suggestionLiHandleLeftKeyDownF, suggestionLiHandleBackspaceKeyDownF, closeSuggestionClickedF, toggleSuggestionClickedF, suggestionPanelCloseLock, suggestionPanelCloseQuickLock, spellchecks, spellcheckXCoor, spellcheckYCoor, // ----------------------- isTextInputOverflowing }; } }

9/F Peninsula Centre, 67 Mody Road, Tsimshtsui East, Kln., Hong Kong

+852 2313 0666

+852 2313 0656

Green Energy Solutions

Seamless Parking Experience

Professional and Reliable

Variety of Options to Suit Different Needs

Residential Properties

Commercial and Industrial Properties

Commerical EV Solution

Outstanding Performance, Safety, and Comfort

Our team provides one-stop professional services.

Contact Us

Follow Us

SHTEC