@citizenplane/pimp 18.9.20 → 18.9.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/components/CpBottomSheet.vue.d.ts +6 -0
- package/dist/components/CpBottomSheet.vue.d.ts.map +1 -1
- package/dist/components/CpDynamicDialog.vue.d.ts +3 -0
- package/dist/components/CpDynamicDialog.vue.d.ts.map +1 -1
- package/dist/pimp.es.js +49 -22
- package/dist/pimp.umd.js +2 -2
- package/package.json +1 -1
- package/src/components/CpBottomSheet.vue +36 -4
- package/src/components/CpDynamicDialog.vue +14 -2
- package/src/stories/CpBottomSheet.stories.ts +24 -0
- package/src/stories/CpDynamicDialog.stories.ts +5 -0
|
@@ -2,7 +2,10 @@ interface Props {
|
|
|
2
2
|
animationDuration?: number;
|
|
3
3
|
canBackdropClose?: boolean;
|
|
4
4
|
canSwipeClose?: boolean;
|
|
5
|
+
expandOnContentDrag?: boolean;
|
|
6
|
+
halfAndExpand?: boolean;
|
|
5
7
|
preventClose?: boolean;
|
|
8
|
+
snapPoints?: Array<number | `${number}%`>;
|
|
6
9
|
swipeCloseThreshold?: string;
|
|
7
10
|
}
|
|
8
11
|
type __VLS_Props = Props;
|
|
@@ -31,6 +34,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
|
|
|
31
34
|
"onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
|
|
32
35
|
}>, {
|
|
33
36
|
animationDuration: number;
|
|
37
|
+
expandOnContentDrag: boolean;
|
|
38
|
+
halfAndExpand: boolean;
|
|
39
|
+
snapPoints: Array<number | `${number}%`>;
|
|
34
40
|
swipeCloseThreshold: string;
|
|
35
41
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
36
42
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CpBottomSheet.vue.d.ts","sourceRoot":"","sources":["../../src/components/CpBottomSheet.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CpBottomSheet.vue.d.ts","sourceRoot":"","sources":["../../src/components/CpBottomSheet.vue"],"names":[],"mappings":"AAwBA;AAoKA,UAAU,KAAK;IACb,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC,CAAA;IACzC,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,KAAK,WAAW,GAAG,KAAK,CAAC;AA4EzB,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoEF,QAAA,IAAwB,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACxF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA0B/C,QAAA,MAAM,eAAe;;;;;;;;;;;;;uBA1LC,MAAM;yBAGJ,OAAO;mBACb,OAAO;gBAEV,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;yBACnB,MAAM;6EA4L5B,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CpDynamicDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/CpDynamicDialog.vue"],"names":[],"mappings":"AA8BA;
|
|
1
|
+
{"version":3,"file":"CpDynamicDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/CpDynamicDialog.vue"],"names":[],"mappings":"AA8BA;AAkJA,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,KAAK,WAAW,GAAG,KAAK,CAAC;AA2EzB,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA2FF,QAAA,IAAyB,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACnI,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC9C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA0B/C,QAAA,MAAM,eAAe;;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
package/dist/pimp.es.js
CHANGED
|
@@ -24939,39 +24939,57 @@ var VO = ["data-vsbs-shadow", "data-vsbs-sheet-show"], HO = /* @__PURE__ */ ((e,
|
|
|
24939
24939
|
animationDuration: { default: 300 },
|
|
24940
24940
|
canBackdropClose: { type: Boolean },
|
|
24941
24941
|
canSwipeClose: { type: Boolean },
|
|
24942
|
+
expandOnContentDrag: {
|
|
24943
|
+
type: Boolean,
|
|
24944
|
+
default: !0
|
|
24945
|
+
},
|
|
24946
|
+
halfAndExpand: {
|
|
24947
|
+
type: Boolean,
|
|
24948
|
+
default: !1
|
|
24949
|
+
},
|
|
24942
24950
|
preventClose: { type: Boolean },
|
|
24943
|
-
|
|
24951
|
+
snapPoints: { default: () => [] },
|
|
24952
|
+
swipeCloseThreshold: { default: "40%" }
|
|
24944
24953
|
}, {
|
|
24945
24954
|
modelValue: { type: Boolean },
|
|
24946
24955
|
modelModifiers: {}
|
|
24947
24956
|
}),
|
|
24948
24957
|
emits: /*@__PURE__*/ S(["close", "open"], ["update:modelValue"]),
|
|
24949
24958
|
setup(e, { expose: t, emit: n }) {
|
|
24950
|
-
let r = e,
|
|
24951
|
-
if (
|
|
24952
|
-
|
|
24959
|
+
let r = e, a = n, s = me("bottomSheetRef"), c = fe(e, "modelValue"), u = i(() => r.snapPoints?.length ? r.snapPoints : r.halfAndExpand ? ["50%", "100%"] : void 0), d = !1, f = () => {
|
|
24960
|
+
if (d) {
|
|
24961
|
+
d = !1;
|
|
24953
24962
|
return;
|
|
24954
24963
|
}
|
|
24955
|
-
|
|
24964
|
+
if (c.value) {
|
|
24965
|
+
s.value?.open();
|
|
24966
|
+
return;
|
|
24967
|
+
}
|
|
24968
|
+
s.value?.close();
|
|
24956
24969
|
};
|
|
24957
|
-
B(
|
|
24958
|
-
let
|
|
24959
|
-
r.preventClose
|
|
24970
|
+
B(c, () => f());
|
|
24971
|
+
let p = () => a("open"), m = () => {
|
|
24972
|
+
if (r.preventClose) {
|
|
24973
|
+
c.value && s.value?.open();
|
|
24974
|
+
return;
|
|
24975
|
+
}
|
|
24976
|
+
c.value &&= (d = !0, !1), a("close");
|
|
24960
24977
|
};
|
|
24961
24978
|
return t({
|
|
24962
|
-
open: () =>
|
|
24963
|
-
close: () =>
|
|
24979
|
+
open: () => s.value?.open(),
|
|
24980
|
+
close: () => s.value?.close()
|
|
24964
24981
|
}), (t, n) => (j(), o(R(HO), {
|
|
24965
24982
|
ref_key: "bottomSheetRef",
|
|
24966
|
-
ref:
|
|
24983
|
+
ref: s,
|
|
24967
24984
|
"can-backdrop-close": e.canBackdropClose,
|
|
24968
24985
|
"can-swipe-close": e.canSwipeClose,
|
|
24969
24986
|
duration: e.animationDuration,
|
|
24970
|
-
"expand-on-content-drag":
|
|
24987
|
+
"expand-on-content-drag": e.expandOnContentDrag,
|
|
24971
24988
|
"swipe-close-threshold": e.swipeCloseThreshold,
|
|
24972
24989
|
"teleport-defer": "",
|
|
24973
|
-
|
|
24974
|
-
|
|
24990
|
+
"snap-points": u.value,
|
|
24991
|
+
onClosed: m,
|
|
24992
|
+
onOpened: p
|
|
24975
24993
|
}, {
|
|
24976
24994
|
header: V(() => [P(t.$slots, "header")]),
|
|
24977
24995
|
footer: V(() => [P(t.$slots, "footer")]),
|
|
@@ -24981,7 +24999,9 @@ var VO = ["data-vsbs-shadow", "data-vsbs-sheet-show"], HO = /* @__PURE__ */ ((e,
|
|
|
24981
24999
|
"can-backdrop-close",
|
|
24982
25000
|
"can-swipe-close",
|
|
24983
25001
|
"duration",
|
|
24984
|
-
"
|
|
25002
|
+
"expand-on-content-drag",
|
|
25003
|
+
"swipe-close-threshold",
|
|
25004
|
+
"snap-points"
|
|
24985
25005
|
]));
|
|
24986
25006
|
}
|
|
24987
25007
|
}), GO = {
|
|
@@ -28161,7 +28181,10 @@ function Jj(e, r) {
|
|
|
28161
28181
|
var Yj = /*#__PURE__*/ X(qj, [["render", Jj]]), Xj = /* @__PURE__ */ h({
|
|
28162
28182
|
__name: "CpDynamicDialog",
|
|
28163
28183
|
props: /*@__PURE__*/ S({
|
|
28184
|
+
breakpoint: {},
|
|
28164
28185
|
class: {},
|
|
28186
|
+
expandOnContentDrag: { type: Boolean },
|
|
28187
|
+
halfAndExpand: { type: Boolean },
|
|
28165
28188
|
isClosableOnClickOutside: { type: Boolean },
|
|
28166
28189
|
maxWidth: {},
|
|
28167
28190
|
preventClose: { type: Boolean },
|
|
@@ -28176,12 +28199,14 @@ var Yj = /*#__PURE__*/ X(qj, [["render", Jj]]), Xj = /* @__PURE__ */ h({
|
|
|
28176
28199
|
}),
|
|
28177
28200
|
emits: /*@__PURE__*/ S(["close"], ["update:isVisible"]),
|
|
28178
28201
|
setup(e, { emit: t }) {
|
|
28179
|
-
let n = e, r = t, a = Kj(), c = me("dynamicComponentRef"), l = fe(e, "isVisible"), d = i(() => a.value ? "div" : Yj), m = i(() => a.value ? WO : Wj), h = i(() => a.value ? !0 : l.value), g = i(() => a.value ? {
|
|
28202
|
+
let n = e, r = t, a = Kj(n.breakpoint ?? Gj.MOBILE), c = me("dynamicComponentRef"), l = fe(e, "isVisible"), d = i(() => a.value ? "div" : Yj), m = i(() => a.value ? WO : Wj), h = i(() => a.value ? !0 : l.value), g = i(() => a.value ? {
|
|
28180
28203
|
modelValue: l.value,
|
|
28181
28204
|
contentClass: n.class,
|
|
28182
28205
|
canBackdropClose: !n.preventClose,
|
|
28183
28206
|
canSwipeClose: !n.preventClose,
|
|
28184
|
-
|
|
28207
|
+
expandOnContentDrag: n.expandOnContentDrag,
|
|
28208
|
+
preventClose: n.preventClose,
|
|
28209
|
+
halfAndExpand: n.halfAndExpand
|
|
28185
28210
|
} : {
|
|
28186
28211
|
maxWidth: n.maxWidth,
|
|
28187
28212
|
class: n.class,
|
|
@@ -28189,18 +28214,20 @@ var Yj = /*#__PURE__*/ X(qj, [["render", Jj]]), Xj = /* @__PURE__ */ h({
|
|
|
28189
28214
|
isClosableOnClickOutside: n.isClosableOnClickOutside,
|
|
28190
28215
|
...n.title && { title: n.title },
|
|
28191
28216
|
...n.subtitle && { subtitle: n.subtitle }
|
|
28192
|
-
}), _ =
|
|
28217
|
+
}), _ = () => {
|
|
28218
|
+
l.value = !1, r("close");
|
|
28219
|
+
}, v = async () => {
|
|
28193
28220
|
await w(), c.value && c.value?.open();
|
|
28194
28221
|
};
|
|
28195
28222
|
return B(a, () => {
|
|
28196
|
-
a.value && l.value &&
|
|
28223
|
+
a.value && l.value && v();
|
|
28197
28224
|
}), (t, n) => {
|
|
28198
|
-
let
|
|
28225
|
+
let r = F("cp-heading");
|
|
28199
28226
|
return j(), o(se(d.value), null, {
|
|
28200
28227
|
default: V(() => [h.value ? (j(), o(se(m.value), C({ key: 0 }, g.value, {
|
|
28201
28228
|
ref_key: "dynamicComponentRef",
|
|
28202
28229
|
ref: c,
|
|
28203
|
-
onClose:
|
|
28230
|
+
onClose: _
|
|
28204
28231
|
}), u({
|
|
28205
28232
|
default: V(() => [P(t.$slots, "default")]),
|
|
28206
28233
|
footer: V(() => [P(t.$slots, "footer")]),
|
|
@@ -28208,7 +28235,7 @@ var Yj = /*#__PURE__*/ X(qj, [["render", Jj]]), Xj = /* @__PURE__ */ h({
|
|
|
28208
28235
|
}, [
|
|
28209
28236
|
e.title ? {
|
|
28210
28237
|
name: "header",
|
|
28211
|
-
fn: V(() => [P(t.$slots, "title", {}, () => [p(
|
|
28238
|
+
fn: V(() => [P(t.$slots, "title", {}, () => [p(r, {
|
|
28212
28239
|
class: "cpDynamicDialog__title",
|
|
28213
28240
|
"heading-level": "h3"
|
|
28214
28241
|
}, {
|