@mobileaction/action-kit 1.38.1 → 1.38.2-beta.0

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.
@@ -0,0 +1,17 @@
1
+ import { openBlock as l, createElementBlock as o, createElementVNode as t } from "vue";
2
+ const r = {
3
+ xmlns: "http://www.w3.org/2000/svg",
4
+ fill: "currentColor",
5
+ viewBox: "0 0 24 24"
6
+ };
7
+ function n(c, e) {
8
+ return l(), o("svg", r, e[0] || (e[0] = [
9
+ t("path", { d: "M15.712 16.773 7.227 8.288a.755.755 0 0 1 0-1.061c.29-.29.77-.29 1.06 0l8.486 8.485c.29.29.29.771 0 1.06-.29.29-.77.29-1.06 0Z" }, null, -1),
10
+ t("path", { d: "M7.227 16.773a.755.755 0 0 1 0-1.06l8.485-8.486a.756.756 0 0 1 1.061 0c.29.29.29.77 0 1.06l-8.485 8.486a.754.754 0 0 1-1.06 0Z" }, null, -1)
11
+ ]));
12
+ }
13
+ const s = { render: n };
14
+ export {
15
+ s as default,
16
+ n as render
17
+ };
@@ -0,0 +1,16 @@
1
+ import { openBlock as o, createElementBlock as r, createStaticVNode as e } from "vue";
2
+ const n = {
3
+ viewBox: "0 0 24 24",
4
+ fill: "none",
5
+ xmlns: "http://www.w3.org/2000/svg"
6
+ };
7
+ function s(d, t) {
8
+ return o(), r("svg", n, t[0] || (t[0] = [
9
+ e('<path d="M22 8.27V4.23C22 2.64 21.36 2 19.77 2H15.73C14.14 2 13.5 2.64 13.5 4.23V8.27C13.5 9.86 14.14 10.5 15.73 10.5H19.77C21.36 10.5 22 9.86 22 8.27Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 17.5H20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M17.5 20.5V14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>', 5)
10
+ ]));
11
+ }
12
+ const l = { render: s };
13
+ export {
14
+ l as default,
15
+ s as render
16
+ };
@@ -0,0 +1,31 @@
1
+ import { openBlock as r, createElementBlock as t, createElementVNode as l } from "vue";
2
+ const C = {
3
+ viewBox: "0 0 24 24",
4
+ fill: "none",
5
+ xmlns: "http://www.w3.org/2000/svg"
6
+ };
7
+ function o(n, e) {
8
+ return r(), t("svg", C, e[0] || (e[0] = [
9
+ l("path", {
10
+ d: "M20.5 16.75H18.25V14.5C18.25 14.09 17.91 13.75 17.5 13.75C17.09 13.75 16.75 14.09 16.75 14.5V16.75H14.5C14.09 16.75 13.75 17.09 13.75 17.5C13.75 17.91 14.09 18.25 14.5 18.25H16.75V20.5C16.75 20.91 17.09 21.25 17.5 21.25C17.91 21.25 18.25 20.91 18.25 20.5V18.25H20.5C20.91 18.25 21.25 17.91 21.25 17.5C21.25 17.09 20.91 16.75 20.5 16.75Z",
11
+ fill: "currentColor"
12
+ }, null, -1),
13
+ l("path", {
14
+ d: "M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z",
15
+ fill: "currentColor"
16
+ }, null, -1),
17
+ l("path", {
18
+ d: "M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z",
19
+ fill: "currentColor"
20
+ }, null, -1),
21
+ l("path", {
22
+ d: "M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z",
23
+ fill: "currentColor"
24
+ }, null, -1)
25
+ ]));
26
+ }
27
+ const V = { render: o };
28
+ export {
29
+ V as default,
30
+ o as render
31
+ };
@@ -0,0 +1,16 @@
1
+ import { openBlock as r, createElementBlock as e, createStaticVNode as t } from "vue";
2
+ const n = {
3
+ viewBox: "0 0 24 24",
4
+ fill: "none",
5
+ xmlns: "http://www.w3.org/2000/svg"
6
+ };
7
+ function L(i, o) {
8
+ return r(), e("svg", n, o[0] || (o[0] = [
9
+ t('<path d="M3.49994 20.5C4.32994 21.33 5.66994 21.33 6.49994 20.5L19.4999 7.5C20.3299 6.67 20.3299 5.33 19.4999 4.5C18.6699 3.67 17.3299 3.67 16.4999 4.5L3.49994 17.5C2.66994 18.33 2.66994 19.67 3.49994 20.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.01 8.99001L15.01 5.99001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.5 2.44L10 2L9.56 3.5L10 5L8.5 4.56L7 5L7.44 3.5L7 2L8.5 2.44Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.5 8.44L6 8L5.56 9.5L6 11L4.5 10.56L3 11L3.44 9.5L3 8L4.5 8.44Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.5 13.44L21 13L20.56 14.5L21 16L19.5 15.56L18 16L18.44 14.5L18 13L19.5 13.44Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>', 5)
10
+ ]));
11
+ }
12
+ const d = { render: L };
13
+ export {
14
+ d as default,
15
+ L as render
16
+ };
@@ -0,0 +1,16 @@
1
+ import { openBlock as t, createElementBlock as L, createStaticVNode as r } from "vue";
2
+ const o = {
3
+ viewBox: "0 0 24 24",
4
+ fill: "none",
5
+ xmlns: "http://www.w3.org/2000/svg"
6
+ };
7
+ function e(l, C) {
8
+ return t(), L("svg", o, C[0] || (C[0] = [
9
+ r('<path d="M19.5 7.5L18.01 8.99L15.01 5.99L16.5 4.5C16.92 4.08 17.46 3.88 18 3.88C18.54 3.88 19.08 4.08 19.5 4.5C20.33 5.33 20.33 6.67 19.5 7.5Z" fill="currentColor"></path><path d="M17.3099 9.7L6.49994 20.5C5.66994 21.33 4.32994 21.33 3.49994 20.5C2.66994 19.67 2.66994 18.33 3.49994 17.5L14.3099 6.7L17.3099 9.7Z" fill="currentColor"></path><path d="M9.95002 3.5L10.36 2.11C10.4 1.98 10.36 1.84 10.27 1.74C10.18 1.64 10.02 1.6 9.89002 1.64L8.50002 2.05L7.11002 1.64C6.98002 1.6 6.84002 1.64 6.74002 1.73C6.64002 1.83 6.61002 1.97 6.65002 2.1L7.05002 3.5L6.64002 4.89C6.60002 5.02 6.64002 5.16 6.73002 5.26C6.83002 5.36 6.97002 5.39 7.10002 5.35L8.50002 4.95L9.89002 5.36C9.93002 5.37 9.96002 5.38 10 5.38C10.1 5.38 10.19 5.34 10.27 5.27C10.37 5.17 10.4 5.03 10.36 4.9L9.95002 3.5Z" fill="currentColor"></path><path d="M5.95002 9.5L6.36002 8.11C6.40002 7.98 6.36002 7.84 6.27002 7.74C6.17002 7.64 6.03002 7.61 5.90002 7.65L4.50002 8.05L3.11002 7.64C2.98002 7.6 2.84002 7.64 2.74002 7.73C2.64002 7.83 2.61002 7.97 2.65002 8.1L3.05002 9.5L2.64002 10.89C2.60002 11.02 2.64002 11.16 2.73002 11.26C2.83002 11.36 2.97002 11.39 3.10002 11.35L4.49002 10.94L5.88002 11.35C5.91002 11.36 5.95002 11.36 5.99002 11.36C6.09002 11.36 6.18002 11.32 6.26002 11.25C6.36002 11.15 6.39002 11.01 6.35002 10.88L5.95002 9.5Z" fill="currentColor"></path><path d="M20.95 14.5L21.36 13.11C21.4 12.98 21.36 12.84 21.27 12.74C21.17 12.64 21.03 12.61 20.9 12.65L19.51 13.06L18.12 12.65C17.99 12.61 17.85 12.65 17.75 12.74C17.65 12.84 17.62 12.98 17.66 13.11L18.07 14.5L17.66 15.89C17.62 16.02 17.66 16.16 17.75 16.26C17.85 16.36 17.99 16.39 18.12 16.35L19.51 15.94L20.9 16.35C20.93 16.36 20.97 16.36 21.01 16.36C21.11 16.36 21.2 16.32 21.28 16.25C21.38 16.15 21.41 16.01 21.37 15.88L20.95 14.5Z" fill="currentColor"></path>', 5)
10
+ ]));
11
+ }
12
+ const a = { render: e };
13
+ export {
14
+ a as default,
15
+ e as render
16
+ };
@@ -0,0 +1,43 @@
1
+ import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
2
+ const n = {
3
+ viewBox: "0 0 24 24",
4
+ fill: "none",
5
+ xmlns: "http://www.w3.org/2000/svg"
6
+ };
7
+ function l(s, r) {
8
+ return e(), t("svg", n, r[0] || (r[0] = [
9
+ o("path", {
10
+ d: "M9.20001 11.7H14.2",
11
+ stroke: "currentColor",
12
+ "stroke-width": "1.5",
13
+ "stroke-linecap": "round",
14
+ "stroke-linejoin": "round"
15
+ }, null, -1),
16
+ o("path", {
17
+ d: "M11.7 14.2V9.19995",
18
+ stroke: "currentColor",
19
+ "stroke-width": "1.5",
20
+ "stroke-linecap": "round",
21
+ "stroke-linejoin": "round"
22
+ }, null, -1),
23
+ o("path", {
24
+ d: "M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z",
25
+ stroke: "currentColor",
26
+ "stroke-width": "1.5",
27
+ "stroke-linecap": "round",
28
+ "stroke-linejoin": "round"
29
+ }, null, -1),
30
+ o("path", {
31
+ d: "M22 22L20 20",
32
+ stroke: "currentColor",
33
+ "stroke-width": "1.5",
34
+ "stroke-linecap": "round",
35
+ "stroke-linejoin": "round"
36
+ }, null, -1)
37
+ ]));
38
+ }
39
+ const i = { render: l };
40
+ export {
41
+ i as default,
42
+ l as render
43
+ };
@@ -0,0 +1,23 @@
1
+ import { openBlock as l, createElementBlock as r, createElementVNode as o } from "vue";
2
+ const t = {
3
+ viewBox: "0 0 24 24",
4
+ fill: "none",
5
+ xmlns: "http://www.w3.org/2000/svg"
6
+ };
7
+ function C(n, e) {
8
+ return l(), r("svg", t, e[0] || (e[0] = [
9
+ o("path", {
10
+ d: "M21.3 22.0001C21.12 22.0001 20.94 21.9301 20.81 21.8001L18.95 19.9401C18.68 19.6701 18.68 19.2301 18.95 18.9501C19.22 18.6801 19.66 18.6801 19.94 18.9501L21.8 20.8101C22.07 21.0801 22.07 21.5201 21.8 21.8001C21.66 21.9301 21.48 22.0001 21.3 22.0001Z",
11
+ fill: "currentColor"
12
+ }, null, -1),
13
+ o("path", {
14
+ d: "M11.5 2C6.26 2 2 6.26 2 11.5C2 16.74 6.26 21 11.5 21C16.74 21 21 16.74 21 11.5C21 6.26 16.74 2 11.5 2ZM14.2 12.45H12.45V14.2C12.45 14.61 12.11 14.95 11.7 14.95C11.29 14.95 10.95 14.61 10.95 14.2V12.45H9.2C8.79 12.45 8.45 12.11 8.45 11.7C8.45 11.29 8.79 10.95 9.2 10.95H10.95V9.2C10.95 8.79 11.29 8.45 11.7 8.45C12.11 8.45 12.45 8.79 12.45 9.2V10.95H14.2C14.61 10.95 14.95 11.29 14.95 11.7C14.95 12.11 14.61 12.45 14.2 12.45Z",
15
+ fill: "currentColor"
16
+ }, null, -1)
17
+ ]));
18
+ }
19
+ const d = { render: C };
20
+ export {
21
+ d as default,
22
+ C as render
23
+ };
@@ -0,0 +1,28 @@
1
+ import { openBlock as o, createElementBlock as r, createElementVNode as l } from "vue";
2
+ const t = {
3
+ viewBox: "0 0 24 24",
4
+ fill: "none",
5
+ xmlns: "http://www.w3.org/2000/svg"
6
+ };
7
+ function n(C, e) {
8
+ return o(), r("svg", t, e[0] || (e[0] = [
9
+ l("path", {
10
+ opacity: "0.4",
11
+ d: "M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z",
12
+ fill: "currentColor"
13
+ }, null, -1),
14
+ l("path", {
15
+ d: "M21.3 22.0001C21.12 22.0001 20.94 21.9301 20.81 21.8001L18.95 19.9401C18.68 19.6701 18.68 19.2301 18.95 18.9501C19.22 18.6801 19.66 18.6801 19.94 18.9501L21.8 20.8101C22.07 21.0801 22.07 21.5201 21.8 21.8001C21.66 21.9301 21.48 22.0001 21.3 22.0001Z",
16
+ fill: "currentColor"
17
+ }, null, -1),
18
+ l("path", {
19
+ d: "M14.2 10.95H12.45V9.19995C12.45 8.78995 12.11 8.44995 11.7 8.44995C11.29 8.44995 10.95 8.78995 10.95 9.19995V10.95H9.20001C8.79001 10.95 8.45001 11.29 8.45001 11.7C8.45001 12.11 8.79001 12.45 9.20001 12.45H10.95V14.2C10.95 14.61 11.29 14.95 11.7 14.95C12.11 14.95 12.45 14.61 12.45 14.2V12.45H14.2C14.61 12.45 14.95 12.11 14.95 11.7C14.95 11.29 14.61 10.95 14.2 10.95Z",
20
+ fill: "currentColor"
21
+ }, null, -1)
22
+ ]));
23
+ }
24
+ const u = { render: n };
25
+ export {
26
+ u as default,
27
+ n as render
28
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -1,26 +1,145 @@
1
+ export type MaDrawerPlacement = 'left' | 'right';
2
+ export type MaDrawerMarginSize = 'small' | 'medium' | 'none';
1
3
  export interface MaDrawerProps {
2
- placement?: string;
3
- visible?: boolean;
4
- header?: string;
5
- content?: string;
6
- footer?: string;
7
- title?: string;
8
- description?: string;
4
+ /**
5
+ * Controls the visibility of the drawer.
6
+ * @default false
7
+ */
8
+ visible: boolean;
9
+ /**
10
+ * Sets the width of the drawer container.
11
+ */
12
+ width?: string;
13
+ /**
14
+ * Specifies the z-index of the drawer overlay.
15
+ * @default 10
16
+ */
17
+ zIndex?: number;
18
+ /**
19
+ * Determines the placement of the drawer on the screen.
20
+ * @default right
21
+ */
22
+ placement?: MaDrawerPlacement;
23
+ /**
24
+ * Determines whether the drawer should close when the close button is clicked.
25
+ * @default true
26
+ */
9
27
  closable?: boolean;
28
+ /**
29
+ * Determines whether the drawer should close when the overlay is clicked.
30
+ * @default true
31
+ */
32
+ maskClosable?: boolean;
33
+ /**
34
+ * Specifies the height of an external header (e.g., dashboard header) to account for when the drawer is fixed.
35
+ * This allows the drawer to adjust its position or size accordingly.
36
+ */
37
+ headerHeight?: string;
38
+ /**
39
+ * Makes the drawer header sticky (fixed) when scrolling.
40
+ * @default false
41
+ */
42
+ headerSticky?: boolean;
43
+ /**
44
+ * Makes the drawer footer sticky (fixed) when scrolling.
45
+ * @default false
46
+ */
47
+ footerSticky?: boolean;
48
+ /**
49
+ * Sets the margin size of the drawer container.
50
+ * @default small
51
+ */
52
+ marginSize?: MaDrawerMarginSize;
53
+ /**
54
+ * Sets the drawer's title.
55
+ */
56
+ title?: string;
57
+ /**
58
+ * Sets the drawer's subtitle.
59
+ */
60
+ hintText?: string;
10
61
  }
11
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<MaDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
12
- "update:visible": (...args: any[]) => void;
62
+ export interface MaDrawerEvents {
63
+ /**
64
+ * Emitted when the drawer's visibility changes.
65
+ * @param open - Indicates whether the drawer is now open (`true`) or closed (`false`).
66
+ */
67
+ (e: 'update:visible', open: boolean): void;
68
+ /**
69
+ * Emitted after the drawer has fully opened and the opening animation is complete.
70
+ */
71
+ (e: 'opened'): void;
72
+ /**
73
+ * Emitted after the drawer has fully closed and the closing animation is complete.
74
+ */
75
+ (e: 'closed'): void;
76
+ }
77
+ declare function __VLS_template(): {
78
+ attrs: Partial<{}>;
79
+ slots: Readonly<{
80
+ /**
81
+ * Slot for the drawer's header content.
82
+ * Typically used to display the title or controls.
83
+ */
84
+ header(): unknown;
85
+ /**
86
+ * Slot for the drawer's tab menu.
87
+ */
88
+ tabs(): unknown;
89
+ /**
90
+ * Default slot for the main content of the drawer.
91
+ * Used to display the primary information or interactive elements.
92
+ */
93
+ default(): unknown;
94
+ /**
95
+ * Slot for the drawer's footer content.
96
+ * Commonly used for action buttons or supplementary information.
97
+ */
98
+ footer(): unknown;
99
+ }> & {
100
+ /**
101
+ * Slot for the drawer's header content.
102
+ * Typically used to display the title or controls.
103
+ */
104
+ header(): unknown;
105
+ /**
106
+ * Slot for the drawer's tab menu.
107
+ */
108
+ tabs(): unknown;
109
+ /**
110
+ * Default slot for the main content of the drawer.
111
+ * Used to display the primary information or interactive elements.
112
+ */
113
+ default(): unknown;
114
+ /**
115
+ * Slot for the drawer's footer content.
116
+ * Commonly used for action buttons or supplementary information.
117
+ */
118
+ footer(): unknown;
119
+ };
120
+ refs: {};
121
+ rootEl: any;
122
+ };
123
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
124
+ declare const __VLS_component: import("vue").DefineComponent<MaDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
125
+ "update:visible": (open: boolean) => any;
126
+ opened: () => any;
127
+ closed: () => any;
13
128
  }, string, import("vue").PublicProps, Readonly<MaDrawerProps> & Readonly<{
14
- "onUpdate:visible"?: (...args: any[]) => any;
129
+ "onUpdate:visible"?: (open: boolean) => any;
130
+ onOpened?: () => any;
131
+ onClosed?: () => any;
15
132
  }>, {
16
- placement: string;
133
+ placement: MaDrawerPlacement;
17
134
  closable: boolean;
18
135
  visible: boolean;
19
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>, {
20
- header?(_: {}): any;
21
- content?(_: {}): any;
22
- footer?(_: {}): any;
23
- }>;
136
+ maskClosable: boolean;
137
+ zIndex: number;
138
+ headerSticky: boolean;
139
+ footerSticky: boolean;
140
+ marginSize: MaDrawerMarginSize;
141
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
142
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
24
143
  export default _default;
25
144
  type __VLS_WithTemplateSlots<T, S> = T & {
26
145
  new (): {
@@ -0,0 +1,19 @@
1
+ import { Meta, StoryObj } from '@storybook/vue3';
2
+ import MaDrawer from '@/components/drawer/index.vue';
3
+ declare const meta: Meta<typeof MaDrawer>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof MaDrawer>;
6
+ export declare const Default: Story;
7
+ export declare const WithNoTitle: Story;
8
+ export declare const WithoutHeaderAndFooter: Story;
9
+ export declare const WithHintText: Story;
10
+ export declare const WithCustomWidth: Story;
11
+ export declare const WithCustomHeader: Story;
12
+ export declare const WithHeaderAndTabs: Story;
13
+ export declare const WithScrollContent: Story;
14
+ export declare const WithTopOffset: Story;
15
+ export declare const WithStickyHeader: Story;
16
+ export declare const WithStickyFooter: Story;
17
+ export declare const WithStickyHeaderAndFooter: Story;
18
+ export declare const WithAdvancedHeader: Story;
19
+ export declare const WithBodyOverflow: Story;