@bagelink/vue 0.0.352 → 0.0.354
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/components/layout/TabsNav.vue.d.ts.map +1 -1
- package/dist/index.cjs +2 -1
- package/dist/index.mjs +2 -1
- package/dist/plugins/modal.d.ts +1 -1
- package/dist/plugins/modal.d.ts.map +1 -1
- package/dist/style.css +21 -21
- package/package.json +1 -1
- package/src/components/layout/TabsNav.vue +32 -24
- package/src/plugins/modal.ts +25 -25
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsNav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsNav.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabsNav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsNav.vue"],"names":[],"mappings":"AAcA;AAEA,OAAO,EAAE,KAAK,GAAG,EAAQ,MAAM,eAAe,CAAC;;;UA0IxC,GAAG,EAAE;;;WAGJ,MAAM;;;UAHP,GAAG,EAAE;;;WAGJ,MAAM;;AAVd,wBAYG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -45806,6 +45806,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
45806
45806
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
|
|
45807
45807
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab, i2) => {
|
|
45808
45808
|
return vue.openBlock(), vue.createElementBlock("button", {
|
|
45809
|
+
type: "button",
|
|
45809
45810
|
class: vue.normalizeClass([{ active: isActive2(tab) }, "bgl_tab"]),
|
|
45810
45811
|
onClick: ($event) => selectTab(tab),
|
|
45811
45812
|
key: i2
|
|
@@ -45821,7 +45822,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
45821
45822
|
};
|
|
45822
45823
|
}
|
|
45823
45824
|
});
|
|
45824
|
-
const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
45825
|
+
const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0774360e"]]);
|
|
45825
45826
|
const _hoisted_1$1 = { key: 0 };
|
|
45826
45827
|
const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
45827
45828
|
__name: "TabsBody",
|
package/dist/index.mjs
CHANGED
|
@@ -45804,6 +45804,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
45804
45804
|
return openBlock(), createElementBlock("div", _hoisted_1$2, [
|
|
45805
45805
|
(openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.tabs, (tab, i2) => {
|
|
45806
45806
|
return openBlock(), createElementBlock("button", {
|
|
45807
|
+
type: "button",
|
|
45807
45808
|
class: normalizeClass([{ active: isActive2(tab) }, "bgl_tab"]),
|
|
45808
45809
|
onClick: ($event) => selectTab(tab),
|
|
45809
45810
|
key: i2
|
|
@@ -45819,7 +45820,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
45819
45820
|
};
|
|
45820
45821
|
}
|
|
45821
45822
|
});
|
|
45822
|
-
const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
45823
|
+
const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0774360e"]]);
|
|
45823
45824
|
const _hoisted_1$1 = { key: 0 };
|
|
45824
45825
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
45825
45826
|
__name: "TabsBody",
|
package/dist/plugins/modal.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ export interface ModalFormOptions {
|
|
|
15
15
|
visible?: boolean;
|
|
16
16
|
dismissable?: boolean;
|
|
17
17
|
schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT;
|
|
18
|
-
onSubmit?: (formData: any) =>
|
|
18
|
+
onSubmit?: (formData: any) => any;
|
|
19
19
|
onDelete?: (id: string) => Promise<void>;
|
|
20
20
|
onError?: ((err: any) => void);
|
|
21
21
|
modelValue?: Record<string, any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAY;
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC7C;AACD,MAAM,WAAW,uBAAuB;IACvC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC9B;AACD,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,uBAAuB,GAAG,SAAS,CAAC;IAC/G,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAyCzB,CAAC"}
|
package/dist/style.css
CHANGED
|
@@ -1802,31 +1802,31 @@ img.preview[data-v-1be8d7b1] {
|
|
|
1802
1802
|
color: var(--bgl-primary) !important;
|
|
1803
1803
|
}
|
|
1804
1804
|
|
|
1805
|
-
.bgl_tab[data-v-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1805
|
+
.bgl_tab[data-v-0774360e] {
|
|
1806
|
+
border: none;
|
|
1807
|
+
border-bottom: 2px solid var(--border-color);
|
|
1808
|
+
background: transparent;
|
|
1809
|
+
font-size: var(--input-font-size);
|
|
1810
|
+
font-family: inherit;
|
|
1811
|
+
cursor: pointer;
|
|
1812
|
+
transition: var(--bgl-transition);
|
|
1813
|
+
padding-inline-start: calc(var(--btn-padding) / 2);
|
|
1814
|
+
padding-inline-end: calc(var(--btn-padding) / 2);
|
|
1815
|
+
padding-bottom: calc(var(--btn-padding) / 4);
|
|
1816
1816
|
}
|
|
1817
|
-
.bgl_tab.currentTab[data-v-
|
|
1818
|
-
|
|
1817
|
+
.bgl_tab.currentTab[data-v-0774360e] {
|
|
1818
|
+
border-bottom: 2px solid var(--primary-color);
|
|
1819
1819
|
}
|
|
1820
|
-
.bgl_tab.active[data-v-
|
|
1821
|
-
|
|
1822
|
-
|
|
1820
|
+
.bgl_tab.active[data-v-0774360e] {
|
|
1821
|
+
color: var(--bgl-primary);
|
|
1822
|
+
border-bottom: 2px solid var(--bgl-primary);
|
|
1823
1823
|
}
|
|
1824
|
-
.bgl_tab[data-v-
|
|
1825
|
-
|
|
1824
|
+
.bgl_tab[data-v-0774360e]:hover {
|
|
1825
|
+
color: var(--bgl-primary);
|
|
1826
1826
|
}
|
|
1827
|
-
.bgl_tab[data-v-
|
|
1828
|
-
|
|
1829
|
-
|
|
1827
|
+
.bgl_tab[data-v-0774360e]:active {
|
|
1828
|
+
-webkit-filter: brightness(70%);
|
|
1829
|
+
filter: brightness(70%);
|
|
1830
1830
|
}
|
|
1831
1831
|
|
|
1832
1832
|
.tab[data-v-fd61196d] {
|
package/package.json
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="grid auto-flow-columns fit-content">
|
|
3
|
-
<button
|
|
3
|
+
<button
|
|
4
|
+
type="button"
|
|
5
|
+
:class="{ active: isActive(tab) }"
|
|
6
|
+
@click="selectTab(tab)"
|
|
7
|
+
class="bgl_tab"
|
|
8
|
+
v-for="(tab, i) in tabs"
|
|
9
|
+
:key="i">
|
|
4
10
|
<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
|
|
5
11
|
{{ tabLabel(tab) }}
|
|
6
12
|
</button>
|
|
@@ -12,15 +18,18 @@ import { type Tab, Icon } from '@bagelink/vue';
|
|
|
12
18
|
import { useTabs } from './tabsManager';
|
|
13
19
|
|
|
14
20
|
const props = defineProps<{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
21
|
+
title?: string;
|
|
22
|
+
tabs: Tab[];
|
|
23
|
+
modelValue?: string;
|
|
24
|
+
sideTabs?: boolean;
|
|
25
|
+
group: string;
|
|
20
26
|
}>();
|
|
21
27
|
|
|
22
28
|
const { currentTab } = useTabs(props.group);
|
|
23
|
-
currentTab.value =
|
|
29
|
+
currentTab.value =
|
|
30
|
+
props.modelValue || typeof props.tabs[0] === 'string'
|
|
31
|
+
? props.tabs[0]
|
|
32
|
+
: props.tabs[0].id;
|
|
24
33
|
const selectTab = (tab: Tab) => {
|
|
25
34
|
currentTab.value = typeof tab === 'string' ? tab : tab.id;
|
|
26
35
|
};
|
|
@@ -37,34 +46,33 @@ const tabLabel = (tab: Tab) => {
|
|
|
37
46
|
|
|
38
47
|
<style scoped>
|
|
39
48
|
.bgl_tab {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
border: none;
|
|
50
|
+
border-bottom: 2px solid var(--border-color);
|
|
51
|
+
background: transparent;
|
|
52
|
+
font-size: var(--input-font-size);
|
|
53
|
+
font-family: inherit;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
transition: var(--bgl-transition);
|
|
56
|
+
padding-inline-start: calc(var(--btn-padding) / 2);
|
|
57
|
+
padding-inline-end: calc(var(--btn-padding) / 2);
|
|
58
|
+
padding-bottom: calc(var(--btn-padding) / 4);
|
|
51
59
|
}
|
|
52
60
|
|
|
53
61
|
.bgl_tab.currentTab {
|
|
54
|
-
|
|
62
|
+
border-bottom: 2px solid var(--primary-color);
|
|
55
63
|
}
|
|
56
64
|
|
|
57
65
|
.bgl_tab.active {
|
|
58
|
-
|
|
59
|
-
|
|
66
|
+
color: var(--bgl-primary);
|
|
67
|
+
border-bottom: 2px solid var(--bgl-primary);
|
|
60
68
|
}
|
|
61
69
|
|
|
62
70
|
.bgl_tab:hover {
|
|
63
|
-
|
|
71
|
+
color: var(--bgl-primary);
|
|
64
72
|
}
|
|
65
73
|
|
|
66
74
|
.bgl_tab:active {
|
|
67
|
-
|
|
68
|
-
|
|
75
|
+
-webkit-filter: brightness(70%);
|
|
76
|
+
filter: brightness(70%);
|
|
69
77
|
}
|
|
70
78
|
</style>
|
package/src/plugins/modal.ts
CHANGED
|
@@ -6,41 +6,41 @@ import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
|
|
|
6
6
|
import { Modal, ModalForm } from '@bagelink/vue';
|
|
7
7
|
|
|
8
8
|
export interface ModalOptions {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
title?: string;
|
|
10
|
+
dismissable?: boolean;
|
|
11
|
+
side?: boolean;
|
|
12
|
+
actions?: BtnOptions[];
|
|
13
|
+
class?: string;
|
|
14
|
+
visible?: boolean;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export interface ModalFormOptions {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
side?: boolean;
|
|
19
|
+
title?: string;
|
|
20
|
+
visible?: boolean;
|
|
21
|
+
dismissable?: boolean;
|
|
22
|
+
schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
|
|
23
|
+
onSubmit?: (formData: any) => any;
|
|
24
|
+
onDelete?: (id: string) => Promise<void>;
|
|
25
|
+
onError?: ((err: any) => void);
|
|
26
|
+
modelValue?: Record<string, any>;
|
|
27
|
+
'onUpdate:modelValue'?: (val: any) => void;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
export interface ModalComponentProps {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
componentSlots: Record<string, any>,
|
|
32
|
+
modalType: 'modal' | 'modalForm',
|
|
33
|
+
modalOptions: ModalOptions | ModalFormOptions
|
|
34
34
|
}
|
|
35
35
|
export interface ModalFormComponentProps {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
componentSlots: Record<string, any>,
|
|
37
|
+
modalType: 'modalForm',
|
|
38
|
+
modalOptions: ModalFormOptions
|
|
39
39
|
}
|
|
40
40
|
export interface ModalApi {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
|
|
42
|
+
showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
|
|
43
|
+
hideModal: (index?: number) => void;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');
|