@pantograph/vue 0.13.1 → 0.14.0

package/dist/ScrollContainer/Mask.d.ts

@@ -0,0 +1,9 @@
+export declare const scrollContainerPrefix: string;
+export interface Props {
+    topVisible: boolean;
+    bottomVisible: boolean;
+    endVisible: boolean;
+    startVisible: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/ScrollContainer/ScrollContainer.d.ts

@@ -0,0 +1,215 @@
+import { ScrollContainerType } from './ScrollContainer.model';
+export interface ScrollContainerProps {
+    scrollDistance?: number;
+    scrollHideDelay?: number;
+    dir?: 'rtl' | 'ltr';
+    type?: ScrollContainerType;
+    rootProps?: object;
+    overlay?: boolean;
+}
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        root: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                type: import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).ScrollType;
+                scrollHideDelay: number;
+            }> & Omit<{
+                readonly type: import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).ScrollType;
+                readonly scrollHideDelay: number;
+                readonly dir?: import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).Direction | undefined;
+                readonly as?: (import('radix-vue', { with: { "resolution-mode": "import" } }).AsTag | import('vue').Component) | undefined;
+                readonly asChild?: boolean | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "type" | "scrollHideDelay">;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+                dir: {
+                    type: import('vue').PropType<import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).Direction>;
+                };
+                type: {
+                    type: import('vue').PropType<import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).ScrollType>;
+                    default: string;
+                };
+                as: {
+                    type: import('vue').PropType<import('radix-vue', { with: { "resolution-mode": "import" } }).AsTag | import('vue').Component>;
+                };
+                asChild: {
+                    type: import('vue').PropType<boolean>;
+                };
+                scrollHideDelay: {
+                    type: import('vue').PropType<number>;
+                    default: number;
+                };
+            }>>, {
+                viewport: import('vue').Ref<HTMLElement | undefined>;
+                scrollTop: () => void;
+                scrollTopLeft: () => void;
+            }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                type: import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).ScrollType;
+                scrollHideDelay: number;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            type: import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).ScrollType;
+            scrollHideDelay: number;
+        }> & Omit<Readonly<import('vue').ExtractPropTypes<{
+            dir: {
+                type: import('vue').PropType<import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).Direction>;
+            };
+            type: {
+                type: import('vue').PropType<import('../../../../node_modules/radix-vue/dist/ScrollArea/types.js', { with: { "resolution-mode": "import" } }).ScrollType>;
+                default: string;
+            };
+            as: {
+                type: import('vue').PropType<import('radix-vue', { with: { "resolution-mode": "import" } }).AsTag | import('vue').Component>;
+            };
+            asChild: {
+                type: import('vue').PropType<boolean>;
+            };
+            scrollHideDelay: {
+                type: import('vue').PropType<number>;
+                default: number;
+            };
+        }>>, "type" | "scrollHideDelay" | "viewport" | "scrollTop" | "scrollTopLeft"> & import('vue').ShallowUnwrapRef<{
+            viewport: import('vue').Ref<HTMLElement | undefined>;
+            scrollTop: () => void;
+            scrollTopLeft: () => void;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+        wrap: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{}> & Omit<{
+                readonly nonce?: string | undefined;
+                readonly as?: (import('radix-vue', { with: { "resolution-mode": "import" } }).AsTag | import('vue').Component) | undefined;
+                readonly asChild?: boolean | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+                nonce: {
+                    type: import('vue').PropType<string>;
+                };
+                asChild: {
+                    type: import('vue').PropType<boolean>;
+                };
+                as: {
+                    type: import('vue').PropType<import('radix-vue', { with: { "resolution-mode": "import" } }).AsTag | import('vue').Component>;
+                };
+            }>>, {
+                viewportElement: import('vue').Ref<HTMLElement | undefined>;
+            }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import('vue').ExtractPropTypes<{
+            nonce: {
+                type: import('vue').PropType<string>;
+            };
+            asChild: {
+                type: import('vue').PropType<boolean>;
+            };
+            as: {
+                type: import('vue').PropType<import('radix-vue', { with: { "resolution-mode": "import" } }).AsTag | import('vue').Component>;
+            };
+        }>>, "viewportElement"> & import('vue').ShallowUnwrapRef<{
+            viewportElement: import('vue').Ref<HTMLElement | undefined>;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+        top: HTMLDivElement;
+        end: HTMLDivElement;
+        start: HTMLDivElement;
+        bottom: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProps, {
+    container: import('vue').Ref<any, any>;
+    root: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    loadMore: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<ScrollContainerProps> & Readonly<{
+    onLoadMore?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: ScrollContainerType;
+    scrollDistance: number;
+    scrollHideDelay: number;
+    overlay: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ScrollContainer/ScrollContainer.model.d.ts

@@ -0,0 +1,2 @@
+export declare const ScrollContainerTypes: readonly ["auto", "always", "scroll", "hover"];
+export type ScrollContainerType = (typeof ScrollContainerTypes)[number];

package/dist/ScrollContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ScrollContainer, type ScrollContainerProps, default, } from './ScrollContainer';
+export * from './ScrollContainer.model';

package/dist/ScrollContainer/index.js

@@ -0,0 +1,148 @@
+import { defineComponent as D, createElementBlock as j, openBlock as x, normalizeClass as t, unref as e, createElementVNode as r, ref as S, computed as I, useTemplateRef as d, shallowRef as L, onBeforeUnmount as O, createBlock as U, mergeProps as w, withCtx as b, createVNode as a, renderSlot as q } from "vue";
+import { ScrollAreaRoot as F, ScrollAreaViewport as G, ScrollAreaScrollbar as g, ScrollAreaThumb as A, ScrollAreaCorner as J } from "radix-vue";
+import { cva as E } from "class-variance-authority";
+import { getBemBlock as K, getBemElement as o, generateVariantClassList as c } from "@pantograph/utils";
+import { useElementVisibility as _, useIntersectionObserver as Q } from "@vueuse/core";
+import { a as W } from "../index-DXzWdQsN.js";
+const l = K("scroll_container"), X = /* @__PURE__ */ D({
+  __name: "Mask",
+  props: {
+    topVisible: { type: Boolean },
+    bottomVisible: { type: Boolean },
+    endVisible: { type: Boolean },
+    startVisible: { type: Boolean }
+  },
+  setup(m) {
+    const u = m, s = o(l, "mask"), p = E(s, {
+      variants: {
+        topVisible: c("top-visible", s),
+        bottomVisible: c("bottom-visible", s),
+        endVisible: c("start-visible", s),
+        startVisible: c("end-visible", s)
+      }
+    });
+    return (f, n) => (x(), j("div", {
+      class: t(e(p)(u))
+    }, [
+      r("div", {
+        class: t(e(o)(e(s), "top"))
+      }, null, 2),
+      r("div", {
+        class: t(e(o)(e(s), "bottom"))
+      }, null, 2),
+      r("div", {
+        class: t(e(o)(e(s), "start"))
+      }, null, 2),
+      r("div", {
+        class: t(e(o)(e(s), "end"))
+      }, null, 2)
+    ], 2));
+  }
+}), re = /* @__PURE__ */ D({
+  inheritAttrs: !1,
+  __name: "ScrollContainer",
+  props: {
+    scrollDistance: { default: 10 },
+    scrollHideDelay: { default: 200 },
+    dir: {},
+    type: { default: "hover" },
+    rootProps: {},
+    overlay: { type: Boolean, default: !0 }
+  },
+  emits: ["loadMore"],
+  setup(m, { expose: u, emit: s }) {
+    const p = S(), f = S(), n = m, H = s, P = E(l, {
+      variants: {
+        overlay: c("overlay", l)
+      }
+    }), v = o(l, "scroll_bar"), V = o(v, "thumb"), M = W(), R = I(() => n.dir ? n.dir : M.dir.value), C = d("top"), T = _(C), h = d("end"), $ = _(h), k = d("start"), z = _(k), B = d("bottom"), y = L(!1), { stop: N } = Q(B, ([{ isIntersecting: i }]) => {
+      i ? (H("loadMore"), y.value = !0) : y.value = !1;
+    });
+    return O(N), u({
+      container: f,
+      root: p
+    }), (i, Y) => (x(), U(e(F), w({
+      class: [e(P)({ overlay: i.overlay })],
+      scrollHideDelay: n.scrollHideDelay,
+      dir: R.value,
+      type: n.type
+    }, i.rootProps, {
+      ref_key: "root",
+      ref: p
+    }), {
+      default: b(() => [
+        a(e(G), w({
+          class: e(o)(e(l), "area")
+        }, i.$attrs, {
+          ref_key: "wrap",
+          ref: f,
+          "as-child": ""
+        }), {
+          default: b(() => [
+            r("div", {
+              class: t(e(o)(e(l), "area__wrap"))
+            }, [
+              q(i.$slots, "default"),
+              r("div", {
+                ref_key: "top",
+                ref: C,
+                class: t(e(o)(e(l), "top_observer"))
+              }, null, 2),
+              r("div", {
+                ref_key: "end",
+                ref: h,
+                class: t(e(o)(e(l), "end_observer"))
+              }, null, 2),
+              r("div", {
+                ref_key: "start",
+                ref: k,
+                class: t(e(o)(e(l), "start_observer"))
+              }, null, 2),
+              r("div", {
+                ref_key: "bottom",
+                ref: B,
+                class: t(e(o)(e(l), "bottom_observer"))
+              }, null, 2)
+            ], 2)
+          ]),
+          _: 3
+        }, 16, ["class"]),
+        a(X, {
+          topVisible: e(T),
+          bottomVisible: y.value,
+          endVisible: e($),
+          startVisible: e(z)
+        }, null, 8, ["topVisible", "bottomVisible", "endVisible", "startVisible"]),
+        a(e(g), {
+          class: t(e(v)),
+          orientation: "vertical"
+        }, {
+          default: b(() => [
+            a(e(A), {
+              class: t(e(V))
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        a(e(g), {
+          class: t(e(v)),
+          orientation: "horizontal"
+        }, {
+          default: b(() => [
+            a(e(A), {
+              class: t(e(V))
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        a(e(J))
+      ]),
+      _: 3
+    }, 16, ["class", "scrollHideDelay", "dir", "type"]));
+  }
+}), ae = ["auto", "always", "scroll", "hover"];
+export {
+  re as ScrollContainer,
+  ae as ScrollContainerTypes,
+  re as default
+};

package/dist/ScrollContainer/index.umd.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("radix-vue"),y=require("class-variance-authority"),t=require("@pantograph/utils"),i=require("@vueuse/core"),w=require("../index-fCdmNGB1.js"),l=t.getBemBlock("scroll_container"),A=e.defineComponent({__name:"Mask",props:{topVisible:{type:Boolean},bottomVisible:{type:Boolean},endVisible:{type:Boolean},startVisible:{type:Boolean}},setup(c){const u=c,r=t.getBemElement(l,"mask"),a=y.cva(r,{variants:{topVisible:t.generateVariantClassList("top-visible",r),bottomVisible:t.generateVariantClassList("bottom-visible",r),endVisible:t.generateVariantClassList("start-visible",r),startVisible:t.generateVariantClassList("end-visible",r)}});return(m,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(a)(u))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(r),"top"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(r),"bottom"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(r),"start"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(r),"end"))},null,2)],2))}}),_=e.defineComponent({inheritAttrs:!1,__name:"ScrollContainer",props:{scrollDistance:{default:10},scrollHideDelay:{default:200},dir:{},type:{default:"hover"},rootProps:{},overlay:{type:Boolean,default:!0}},emits:["loadMore"],setup(c,{expose:u,emit:r}){const a=e.ref(),m=e.ref(),n=c,g=r,E=y.cva(l,{variants:{overlay:t.generateVariantClassList("overlay",l)}}),f=t.getBemElement(l,"scroll_bar"),b=t.getBemElement(f,"thumb"),B=w.injectConfigContext(),h=e.computed(()=>n.dir?n.dir:B.dir.value),p=e.useTemplateRef("top"),N=i.useElementVisibility(p),V=e.useTemplateRef("end"),S=i.useElementVisibility(V),v=e.useTemplateRef("start"),z=i.useElementVisibility(v),C=e.useTemplateRef("bottom"),d=e.shallowRef(!1),{stop:k}=i.useIntersectionObserver(C,([{isIntersecting:o}])=>{o?(g("loadMore"),d.value=!0):d.value=!1});return e.onBeforeUnmount(k),u({container:m,root:a}),(o,x)=>(e.openBlock(),e.createBlock(e.unref(s.ScrollAreaRoot),e.mergeProps({class:[e.unref(E)({overlay:o.overlay})],scrollHideDelay:n.scrollHideDelay,dir:h.value,type:n.type},o.rootProps,{ref_key:"root",ref:a}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.ScrollAreaViewport),e.mergeProps({class:e.unref(t.getBemElement)(e.unref(l),"area")},o.$attrs,{ref_key:"wrap",ref:m,"as-child":""}),{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(l),"area__wrap"))},[e.renderSlot(o.$slots,"default"),e.createElementVNode("div",{ref_key:"top",ref:p,class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(l),"top_observer"))},null,2),e.createElementVNode("div",{ref_key:"end",ref:V,class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(l),"end_observer"))},null,2),e.createElementVNode("div",{ref_key:"start",ref:v,class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(l),"start_observer"))},null,2),e.createElementVNode("div",{ref_key:"bottom",ref:C,class:e.normalizeClass(e.unref(t.getBemElement)(e.unref(l),"bottom_observer"))},null,2)],2)]),_:3},16,["class"]),e.createVNode(A,{topVisible:e.unref(N),bottomVisible:d.value,endVisible:e.unref(S),startVisible:e.unref(z)},null,8,["topVisible","bottomVisible","endVisible","startVisible"]),e.createVNode(e.unref(s.ScrollAreaScrollbar),{class:e.normalizeClass(e.unref(f)),orientation:"vertical"},{default:e.withCtx(()=>[e.createVNode(e.unref(s.ScrollAreaThumb),{class:e.normalizeClass(e.unref(b))},null,8,["class"])]),_:1},8,["class"]),e.createVNode(e.unref(s.ScrollAreaScrollbar),{class:e.normalizeClass(e.unref(f)),orientation:"horizontal"},{default:e.withCtx(()=>[e.createVNode(e.unref(s.ScrollAreaThumb),{class:e.normalizeClass(e.unref(b))},null,8,["class"])]),_:1},8,["class"]),e.createVNode(e.unref(s.ScrollAreaCorner))]),_:3},16,["class","scrollHideDelay","dir","type"]))}}),T=["auto","always","scroll","hover"];exports.ScrollContainer=_;exports.ScrollContainerTypes=T;exports.default=_;