@uzum-tech/ui 1.11.0 → 1.11.2

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.
@@ -269,7 +269,7 @@ export declare const modalFullscreenProps: {
269
269
  }>>>;
270
270
  };
271
271
  export type ModalFullscreenProps = ExtractPublicPropTypes<typeof modalFullscreenProps>;
272
- declare const _default: import("vue").DefineComponent<{
272
+ declare const ModalFullscreen: import("vue").DefineComponent<{
273
273
  to: PropType<string | HTMLElement>;
274
274
  show: BooleanConstructor;
275
275
  zIndex: NumberConstructor;
@@ -950,4 +950,4 @@ declare const _default: import("vue").DefineComponent<{
950
950
  blockScroll: boolean;
951
951
  closeOnEsc: boolean;
952
952
  }, {}>;
953
- export default _default;
953
+ export default ModalFullscreen;
@@ -1,5 +1,5 @@
1
1
  import { zindexable } from 'vdirs';
2
- import { h, ref, vShow, toRef, watch, computed, nextTick, Transition, withDirectives, defineComponent } from 'vue';
2
+ import { h, ref, vShow, toRef, watch, computed, nextTick, Transition, withDirectives, defineComponent, Fragment } from 'vue';
3
3
  import { VFocusTrap, VLazyTeleport } from 'vueuc';
4
4
  import { useClicked, useClickPosition, useIsMounted } from 'vooks';
5
5
  import { call, eventEffectNotPerformed, resolveWrappedSlot, useIsComposing } from '../../_utils';
@@ -33,7 +33,7 @@ export const modalFullscreenProps = Object.assign(Object.assign({}, useTheme.pro
33
33
  },
34
34
  // events
35
35
  onEsc: Function, onClose: Function, onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array] });
36
- export default defineComponent({
36
+ const ModalFullscreen = defineComponent({
37
37
  name: 'ModalFullscreen',
38
38
  inheritAttrs: false,
39
39
  props: modalFullscreenProps,
@@ -188,42 +188,25 @@ export default defineComponent({
188
188
  };
189
189
  },
190
190
  render() {
191
- const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc, handleCloseClick } = this;
192
- const headerLeftSlot = resolveWrappedSlot(this.$slots.headerLeft, (children) => children);
193
- const bodySlot = resolveWrappedSlot(this.$slots.body || this.$slots.default, (children) => children);
194
- const footerSlot = resolveWrappedSlot(this.$slots.footer, (children) => children);
191
+ const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc } = this;
195
192
  return (h(VLazyTeleport, { to: this.to, show: this.show }, {
196
193
  default: () => {
197
194
  var _a;
198
195
  (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
199
196
  return withDirectives(h("div", { role: "none", ref: "containerRef", class: [
200
- `${mergedClsPrefix}-modal-container`,
197
+ `${mergedClsPrefix}-modal-fullscreen-container`,
201
198
  this.themeClass,
202
199
  this.namespace
203
200
  ], style: this.cssVars }, this.displayDirective === 'show' || isDisplayed || this.show
204
- ? withDirectives(h("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
205
- h(UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
201
+ ? withDirectives(h("div", { role: "none", class: `${mergedClsPrefix}-modal-fullscreen-body-wrapper` },
202
+ h(UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-fullscreen-scroll-content` }, {
206
203
  default: () => (h(VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: handleEsc, autoFocus: this.autoFocus }, {
207
204
  default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
208
205
  default: () => {
209
206
  const dirs = [
210
207
  [vShow, this.show]
211
208
  ];
212
- return withDirectives(h("div", { class: `${mergedClsPrefix}-modal` },
213
- h(UFlex, { vertical: true, size: [0, 0], class: [
214
- `${mergedClsPrefix}-modal-content`,
215
- this.fixed &&
216
- `${mergedClsPrefix}-modal-content--fixed`
217
- ] },
218
- h(UFlex, { align: "center", size: [0, 0], wrap: false, class: `${mergedClsPrefix}-modal-header` },
219
- h("div", { class: `${mergedClsPrefix}-modal-header__left` }, headerLeftSlot),
220
- h("div", { class: `${mergedClsPrefix}-modal-header__center` },
221
- this.title ? (h(UText, { variant: "body-l-semi-bold", class: `${mergedClsPrefix}-modal-header__title` }, this.title)) : null,
222
- this.subtitle ? (h(UText, { variant: "body-m-medium", class: `${mergedClsPrefix}-modal-header__subtitle` }, this.subtitle)) : null),
223
- h("div", { class: `${mergedClsPrefix}-modal-header__right` },
224
- h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-modal__close`, onClick: handleCloseClick }))),
225
- h("div", { class: `${mergedClsPrefix}-modal-body` }, bodySlot),
226
- h("div", { class: `${mergedClsPrefix}-modal-footer` }, footerSlot))), dirs);
209
+ return withDirectives(modalFullscreenContent(this), dirs);
227
210
  }
228
211
  }))
229
212
  }))
@@ -248,3 +231,27 @@ export default defineComponent({
248
231
  }));
249
232
  }
250
233
  });
234
+ export default ModalFullscreen;
235
+ const modalFullscreenContent = (_) => {
236
+ const headerLeftSlot = resolveWrappedSlot(_.$slots.headerLeft, (children) => children);
237
+ const bodySlot = resolveWrappedSlot(_.$slots.body || _.$slots.default, (children) => children);
238
+ const footerSlot = resolveWrappedSlot(_.$slots.footer, (children) => children);
239
+ return (h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen` },
240
+ h(UFlex, { vertical: true, size: [0, 0], class: [
241
+ `${_.mergedClsPrefix}-modal-fullscreen-content`,
242
+ _.fixed && `${_.mergedClsPrefix}-modal-fullscreen-content--fixed`
243
+ ] }, {
244
+ default: () => (h(Fragment, null,
245
+ h(UFlex, { align: "center", size: [0, 0], wrap: false, class: `${_.mergedClsPrefix}-modal-fullscreen-header` }, {
246
+ default: () => (h(Fragment, null,
247
+ h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__left` }, headerLeftSlot),
248
+ h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__center` },
249
+ _.title ? (h(UText, { variant: "body-l-semi-bold", class: `${_.mergedClsPrefix}-modal-fullscreen-header__title` }, _.title)) : null,
250
+ _.subtitle ? (h(UText, { variant: "body-m-medium", class: `${_.mergedClsPrefix}-modal-fullscreen-header__subtitle` }, _.subtitle)) : null),
251
+ h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__right` },
252
+ h(UBaseClose, { clsPrefix: _.mergedClsPrefix, class: `${_.mergedClsPrefix}-modal-fullscreen__close`, onClick: _.handleCloseClick }))))
253
+ }),
254
+ h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-body` }, bodySlot),
255
+ h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-footer` }, footerSlot)))
256
+ })));
257
+ };
@@ -19,24 +19,24 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
19
19
  // --u-header-bg
20
20
  // --u-body-bg
21
21
  // --u-footer-bg
22
- export default c([cB('modal-container', `
22
+ export default c([cB('modal-fullscreen-container', `
23
23
  position: fixed;
24
24
  left: 0;
25
25
  top: 0;
26
26
  height: 0;
27
27
  width: 0;
28
28
  display: flex;
29
- `), cB('modal-body-wrapper', `
29
+ `), cB('modal-fullscreen-body-wrapper', `
30
30
  position: fixed;
31
31
  left: 0;
32
32
  right: 0;
33
33
  top: 0;
34
34
  bottom: 0;
35
35
  overflow: visible;
36
- `, [cB('modal-scroll-content', `
36
+ `), cB('modal-fullscreen-scroll-content', `
37
37
  min-height: 100%;
38
38
  position: relative;
39
- `)]), cB('modal', `
39
+ `), cB('modal-fullscreen', `
40
40
  position: relative;
41
41
  color: var(--u-text-color);
42
42
  margin: auto;
@@ -54,22 +54,22 @@ export default c([cB('modal-container', `
54
54
  background-color .3s var(--u-bezier),
55
55
  color .3s var(--u-bezier);
56
56
  z-index: 1;
57
- `)]), cB('modal-content', `
57
+ `)]), cB('modal-fullscreen-content', `
58
58
  height: 100%;
59
- `, [cM('fixed', '', [cB('modal-header', `
59
+ `, [cM('fixed', '', [cB('modal-fullscreen-header', `
60
60
  flex: 0 0 auto;
61
- `), cB('modal-body', `
61
+ `), cB('modal-fullscreen-body', `
62
62
  flex: 1 1 100%;
63
- `), cB('modal-footer', `
63
+ `), cB('modal-fullscreen-footer', `
64
64
  flex: 0 0 auto;
65
- `)])]), cB('modal-body', `
65
+ `)])]), cB('modal-fullscreen-body', `
66
66
  padding: var(--u-body-padding);
67
67
  background: var(--u-body-bg);
68
68
  overflow-y: auto;
69
- `), cB('modal-footer', `
69
+ `), cB('modal-fullscreen-footer', `
70
70
  padding: var(--u-footer-padding);
71
71
  background: var(--u-footer-bg);
72
- `), cB('modal-header', `
72
+ `), cB('modal-fullscreen-header', `
73
73
  padding: var(--u-header-padding);
74
74
  background: var(--u-header-bg);
75
75
  `, [cE('left', `
package/es/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "1.11.0";
1
+ declare const _default: "1.11.2";
2
2
  export default _default;
package/es/version.js CHANGED
@@ -1 +1 @@
1
- export default '1.11.0';
1
+ export default '1.11.2';
@@ -269,7 +269,7 @@ export declare const modalFullscreenProps: {
269
269
  }>>>;
270
270
  };
271
271
  export type ModalFullscreenProps = ExtractPublicPropTypes<typeof modalFullscreenProps>;
272
- declare const _default: import("vue").DefineComponent<{
272
+ declare const ModalFullscreen: import("vue").DefineComponent<{
273
273
  to: PropType<string | HTMLElement>;
274
274
  show: BooleanConstructor;
275
275
  zIndex: NumberConstructor;
@@ -950,4 +950,4 @@ declare const _default: import("vue").DefineComponent<{
950
950
  blockScroll: boolean;
951
951
  closeOnEsc: boolean;
952
952
  }, {}>;
953
- export default _default;
953
+ export default ModalFullscreen;
@@ -39,7 +39,7 @@ exports.modalFullscreenProps = Object.assign(Object.assign({}, _mixins_1.useThem
39
39
  },
40
40
  // events
41
41
  onEsc: Function, onClose: Function, onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array] });
42
- exports.default = (0, vue_1.defineComponent)({
42
+ const ModalFullscreen = (0, vue_1.defineComponent)({
43
43
  name: 'ModalFullscreen',
44
44
  inheritAttrs: false,
45
45
  props: exports.modalFullscreenProps,
@@ -194,42 +194,25 @@ exports.default = (0, vue_1.defineComponent)({
194
194
  };
195
195
  },
196
196
  render() {
197
- const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc, handleCloseClick } = this;
198
- const headerLeftSlot = (0, _utils_1.resolveWrappedSlot)(this.$slots.headerLeft, (children) => children);
199
- const bodySlot = (0, _utils_1.resolveWrappedSlot)(this.$slots.body || this.$slots.default, (children) => children);
200
- const footerSlot = (0, _utils_1.resolveWrappedSlot)(this.$slots.footer, (children) => children);
197
+ const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc } = this;
201
198
  return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
202
199
  default: () => {
203
200
  var _a;
204
201
  (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
205
202
  return (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [
206
- `${mergedClsPrefix}-modal-container`,
203
+ `${mergedClsPrefix}-modal-fullscreen-container`,
207
204
  this.themeClass,
208
205
  this.namespace
209
206
  ], style: this.cssVars }, this.displayDirective === 'show' || isDisplayed || this.show
210
- ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
211
- (0, vue_1.h)(_internal_1.UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
207
+ ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-fullscreen-body-wrapper` },
208
+ (0, vue_1.h)(_internal_1.UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-fullscreen-scroll-content` }, {
212
209
  default: () => ((0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: handleEsc, autoFocus: this.autoFocus }, {
213
210
  default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
214
211
  default: () => {
215
212
  const dirs = [
216
213
  [vue_1.vShow, this.show]
217
214
  ];
218
- return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal` },
219
- (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: [0, 0], class: [
220
- `${mergedClsPrefix}-modal-content`,
221
- this.fixed &&
222
- `${mergedClsPrefix}-modal-content--fixed`
223
- ] },
224
- (0, vue_1.h)(flex_1.UFlex, { align: "center", size: [0, 0], wrap: false, class: `${mergedClsPrefix}-modal-header` },
225
- (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-header__left` }, headerLeftSlot),
226
- (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-header__center` },
227
- this.title ? ((0, vue_1.h)(typography_1.UText, { variant: "body-l-semi-bold", class: `${mergedClsPrefix}-modal-header__title` }, this.title)) : null,
228
- this.subtitle ? ((0, vue_1.h)(typography_1.UText, { variant: "body-m-medium", class: `${mergedClsPrefix}-modal-header__subtitle` }, this.subtitle)) : null),
229
- (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-header__right` },
230
- (0, vue_1.h)(_internal_1.UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-modal__close`, onClick: handleCloseClick }))),
231
- (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-body` }, bodySlot),
232
- (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-footer` }, footerSlot))), dirs);
215
+ return (0, vue_1.withDirectives)(modalFullscreenContent(this), dirs);
233
216
  }
234
217
  }))
235
218
  }))
@@ -254,3 +237,27 @@ exports.default = (0, vue_1.defineComponent)({
254
237
  }));
255
238
  }
256
239
  });
240
+ exports.default = ModalFullscreen;
241
+ const modalFullscreenContent = (_) => {
242
+ const headerLeftSlot = (0, _utils_1.resolveWrappedSlot)(_.$slots.headerLeft, (children) => children);
243
+ const bodySlot = (0, _utils_1.resolveWrappedSlot)(_.$slots.body || _.$slots.default, (children) => children);
244
+ const footerSlot = (0, _utils_1.resolveWrappedSlot)(_.$slots.footer, (children) => children);
245
+ return ((0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen` },
246
+ (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: [0, 0], class: [
247
+ `${_.mergedClsPrefix}-modal-fullscreen-content`,
248
+ _.fixed && `${_.mergedClsPrefix}-modal-fullscreen-content--fixed`
249
+ ] }, {
250
+ default: () => ((0, vue_1.h)(vue_1.Fragment, null,
251
+ (0, vue_1.h)(flex_1.UFlex, { align: "center", size: [0, 0], wrap: false, class: `${_.mergedClsPrefix}-modal-fullscreen-header` }, {
252
+ default: () => ((0, vue_1.h)(vue_1.Fragment, null,
253
+ (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__left` }, headerLeftSlot),
254
+ (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__center` },
255
+ _.title ? ((0, vue_1.h)(typography_1.UText, { variant: "body-l-semi-bold", class: `${_.mergedClsPrefix}-modal-fullscreen-header__title` }, _.title)) : null,
256
+ _.subtitle ? ((0, vue_1.h)(typography_1.UText, { variant: "body-m-medium", class: `${_.mergedClsPrefix}-modal-fullscreen-header__subtitle` }, _.subtitle)) : null),
257
+ (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__right` },
258
+ (0, vue_1.h)(_internal_1.UBaseClose, { clsPrefix: _.mergedClsPrefix, class: `${_.mergedClsPrefix}-modal-fullscreen__close`, onClick: _.handleCloseClick }))))
259
+ }),
260
+ (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-body` }, bodySlot),
261
+ (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-footer` }, footerSlot)))
262
+ })));
263
+ };
@@ -24,24 +24,24 @@ const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-sc
24
24
  // --u-header-bg
25
25
  // --u-body-bg
26
26
  // --u-footer-bg
27
- exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
27
+ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-fullscreen-container', `
28
28
  position: fixed;
29
29
  left: 0;
30
30
  top: 0;
31
31
  height: 0;
32
32
  width: 0;
33
33
  display: flex;
34
- `), (0, cssr_1.cB)('modal-body-wrapper', `
34
+ `), (0, cssr_1.cB)('modal-fullscreen-body-wrapper', `
35
35
  position: fixed;
36
36
  left: 0;
37
37
  right: 0;
38
38
  top: 0;
39
39
  bottom: 0;
40
40
  overflow: visible;
41
- `, [(0, cssr_1.cB)('modal-scroll-content', `
41
+ `), (0, cssr_1.cB)('modal-fullscreen-scroll-content', `
42
42
  min-height: 100%;
43
43
  position: relative;
44
- `)]), (0, cssr_1.cB)('modal', `
44
+ `), (0, cssr_1.cB)('modal-fullscreen', `
45
45
  position: relative;
46
46
  color: var(--u-text-color);
47
47
  margin: auto;
@@ -59,22 +59,22 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
59
59
  background-color .3s var(--u-bezier),
60
60
  color .3s var(--u-bezier);
61
61
  z-index: 1;
62
- `)]), (0, cssr_1.cB)('modal-content', `
62
+ `)]), (0, cssr_1.cB)('modal-fullscreen-content', `
63
63
  height: 100%;
64
- `, [(0, cssr_1.cM)('fixed', '', [(0, cssr_1.cB)('modal-header', `
64
+ `, [(0, cssr_1.cM)('fixed', '', [(0, cssr_1.cB)('modal-fullscreen-header', `
65
65
  flex: 0 0 auto;
66
- `), (0, cssr_1.cB)('modal-body', `
66
+ `), (0, cssr_1.cB)('modal-fullscreen-body', `
67
67
  flex: 1 1 100%;
68
- `), (0, cssr_1.cB)('modal-footer', `
68
+ `), (0, cssr_1.cB)('modal-fullscreen-footer', `
69
69
  flex: 0 0 auto;
70
- `)])]), (0, cssr_1.cB)('modal-body', `
70
+ `)])]), (0, cssr_1.cB)('modal-fullscreen-body', `
71
71
  padding: var(--u-body-padding);
72
72
  background: var(--u-body-bg);
73
73
  overflow-y: auto;
74
- `), (0, cssr_1.cB)('modal-footer', `
74
+ `), (0, cssr_1.cB)('modal-fullscreen-footer', `
75
75
  padding: var(--u-footer-padding);
76
76
  background: var(--u-footer-bg);
77
- `), (0, cssr_1.cB)('modal-header', `
77
+ `), (0, cssr_1.cB)('modal-fullscreen-header', `
78
78
  padding: var(--u-header-padding);
79
79
  background: var(--u-header-bg);
80
80
  `, [(0, cssr_1.cE)('left', `
package/lib/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "1.11.0";
1
+ declare const _default: "1.11.2";
2
2
  export default _default;
package/lib/version.js CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = '1.11.0';
3
+ exports.default = '1.11.2';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uzum-tech/ui",
3
- "version": "1.11.0",
3
+ "version": "1.11.2",
4
4
  "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",