@uzum-tech/ui 1.12.21 → 1.12.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +41 -5
- package/dist/index.prod.js +1 -1
- package/es/header/src/Header.js +4 -1
- package/es/header/src/HeaderSearchDesktop.d.ts +12 -0
- package/es/header/src/HeaderSearchDesktop.js +21 -4
- package/es/header/src/HeaderSearchMobile.d.ts +12 -0
- package/es/header/src/HeaderSearchMobile.js +8 -2
- package/es/header/src/mobile/HeaderMobile.js +18 -3
- package/es/version.d.ts +1 -1
- package/es/version.js +1 -1
- package/lib/header/src/Header.js +4 -1
- package/lib/header/src/HeaderSearchDesktop.d.ts +12 -0
- package/lib/header/src/HeaderSearchDesktop.js +20 -3
- package/lib/header/src/HeaderSearchMobile.d.ts +12 -0
- package/lib/header/src/HeaderSearchMobile.js +7 -1
- package/lib/header/src/mobile/HeaderMobile.js +18 -3
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
- package/web-types.json +16 -1
package/es/header/src/Header.js
CHANGED
|
@@ -318,7 +318,10 @@ export default defineComponent({
|
|
|
318
318
|
const navigationNode = resolveWrappedSlot($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || (h(HeaderNavigation, { menuOptions: this.menuOptions, menuPlacement: this.menuPlacement, menuTrigger: this.menuTrigger, menuValue: this.mergedMenuValue, menuTabsProps: this.menuTabsProps, menuCardMinColumnWidth: this.menuCardMinColumnWidth, mergedClsPrefix: mergedClsPrefix, menuPaneClass: this.menuPaneClass, menuPaneWrapperClass: this.menuPaneWrapperClass, activeMenuKey: this.mergedActiveMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate, onUpdateActiveMenuKey: this.handleUpdateActiveMenuKey }));
|
|
319
319
|
const mobileNode = this.responsive && this.isMobile ? (h(HeaderMobile, { visible: this.mobileMenuVisible, menuOptions: this.normalizedMenuItems, activeMenuValue: this.mergedMenuValue, langOptions: this.langOptions || defaultLangOptions, currentLang: this.currentLang, mergedClsPrefix: mergedClsPrefix, cssVars: this.cssVars, menuType: this.mobileMenuType, showFooterActions: this.mobileShowFooterActions, showHeaderActions: this.mobileShowHeaderActions, primaryActionText: this.mobilePrimaryActionText, secondaryActionText: this.mobileSecondaryActionText, onToggle: this.toggleMobileMenu, onClose: this.closeMobileMenu, onMenuItemClick: this.handleMobileMenuItemClick, onLanguageSelect: this.handleSelectLang, onPrimaryAction: this.handleMobilePrimaryAction, onSecondaryAction: this.handleMobileSecondaryAction, onSearchClick: this.handleSearchClick, onPreview: this.handlePreviewClick, onLogout: this.handleLogoutClick }, {
|
|
320
320
|
actions: $slots['mobile-actions'],
|
|
321
|
-
footer: $slots['mobile-footer']
|
|
321
|
+
footer: $slots['mobile-footer'],
|
|
322
|
+
search: $slots['mobile-search'],
|
|
323
|
+
preview: $slots['mobile-preview'],
|
|
324
|
+
logout: $slots['mobile-logout']
|
|
322
325
|
})) : null;
|
|
323
326
|
const langNode = resolveWrappedSlot($slots.lang, (children) => children);
|
|
324
327
|
const searchNode = resolveWrappedSlot($slots.search, (children) => children);
|
|
@@ -49,6 +49,18 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
49
49
|
search: import("vue").Ref<string>;
|
|
50
50
|
searchText: import("vue").ComputedRef<string>;
|
|
51
51
|
placeholder: import("vue").ComputedRef<string>;
|
|
52
|
+
inputInstRef: import("vue").Ref<{
|
|
53
|
+
wrapperElRef: HTMLElement | null;
|
|
54
|
+
textareaElRef: HTMLTextAreaElement | null;
|
|
55
|
+
inputElRef: HTMLInputElement | null;
|
|
56
|
+
isCompositing: boolean;
|
|
57
|
+
blur: () => void;
|
|
58
|
+
focus: () => void;
|
|
59
|
+
select: () => void;
|
|
60
|
+
activate: () => void;
|
|
61
|
+
deactivate: () => void;
|
|
62
|
+
scrollTo: (options: ScrollToOptions) => void;
|
|
63
|
+
} | null>;
|
|
52
64
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
53
65
|
readonly searchValue: {
|
|
54
66
|
readonly type: StringConstructor;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { h, defineComponent, computed, ref } from 'vue';
|
|
1
|
+
import { h, defineComponent, computed, ref, withDirectives, onMounted } from 'vue';
|
|
2
|
+
import { clickoutside } from 'vdirs';
|
|
2
3
|
import { UButton } from '../../button';
|
|
3
4
|
import { UIcon } from '../../icon';
|
|
4
5
|
import { UInput } from '../../input';
|
|
@@ -38,15 +39,21 @@ export default defineComponent({
|
|
|
38
39
|
const search = ref('');
|
|
39
40
|
const searchText = computed(() => localeRef.value.desktopSearchTitle);
|
|
40
41
|
const placeholder = computed(() => localeRef.value.searchPlaceholder);
|
|
42
|
+
const inputInstRef = ref(null);
|
|
43
|
+
onMounted(() => {
|
|
44
|
+
var _a;
|
|
45
|
+
(_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
|
46
|
+
});
|
|
41
47
|
return {
|
|
42
48
|
search,
|
|
43
49
|
searchText,
|
|
44
|
-
placeholder
|
|
50
|
+
placeholder,
|
|
51
|
+
inputInstRef
|
|
45
52
|
};
|
|
46
53
|
},
|
|
47
54
|
render() {
|
|
48
55
|
const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
|
|
49
|
-
|
|
56
|
+
const content = (h("div", { class: blockClass, style: this.cssVars },
|
|
50
57
|
h(UButton, { text: true, class: `${blockClass}__close`, onClick: this.onSearchClose }, {
|
|
51
58
|
default: () => (h(UIcon, { size: 24, color: "#C5C7CA" }, { default: () => h(CloseIcon, null) }))
|
|
52
59
|
}),
|
|
@@ -54,7 +61,7 @@ export default defineComponent({
|
|
|
54
61
|
h(UText, { variant: "title-l-medium", text: this.searchText })),
|
|
55
62
|
h("div", { class: `${blockClass}__content` },
|
|
56
63
|
h("div", { class: `${blockClass}__input-wrapper` },
|
|
57
|
-
h(UInput, { value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
|
|
64
|
+
h(UInput, { ref: "inputInstRef", value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
|
|
58
65
|
var _a, _b;
|
|
59
66
|
if (e.key === 'Enter') {
|
|
60
67
|
(_a = this.onSearchSubmit) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
@@ -73,5 +80,15 @@ export default defineComponent({
|
|
|
73
80
|
cssVars: this.cssVars,
|
|
74
81
|
onSelect: this.onResultSelect
|
|
75
82
|
})));
|
|
83
|
+
if (!this.onSearchClose)
|
|
84
|
+
return content;
|
|
85
|
+
return withDirectives(content, [
|
|
86
|
+
[
|
|
87
|
+
clickoutside,
|
|
88
|
+
this.onSearchClose,
|
|
89
|
+
undefined,
|
|
90
|
+
{ capture: true }
|
|
91
|
+
]
|
|
92
|
+
]);
|
|
76
93
|
}
|
|
77
94
|
});
|
|
@@ -46,6 +46,18 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
46
46
|
disabled?: boolean | undefined;
|
|
47
47
|
}[]>;
|
|
48
48
|
searchLoading: import("vue").Ref<boolean>;
|
|
49
|
+
inputInstRef: import("vue").Ref<{
|
|
50
|
+
wrapperElRef: HTMLElement | null;
|
|
51
|
+
textareaElRef: HTMLTextAreaElement | null;
|
|
52
|
+
inputElRef: HTMLInputElement | null;
|
|
53
|
+
isCompositing: boolean;
|
|
54
|
+
blur: () => void;
|
|
55
|
+
focus: () => void;
|
|
56
|
+
select: () => void;
|
|
57
|
+
activate: () => void;
|
|
58
|
+
deactivate: () => void;
|
|
59
|
+
scrollTo: (options: ScrollToOptions) => void;
|
|
60
|
+
} | null>;
|
|
49
61
|
handleSearchInput: (value: string) => void;
|
|
50
62
|
handleSearch: () => Promise<void>;
|
|
51
63
|
handleClose: () => void;
|
|
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
import { h, defineComponent, ref, watch, computed } from 'vue';
|
|
10
|
+
import { h, defineComponent, ref, watch, computed, onMounted } from 'vue';
|
|
11
11
|
import { UDrawer } from '../../drawer';
|
|
12
12
|
import { UButton } from '../../button';
|
|
13
13
|
import { UIcon } from '../../icon';
|
|
@@ -41,6 +41,7 @@ export default defineComponent({
|
|
|
41
41
|
const searchValue = ref('');
|
|
42
42
|
const searchResults = ref([]);
|
|
43
43
|
const searchLoading = ref(false);
|
|
44
|
+
const inputInstRef = ref(null);
|
|
44
45
|
const placeholder = computed(() => localeRef.value.searchPlaceholder);
|
|
45
46
|
const handleSearch = () => __awaiter(this, void 0, void 0, function* () {
|
|
46
47
|
const query = searchValue.value.trim();
|
|
@@ -84,11 +85,16 @@ export default defineComponent({
|
|
|
84
85
|
void handleSearch();
|
|
85
86
|
}, SEARCH_DEBOUNCE_MS);
|
|
86
87
|
});
|
|
88
|
+
onMounted(() => {
|
|
89
|
+
var _a;
|
|
90
|
+
(_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
|
91
|
+
});
|
|
87
92
|
return {
|
|
88
93
|
placeholder,
|
|
89
94
|
searchValue,
|
|
90
95
|
searchResults,
|
|
91
96
|
searchLoading,
|
|
97
|
+
inputInstRef,
|
|
92
98
|
handleSearchInput,
|
|
93
99
|
handleSearch,
|
|
94
100
|
handleClose,
|
|
@@ -106,7 +112,7 @@ export default defineComponent({
|
|
|
106
112
|
h(UButton, { text: true, class: `${blockClass}__back`, onClick: this.handleClose }, () => h(UIcon, { size: 24 }, () => h(ChevronLeftIcon, null))),
|
|
107
113
|
h("div", { class: `${blockClass}__input-wrapper` },
|
|
108
114
|
h(UIcon, { size: 20, class: `${blockClass}__input-icon` }, () => h(SearchIcon, null)),
|
|
109
|
-
h(UInput, { value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
|
|
115
|
+
h(UInput, { ref: "inputInstRef", value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
|
|
110
116
|
if (e.key === 'Enter') {
|
|
111
117
|
void this.handleSearch();
|
|
112
118
|
}
|
|
@@ -197,6 +197,21 @@ export default defineComponent({
|
|
|
197
197
|
renderBadge(option, `${blockClass}__badge`)),
|
|
198
198
|
isExpandable && isExpanded && option.children && (h("div", { class: `${mobileMenuClass}__children` }, option.children.map((child, index) => renderGroupItem(child, item.key, index))))));
|
|
199
199
|
};
|
|
200
|
+
const renderSearchAction = () => {
|
|
201
|
+
if (this.$slots.search)
|
|
202
|
+
return this.$slots.search();
|
|
203
|
+
return (h(UButton, { text: true, onClick: this.onSearchClick }, () => h(UIcon, { size: 24 }, () => h(SearchIcon, null))));
|
|
204
|
+
};
|
|
205
|
+
const renderPreviewAction = () => {
|
|
206
|
+
if (this.$slots.preview)
|
|
207
|
+
return this.$slots.preview();
|
|
208
|
+
return (h(UButton, { text: true, onClick: this.onPreview }, () => h(UIcon, { size: 24 }, () => h(EyeIcon, null))));
|
|
209
|
+
};
|
|
210
|
+
const renderLogoutAction = () => {
|
|
211
|
+
if (this.$slots.logout)
|
|
212
|
+
return this.$slots.logout();
|
|
213
|
+
return (h(UButton, { text: true, onClick: this.onLogout }, () => h(UIcon, { size: 24 }, () => h(LogoutIcon, null))));
|
|
214
|
+
};
|
|
200
215
|
const mobileMenuContent = (h("div", { class: mobileMenuClass, style: this.cssVars },
|
|
201
216
|
h("div", { class: `${mobileMenuClass}__header` },
|
|
202
217
|
this.$slots.actions ? (h("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions())) : this.showHeaderActions ? (h("div", { class: `${mobileMenuClass}__actions` },
|
|
@@ -216,9 +231,9 @@ export default defineComponent({
|
|
|
216
231
|
}),
|
|
217
232
|
h(UFlex, { size: 24 }, {
|
|
218
233
|
default: () => (h(Fragment, null,
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
234
|
+
renderSearchAction(),
|
|
235
|
+
renderPreviewAction(),
|
|
236
|
+
renderLogoutAction()))
|
|
222
237
|
}))) : null,
|
|
223
238
|
h(UButton, { text: true, class: `${mobileMenuClass}__close`, onClick: this.onClose }, () => h(UIcon, { size: 24 }, () => h(CloseIcon, null)))),
|
|
224
239
|
h("div", { class: `${mobileMenuClass}__body` },
|
package/es/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "1.12.
|
|
1
|
+
declare const _default: "1.12.22";
|
|
2
2
|
export default _default;
|
package/es/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '1.12.
|
|
1
|
+
export default '1.12.22';
|
package/lib/header/src/Header.js
CHANGED
|
@@ -347,7 +347,10 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
347
347
|
const navigationNode = (0, _utils_1.resolveWrappedSlot)($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || ((0, vue_1.h)(HeaderNavigation_1.default, { menuOptions: this.menuOptions, menuPlacement: this.menuPlacement, menuTrigger: this.menuTrigger, menuValue: this.mergedMenuValue, menuTabsProps: this.menuTabsProps, menuCardMinColumnWidth: this.menuCardMinColumnWidth, mergedClsPrefix: mergedClsPrefix, menuPaneClass: this.menuPaneClass, menuPaneWrapperClass: this.menuPaneWrapperClass, activeMenuKey: this.mergedActiveMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate, onUpdateActiveMenuKey: this.handleUpdateActiveMenuKey }));
|
|
348
348
|
const mobileNode = this.responsive && this.isMobile ? ((0, vue_1.h)(HeaderMobile_1.default, { visible: this.mobileMenuVisible, menuOptions: this.normalizedMenuItems, activeMenuValue: this.mergedMenuValue, langOptions: this.langOptions || defaultLangOptions, currentLang: this.currentLang, mergedClsPrefix: mergedClsPrefix, cssVars: this.cssVars, menuType: this.mobileMenuType, showFooterActions: this.mobileShowFooterActions, showHeaderActions: this.mobileShowHeaderActions, primaryActionText: this.mobilePrimaryActionText, secondaryActionText: this.mobileSecondaryActionText, onToggle: this.toggleMobileMenu, onClose: this.closeMobileMenu, onMenuItemClick: this.handleMobileMenuItemClick, onLanguageSelect: this.handleSelectLang, onPrimaryAction: this.handleMobilePrimaryAction, onSecondaryAction: this.handleMobileSecondaryAction, onSearchClick: this.handleSearchClick, onPreview: this.handlePreviewClick, onLogout: this.handleLogoutClick }, {
|
|
349
349
|
actions: $slots['mobile-actions'],
|
|
350
|
-
footer: $slots['mobile-footer']
|
|
350
|
+
footer: $slots['mobile-footer'],
|
|
351
|
+
search: $slots['mobile-search'],
|
|
352
|
+
preview: $slots['mobile-preview'],
|
|
353
|
+
logout: $slots['mobile-logout']
|
|
351
354
|
})) : null;
|
|
352
355
|
const langNode = (0, _utils_1.resolveWrappedSlot)($slots.lang, (children) => children);
|
|
353
356
|
const searchNode = (0, _utils_1.resolveWrappedSlot)($slots.search, (children) => children);
|
|
@@ -49,6 +49,18 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
49
49
|
search: import("vue").Ref<string>;
|
|
50
50
|
searchText: import("vue").ComputedRef<string>;
|
|
51
51
|
placeholder: import("vue").ComputedRef<string>;
|
|
52
|
+
inputInstRef: import("vue").Ref<{
|
|
53
|
+
wrapperElRef: HTMLElement | null;
|
|
54
|
+
textareaElRef: HTMLTextAreaElement | null;
|
|
55
|
+
inputElRef: HTMLInputElement | null;
|
|
56
|
+
isCompositing: boolean;
|
|
57
|
+
blur: () => void;
|
|
58
|
+
focus: () => void;
|
|
59
|
+
select: () => void;
|
|
60
|
+
activate: () => void;
|
|
61
|
+
deactivate: () => void;
|
|
62
|
+
scrollTo: (options: ScrollToOptions) => void;
|
|
63
|
+
} | null>;
|
|
52
64
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
53
65
|
readonly searchValue: {
|
|
54
66
|
readonly type: StringConstructor;
|
|
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.headerSearchDesktopProps = void 0;
|
|
7
7
|
const vue_1 = require("vue");
|
|
8
|
+
const vdirs_1 = require("vdirs");
|
|
8
9
|
const button_1 = require("../../button");
|
|
9
10
|
const icon_1 = require("../../icon");
|
|
10
11
|
const input_1 = require("../../input");
|
|
@@ -44,15 +45,21 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
44
45
|
const search = (0, vue_1.ref)('');
|
|
45
46
|
const searchText = (0, vue_1.computed)(() => localeRef.value.desktopSearchTitle);
|
|
46
47
|
const placeholder = (0, vue_1.computed)(() => localeRef.value.searchPlaceholder);
|
|
48
|
+
const inputInstRef = (0, vue_1.ref)(null);
|
|
49
|
+
(0, vue_1.onMounted)(() => {
|
|
50
|
+
var _a;
|
|
51
|
+
(_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
|
52
|
+
});
|
|
47
53
|
return {
|
|
48
54
|
search,
|
|
49
55
|
searchText,
|
|
50
|
-
placeholder
|
|
56
|
+
placeholder,
|
|
57
|
+
inputInstRef
|
|
51
58
|
};
|
|
52
59
|
},
|
|
53
60
|
render() {
|
|
54
61
|
const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
|
|
55
|
-
|
|
62
|
+
const content = ((0, vue_1.h)("div", { class: blockClass, style: this.cssVars },
|
|
56
63
|
(0, vue_1.h)(button_1.UButton, { text: true, class: `${blockClass}__close`, onClick: this.onSearchClose }, {
|
|
57
64
|
default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24, color: "#C5C7CA" }, { default: () => (0, vue_1.h)(icons_1.CloseIcon, null) }))
|
|
58
65
|
}),
|
|
@@ -60,7 +67,7 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
60
67
|
(0, vue_1.h)(typography_1.UText, { variant: "title-l-medium", text: this.searchText })),
|
|
61
68
|
(0, vue_1.h)("div", { class: `${blockClass}__content` },
|
|
62
69
|
(0, vue_1.h)("div", { class: `${blockClass}__input-wrapper` },
|
|
63
|
-
(0, vue_1.h)(input_1.UInput, { value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
|
|
70
|
+
(0, vue_1.h)(input_1.UInput, { ref: "inputInstRef", value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
|
|
64
71
|
var _a, _b;
|
|
65
72
|
if (e.key === 'Enter') {
|
|
66
73
|
(_a = this.onSearchSubmit) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
@@ -79,5 +86,15 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
79
86
|
cssVars: this.cssVars,
|
|
80
87
|
onSelect: this.onResultSelect
|
|
81
88
|
})));
|
|
89
|
+
if (!this.onSearchClose)
|
|
90
|
+
return content;
|
|
91
|
+
return (0, vue_1.withDirectives)(content, [
|
|
92
|
+
[
|
|
93
|
+
vdirs_1.clickoutside,
|
|
94
|
+
this.onSearchClose,
|
|
95
|
+
undefined,
|
|
96
|
+
{ capture: true }
|
|
97
|
+
]
|
|
98
|
+
]);
|
|
82
99
|
}
|
|
83
100
|
});
|
|
@@ -46,6 +46,18 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
46
46
|
disabled?: boolean | undefined;
|
|
47
47
|
}[]>;
|
|
48
48
|
searchLoading: import("vue").Ref<boolean>;
|
|
49
|
+
inputInstRef: import("vue").Ref<{
|
|
50
|
+
wrapperElRef: HTMLElement | null;
|
|
51
|
+
textareaElRef: HTMLTextAreaElement | null;
|
|
52
|
+
inputElRef: HTMLInputElement | null;
|
|
53
|
+
isCompositing: boolean;
|
|
54
|
+
blur: () => void;
|
|
55
|
+
focus: () => void;
|
|
56
|
+
select: () => void;
|
|
57
|
+
activate: () => void;
|
|
58
|
+
deactivate: () => void;
|
|
59
|
+
scrollTo: (options: ScrollToOptions) => void;
|
|
60
|
+
} | null>;
|
|
49
61
|
handleSearchInput: (value: string) => void;
|
|
50
62
|
handleSearch: () => Promise<void>;
|
|
51
63
|
handleClose: () => void;
|
|
@@ -47,6 +47,7 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
47
47
|
const searchValue = (0, vue_1.ref)('');
|
|
48
48
|
const searchResults = (0, vue_1.ref)([]);
|
|
49
49
|
const searchLoading = (0, vue_1.ref)(false);
|
|
50
|
+
const inputInstRef = (0, vue_1.ref)(null);
|
|
50
51
|
const placeholder = (0, vue_1.computed)(() => localeRef.value.searchPlaceholder);
|
|
51
52
|
const handleSearch = () => __awaiter(this, void 0, void 0, function* () {
|
|
52
53
|
const query = searchValue.value.trim();
|
|
@@ -90,11 +91,16 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
90
91
|
void handleSearch();
|
|
91
92
|
}, constants_1.SEARCH_DEBOUNCE_MS);
|
|
92
93
|
});
|
|
94
|
+
(0, vue_1.onMounted)(() => {
|
|
95
|
+
var _a;
|
|
96
|
+
(_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
|
97
|
+
});
|
|
93
98
|
return {
|
|
94
99
|
placeholder,
|
|
95
100
|
searchValue,
|
|
96
101
|
searchResults,
|
|
97
102
|
searchLoading,
|
|
103
|
+
inputInstRef,
|
|
98
104
|
handleSearchInput,
|
|
99
105
|
handleSearch,
|
|
100
106
|
handleClose,
|
|
@@ -112,7 +118,7 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
112
118
|
(0, vue_1.h)(button_1.UButton, { text: true, class: `${blockClass}__back`, onClick: this.handleClose }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.ChevronLeftIcon, null))),
|
|
113
119
|
(0, vue_1.h)("div", { class: `${blockClass}__input-wrapper` },
|
|
114
120
|
(0, vue_1.h)(icon_1.UIcon, { size: 20, class: `${blockClass}__input-icon` }, () => (0, vue_1.h)(icons_1.SearchIcon, null)),
|
|
115
|
-
(0, vue_1.h)(input_1.UInput, { value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
|
|
121
|
+
(0, vue_1.h)(input_1.UInput, { ref: "inputInstRef", value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
|
|
116
122
|
if (e.key === 'Enter') {
|
|
117
123
|
void this.handleSearch();
|
|
118
124
|
}
|
|
@@ -200,6 +200,21 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
200
200
|
(0, utils_1.renderBadge)(option, `${blockClass}__badge`)),
|
|
201
201
|
isExpandable && isExpanded && option.children && ((0, vue_1.h)("div", { class: `${mobileMenuClass}__children` }, option.children.map((child, index) => renderGroupItem(child, item.key, index))))));
|
|
202
202
|
};
|
|
203
|
+
const renderSearchAction = () => {
|
|
204
|
+
if (this.$slots.search)
|
|
205
|
+
return this.$slots.search();
|
|
206
|
+
return ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onSearchClick }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.SearchIcon, null))));
|
|
207
|
+
};
|
|
208
|
+
const renderPreviewAction = () => {
|
|
209
|
+
if (this.$slots.preview)
|
|
210
|
+
return this.$slots.preview();
|
|
211
|
+
return ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onPreview }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.EyeIcon, null))));
|
|
212
|
+
};
|
|
213
|
+
const renderLogoutAction = () => {
|
|
214
|
+
if (this.$slots.logout)
|
|
215
|
+
return this.$slots.logout();
|
|
216
|
+
return ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onLogout }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.LogoutIcon, null))));
|
|
217
|
+
};
|
|
203
218
|
const mobileMenuContent = ((0, vue_1.h)("div", { class: mobileMenuClass, style: this.cssVars },
|
|
204
219
|
(0, vue_1.h)("div", { class: `${mobileMenuClass}__header` },
|
|
205
220
|
this.$slots.actions ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions())) : this.showHeaderActions ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__actions` },
|
|
@@ -219,9 +234,9 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
219
234
|
}),
|
|
220
235
|
(0, vue_1.h)(flex_1.UFlex, { size: 24 }, {
|
|
221
236
|
default: () => ((0, vue_1.h)(vue_1.Fragment, null,
|
|
222
|
-
(
|
|
223
|
-
(
|
|
224
|
-
(
|
|
237
|
+
renderSearchAction(),
|
|
238
|
+
renderPreviewAction(),
|
|
239
|
+
renderLogoutAction()))
|
|
225
240
|
}))) : null,
|
|
226
241
|
(0, vue_1.h)(button_1.UButton, { text: true, class: `${mobileMenuClass}__close`, onClick: this.onClose }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.CloseIcon, null)))),
|
|
227
242
|
(0, vue_1.h)("div", { class: `${mobileMenuClass}__body` },
|
package/lib/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "1.12.
|
|
1
|
+
declare const _default: "1.12.22";
|
|
2
2
|
export default _default;
|
package/lib/version.js
CHANGED
package/package.json
CHANGED
package/web-types.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"framework": "vue",
|
|
4
4
|
"name": "@uzum-tech/ui",
|
|
5
|
-
"version": "1.12.
|
|
5
|
+
"version": "1.12.22",
|
|
6
6
|
"js-types-syntax": "typescript",
|
|
7
7
|
"contributions": {
|
|
8
8
|
"html": {
|
|
@@ -18290,6 +18290,21 @@
|
|
|
18290
18290
|
"doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
|
|
18291
18291
|
"description": "Custom actions content for mobile menu header."
|
|
18292
18292
|
},
|
|
18293
|
+
{
|
|
18294
|
+
"name": "mobile-search",
|
|
18295
|
+
"doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
|
|
18296
|
+
"description": "Custom mobile search action button content."
|
|
18297
|
+
},
|
|
18298
|
+
{
|
|
18299
|
+
"name": "mobile-preview",
|
|
18300
|
+
"doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
|
|
18301
|
+
"description": "Custom mobile preview action button content."
|
|
18302
|
+
},
|
|
18303
|
+
{
|
|
18304
|
+
"name": "mobile-logout",
|
|
18305
|
+
"doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
|
|
18306
|
+
"description": "Custom mobile logout action button content."
|
|
18307
|
+
},
|
|
18293
18308
|
{
|
|
18294
18309
|
"name": "mobile-footer",
|
|
18295
18310
|
"doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
|