@pantograph/vue 0.26.0 → 0.27.1

package/dist/ScrollContainer/ScrollContainer.d.ts

@@ -33,7 +33,7 @@ declare function __VLS_template(): {
             $: import('vue').ComponentInternalInstance;
             $data: {};
             $props: {
-                readonly type?: ("auto" | "scroll" | "always" | "hover") | undefined;
+                readonly type?: ("auto" | "scroll" | "hover" | "always") | undefined;
                 readonly dir?: ("ltr" | "rtl") | undefined;
                 readonly scrollHideDelay?: number | undefined;
                 readonly asChild?: boolean | undefined;
@@ -58,7 +58,7 @@ declare function __VLS_template(): {
                 scrollTop: () => void;
                 scrollTopLeft: () => void;
             }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-                type: "auto" | "scroll" | "always" | "hover";
+                type: "auto" | "scroll" | "hover" | "always";
                 scrollHideDelay: number;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
@@ -81,7 +81,7 @@ declare function __VLS_template(): {
             $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: "auto" | "scroll" | "always" | "hover";
+            type: "auto" | "scroll" | "hover" | "always";
             scrollHideDelay: number;
         }> & Omit<Readonly<import('reka-ui').ScrollAreaRootProps> & Readonly<{}>, "type" | "scrollHideDelay" | "scrollTop" | "scrollTopLeft" | "viewport"> & import('vue').ShallowUnwrapRef<{
             viewport: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
@@ -89,7 +89,7 @@ declare function __VLS_template(): {
             scrollTopLeft: () => void;
         }> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null;
         container: ({
@@ -105,8 +105,6 @@ declare function __VLS_template(): {
             };
             $refs: {
                 [x: string]: unknown;
-            } & {
-                viewportElement: HTMLDivElement;
             };
             $slots: Readonly<{
                 [name: string]: import('vue').Slot<any> | undefined;
@@ -142,7 +140,7 @@ declare function __VLS_template(): {
             viewportElement: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
         }> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null;
         wrap: HTMLDivElement;
@@ -193,7 +191,7 @@ declare function __VLS_template(): {
             $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('reka-ui').ScrollAreaCornerProps> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null;
     };
@@ -219,15 +217,15 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProp
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ScrollContainerProps> & Readonly<{}>, {
     size: ScrollContainerSize;
     type: ScrollContainerType;
+    overlay: boolean;
     scrollDistance: number;
     scrollHideDelay: number;
-    overlay: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     root: ({
         $: import('vue').ComponentInternalInstance;
         $data: {};
         $props: {
-            readonly type?: ("auto" | "scroll" | "always" | "hover") | undefined;
+            readonly type?: ("auto" | "scroll" | "hover" | "always") | undefined;
             readonly dir?: ("ltr" | "rtl") | undefined;
             readonly scrollHideDelay?: number | undefined;
             readonly asChild?: boolean | undefined;
@@ -252,7 +250,7 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProp
             scrollTop: () => void;
             scrollTopLeft: () => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-            type: "auto" | "scroll" | "always" | "hover";
+            type: "auto" | "scroll" | "hover" | "always";
             scrollHideDelay: number;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -275,7 +273,7 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProp
         $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: "auto" | "scroll" | "always" | "hover";
+        type: "auto" | "scroll" | "hover" | "always";
         scrollHideDelay: number;
     }> & Omit<Readonly<import('reka-ui').ScrollAreaRootProps> & Readonly<{}>, "type" | "scrollHideDelay" | "scrollTop" | "scrollTopLeft" | "viewport"> & import('vue').ShallowUnwrapRef<{
         viewport: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
@@ -283,7 +281,7 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProp
         scrollTopLeft: () => void;
     }> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
-            default?(_: {}): any;
+            default?: (props: {}) => any;
         };
     }) | null;
     container: ({
@@ -299,8 +297,6 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProp
         };
         $refs: {
             [x: string]: unknown;
-        } & {
-            viewportElement: HTMLDivElement;
         };
         $slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
@@ -336,7 +332,7 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProp
         viewportElement: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
     }> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
-            default?(_: {}): any;
+            default?: (props: {}) => any;
         };
     }) | null;
     wrap: HTMLDivElement;
@@ -387,7 +383,7 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollContainerProp
         $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('reka-ui').ScrollAreaCornerProps> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
-            default?(_: {}): any;
+            default?: (props: {}) => any;
         };
     }) | null;
 }, any>;

package/dist/ScrollContainer/index.js

@@ -1,4 +1,4 @@
-import { _ as r, a as e, S as l, _ as n } from "../ScrollContainer.vue_vue_type_style_index_0_lang-ioHY1esc.js";
+import { _ as r, a as e, S as l, _ as n } from "../ScrollContainer.vue_vue_type_script_setup_true_lang-BU7qU1LR.js";
 export {
   r as ScrollContainer,
   e as ScrollContainerSizes,

package/dist/ScrollContainer/index.umd.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ScrollContainer.vue_vue_type_style_index_0_lang-DRYmVHMT.js");exports.ScrollContainer=e._sfc_main;exports.ScrollContainerSizes=e.ScrollContainerSizes;exports.ScrollContainerTypes=e.ScrollContainerTypes;exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../ScrollContainer.vue_vue_type_script_setup_true_lang-u50YBozy.js");exports.ScrollContainer=e._sfc_main;exports.ScrollContainerSizes=e.ScrollContainerSizes;exports.ScrollContainerTypes=e.ScrollContainerTypes;exports.default=e._sfc_main;

package/dist/{ScrollContainer.vue_vue_type_style_index_0_lang-ioHY1esc.js → ScrollContainer.vue_vue_type_script_setup_true_lang-BU7qU1LR.js}

@@ -1,13 +1,15 @@
-import { defineComponent as Q, createElementBlock as Z, openBlock as w, normalizeClass as t, unref as e, createElementVNode as n, computed as oe, ref as p, shallowRef as u, onMounted as re, onBeforeUnmount as se, createBlock as U, mergeProps as L, withCtx as y, renderSlot as V, createVNode as v, createCommentVNode as j, withDirectives as q, Fragment as te, vShow as G } from "vue";
+import { defineComponent as Q, createElementBlock as Z, openBlock as w, normalizeClass as t, unref as e, createElementVNode as n, computed as oe, ref as p, shallowRef as u, onMounted as re, onBeforeUnmount as se, createBlock as U, mergeProps as L, withCtx as y, renderSlot as C, createVNode as v, createCommentVNode as j, withDirectives as q, Fragment as te, vShow as G } from "vue";
 import { ScrollAreaRoot as ae, ScrollAreaViewport as ie, ScrollAreaScrollbar as I, ScrollAreaThumb as J, ScrollAreaCorner as ne } from "reka-ui";
 import { cva as x } from "class-variance-authority";
 import { getBemBlock as ce, getBemElement as a, generateVariantClassList as c, normCls as f } from "@pantograph/utils";
-import { useElementVisibility as C, useDebounceFn as pe, useResizeObserver as K } from "@vueuse/core";
-import { u as fe } from "./ConfigProvider.vue_vue_type_script_setup_true_lang-D8R0hBKt.js";
-import { g as ue } from "./options-Bh1s18jm.js";
+import { useElementVisibility as V, useDebounceFn as pe, useResizeObserver as K } from "@vueuse/core";
+import { u as fe } from "./ConfigProvider.vue_vue_type_script_setup_true_lang-DiuPi_DT.js";
+import { a as ue } from "./options-J8HfRMSU.js";
+import { u as ve } from "./Icon.vue_vue_type_script_setup_true_lang-DJv20Efl.js";
 import "es-toolkit";
-import "./Icon.vue_vue_type_style_index_0_lang-26YK1SwL.js";
-const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
+import "@tanstack/vue-virtual";
+import me from "@pantograph/style/scroll_container.css?raw";
+const s = ce("scroll_container"), be = /* @__PURE__ */ Q({
   __name: "Mask",
   props: {
     topVisible: { type: Boolean },
@@ -15,8 +17,8 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
     rightVisible: { type: Boolean },
     leftVisible: { type: Boolean }
   },
-  setup(g) {
-    const S = g, o = a(s, "mask"), k = x(o, {
+  setup(S) {
+    const g = S, o = a(s, "mask"), k = x(o, {
       variants: {
         topVisible: c("top-visible", o),
         bottomVisible: c("bottom-visible", o),
@@ -25,7 +27,7 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
       }
     });
     return (d, B) => (w(), Z("div", {
-      class: t(e(k)(S))
+      class: t(e(k)(g))
     }, [
       n("div", {
         class: t(e(a)(e(o), "top"))
@@ -41,7 +43,7 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
       }, null, 2)
     ], 2));
   }
-}), Te = ["auto", "always", "scroll", "hover"], be = ["sm", "md", "lg"], He = /* @__PURE__ */ Q({
+}), Oe = ["auto", "always", "scroll", "hover"], de = ["sm", "md", "lg"], De = /* @__PURE__ */ Q({
   ...ue("ScrollContainer", !1),
   __name: "ScrollContainer",
   props: {
@@ -64,44 +66,45 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
     hideHorizontalScrollbar: { type: Boolean },
     color: {}
   },
-  setup(g, { expose: S }) {
-    const o = g, k = x(s, {
+  setup(S, { expose: g }) {
+    ve("scroll_container", me);
+    const o = S, k = x(s, {
       variants: {
-        size: c(be, s),
+        size: c(de, s),
         overlay: c("overlay", s),
         isOverflowX: c("overflowed-x", s),
         isOverflowY: c("overflowed-y", s),
         hasMask: c("has-mask", s)
       }
     }), d = a(s, "scroll_bar"), B = a(d, "thumb"), { config: ee } = fe(), le = oe(() => o.dir ? o.dir : ee.dir.value), P = p(), $ = p(), A = p(), R = p();
-    let z = u(!1), T = u(!1), H = u(!1), M = u(!1);
-    o.hasMask && (z = C(P), T = C($), H = C(A), M = C(R));
-    const i = p(), h = p(), _ = p(), O = u(!1), D = u(!1), E = pe(() => {
-      var l, r, b, m, N, W, X, Y, F;
-      e((l = i.value) == null ? void 0 : l.viewport) && (O.value = !o.hideHorizontalScrollbar && (((b = (r = e(i.value)) == null ? void 0 : r.viewport) == null ? void 0 : b.offsetWidth) || 0) < (((N = (m = e(i.value)) == null ? void 0 : m.viewport) == null ? void 0 : N.scrollWidth) || 0), D.value = !o.hideVerticalScrollbar && (((X = (W = e(i.value)) == null ? void 0 : W.viewport) == null ? void 0 : X.offsetHeight) || 0) < (((F = (Y = e(i.value)) == null ? void 0 : Y.viewport) == null ? void 0 : F.scrollHeight) || 0));
+    let z = u(!1), T = u(!1), _ = u(!1), H = u(!1);
+    o.hasMask && (z = V(P), T = V($), _ = V(A), H = V(R));
+    const i = p(), h = p(), M = p(), O = u(!1), D = u(!1), E = pe(() => {
+      var l, r, m, b, N, W, X, Y, F;
+      e((l = i.value) == null ? void 0 : l.viewport) && (O.value = !o.hideHorizontalScrollbar && (((m = (r = e(i.value)) == null ? void 0 : r.viewport) == null ? void 0 : m.offsetWidth) || 0) < (((N = (b = e(i.value)) == null ? void 0 : b.viewport) == null ? void 0 : N.scrollWidth) || 0), D.value = !o.hideVerticalScrollbar && (((X = (W = e(i.value)) == null ? void 0 : W.viewport) == null ? void 0 : X.offsetHeight) || 0) < (((F = (Y = e(i.value)) == null ? void 0 : Y.viewport) == null ? void 0 : F.scrollHeight) || 0));
     }, 10);
     if (!o.overlay && !(o.hideVerticalScrollbar && o.hideVerticalScrollbar)) {
       re(() => E());
-      const { stop: l } = K(i, E), { stop: r } = K(_, E);
+      const { stop: l } = K(i, E), { stop: r } = K(M, E);
       se(() => {
         l(), r();
       });
     }
-    return S({
+    return g({
       container: h,
-      wrap: _,
+      wrap: M,
       root: i,
       isOverflowX: O,
       isOverflowY: D,
       topVisible: z,
       rightVisible: T,
-      leftVisible: H,
-      bottomVisible: M,
+      leftVisible: _,
+      bottomVisible: H,
       getScroll: () => {
-        var l, r, b, m;
+        var l, r, m, b;
         return {
           scrollTop: (r = (l = h.value) == null ? void 0 : l.viewportElement) == null ? void 0 : r.scrollTop,
-          scrollLeft: (m = (b = h.value) == null ? void 0 : b.viewportElement) == null ? void 0 : m.scrollLeft
+          scrollLeft: (b = (m = h.value) == null ? void 0 : m.viewportElement) == null ? void 0 : b.scrollLeft
         };
       },
       scrollTop: () => {
@@ -134,7 +137,7 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
       ref: i
     }), {
       default: y(() => [
-        V(l.$slots, "root"),
+        C(l.$slots, "root"),
         v(e(ie), L({
           class: e(f)(e(a)(e(s), "area"), l.areaCls)
         }, l.$attrs, {
@@ -143,14 +146,14 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
           "as-child": ""
         }), {
           default: y(() => [
-            V(l.$slots, "area"),
+            C(l.$slots, "area"),
             n("div", L({
               class: e(f)(e(a)(e(s), "area__wrap"), l.wrapCls)
             }, l.wrapProps, {
               ref_key: "wrap",
-              ref: _
+              ref: M
             }), [
-              V(l.$slots, "default"),
+              C(l.$slots, "default"),
               l.hasMask ? (w(), Z(te, { key: 0 }, [
                 n("div", {
                   ref_key: "top",
@@ -177,12 +180,12 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
           ]),
           _: 3
         }, 16, ["class"]),
-        l.hasMask ? (w(), U(ve, {
+        l.hasMask ? (w(), U(be, {
           key: 0,
           topVisible: e(z),
-          bottomVisible: e(M),
+          bottomVisible: e(H),
           rightVisible: e(T),
-          leftVisible: e(H)
+          leftVisible: e(_)
         }, null, 8, ["topVisible", "bottomVisible", "rightVisible", "leftVisible"])) : j("", !0),
         q(v(e(I), {
           class: t(e(f)(e(d), l.scrollbarCls)),
@@ -214,14 +217,14 @@ const s = ce("scroll_container"), ve = /* @__PURE__ */ Q({
           ref: "corner",
           class: t(l.cornerCls)
         }, null, 8, ["class"]),
-        V(l.$slots, "root")
+        C(l.$slots, "root")
       ]),
       _: 3
     }, 16, ["class", "scrollHideDelay", "dir", "type", "style"]));
   }
 });
 export {
-  Te as S,
-  He as _,
-  be as a
+  Oe as S,
+  De as _,
+  de as a
 };

package/dist/ScrollContainer.vue_vue_type_script_setup_true_lang-u50YBozy.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),n=require("reka-ui"),H=require("class-variance-authority"),l=require("@pantograph/utils"),i=require("@vueuse/core"),A=require("./ConfigProvider.vue_vue_type_script_setup_true_lang-BAXkTMEt.js"),D=require("./options-CY2uxp5A.js"),$=require("./Icon.vue_vue_type_script_setup_true_lang-BDTw4CRD.js");require("es-toolkit");require("@tanstack/vue-virtual");const W=require("@pantograph/style/scroll_container.css?raw"),t=l.getBemBlock("scroll_container"),X=e.defineComponent({__name:"Mask",props:{topVisible:{type:Boolean},bottomVisible:{type:Boolean},rightVisible:{type:Boolean},leftVisible:{type:Boolean}},setup(p){const v=p,o=l.getBemElement(t,"mask"),d=H.cva(o,{variants:{topVisible:l.generateVariantClassList("top-visible",o),bottomVisible:l.generateVariantClassList("bottom-visible",o),rightVisible:l.generateVariantClassList("right-visible",o),leftVisible:l.generateVariantClassList("left-visible",o)}});return(f,b)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(d)(v))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(o),"top"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(o),"bottom"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(o),"right"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(o),"left"))},null,2)],2))}}),Y=["auto","always","scroll","hover"],M=["sm","md","lg"],F=e.defineComponent({...D.getComponentOptions("ScrollContainer",!1),__name:"ScrollContainer",props:{scrollDistance:{default:10},scrollHideDelay:{default:200},dir:{},type:{default:"hover"},hasMask:{type:Boolean},size:{default:"md"},scrollbarCls:{},wrapCls:{},areaCls:{},rootCls:{},thumbCls:{},cornerCls:{},rootProps:{},wrapProps:{},overlay:{type:Boolean,default:!0},hideVerticalScrollbar:{type:Boolean},hideHorizontalScrollbar:{type:Boolean},color:{}},setup(p,{expose:v}){$.useComponentStyle("scroll_container",W);const o=p,d=H.cva(t,{variants:{size:l.generateVariantClassList(M,t),overlay:l.generateVariantClassList("overlay",t),isOverflowX:l.generateVariantClassList("overflowed-x",t),isOverflowY:l.generateVariantClassList("overflowed-y",t),hasMask:l.generateVariantClassList("has-mask",t)}}),f=l.getBemElement(t,"scroll_bar"),b=l.getBemElement(f,"thumb"),{config:O}=A.useConfig(),P=e.computed(()=>o.dir?o.dir:O.dir.value),E=e.ref(),k=e.ref(),z=e.ref(),_=e.ref();let C=e.shallowRef(!1),h=e.shallowRef(!1),V=e.shallowRef(!1),g=e.shallowRef(!1);o.hasMask&&(C=i.useElementVisibility(E),h=i.useElementVisibility(k),V=i.useElementVisibility(z),g=i.useElementVisibility(_));const a=e.ref(),m=e.ref(),y=e.ref(),w=e.shallowRef(!1),S=e.shallowRef(!1),B=i.useDebounceFn(()=>{var r,s,c,u,N,L,T,q,R;e.unref((r=a.value)==null?void 0:r.viewport)&&(w.value=!o.hideHorizontalScrollbar&&(((c=(s=e.unref(a.value))==null?void 0:s.viewport)==null?void 0:c.offsetWidth)||0)<(((N=(u=e.unref(a.value))==null?void 0:u.viewport)==null?void 0:N.scrollWidth)||0),S.value=!o.hideVerticalScrollbar&&(((T=(L=e.unref(a.value))==null?void 0:L.viewport)==null?void 0:T.offsetHeight)||0)<(((R=(q=e.unref(a.value))==null?void 0:q.viewport)==null?void 0:R.scrollHeight)||0))},10);if(!o.overlay&&!(o.hideVerticalScrollbar&&o.hideVerticalScrollbar)){e.onMounted(()=>B());const{stop:r}=i.useResizeObserver(a,B),{stop:s}=i.useResizeObserver(y,B);e.onBeforeUnmount(()=>{r(),s()})}return v({container:m,wrap:y,root:a,isOverflowX:w,isOverflowY:S,topVisible:C,rightVisible:h,leftVisible:V,bottomVisible:g,getScroll:()=>{var r,s,c,u;return{scrollTop:(s=(r=m.value)==null?void 0:r.viewportElement)==null?void 0:s.scrollTop,scrollLeft:(u=(c=m.value)==null?void 0:c.viewportElement)==null?void 0:u.scrollLeft}},scrollTop:()=>{var r,s;return(s=(r=a.value)==null?void 0:r.scrollTop)==null?void 0:s.call(r)},scrollTopLeft:()=>{var r,s;return(s=(r=a.value)==null?void 0:r.scrollTopLeft)==null?void 0:s.call(r)}}),(r,s)=>(e.openBlock(),e.createBlock(e.unref(n.ScrollAreaRoot),e.mergeProps({class:e.unref(l.normCls)(e.unref(d)({overlay:r.overlay,isOverflowX:w.value,isOverflowY:S.value,hasMask:r.hasMask,size:r.size}),r.rootCls),scrollHideDelay:o.scrollHideDelay,dir:P.value,type:o.type},r.rootProps,{style:{"--ptc-scroll-container-color":r.color},ref_key:"root",ref:a}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"root"),e.createVNode(e.unref(n.ScrollAreaViewport),e.mergeProps({class:e.unref(l.normCls)(e.unref(l.getBemElement)(e.unref(t),"area"),r.areaCls)},r.$attrs,{ref_key:"container",ref:m,"as-child":""}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"area"),e.createElementVNode("div",e.mergeProps({class:e.unref(l.normCls)(e.unref(l.getBemElement)(e.unref(t),"area__wrap"),r.wrapCls)},r.wrapProps,{ref_key:"wrap",ref:y}),[e.renderSlot(r.$slots,"default"),r.hasMask?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{ref_key:"top",ref:E,class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(t),"top_observer"))},null,2),e.createElementVNode("div",{ref_key:"right",ref:k,class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(t),"right_observer"))},null,2),e.createElementVNode("div",{ref_key:"left",ref:z,class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(t),"left_observer"))},null,2),e.createElementVNode("div",{ref_key:"bottom",ref:_,class:e.normalizeClass(e.unref(l.getBemElement)(e.unref(t),"bottom_observer"))},null,2)],64)):e.createCommentVNode("",!0)],16)]),_:3},16,["class"]),r.hasMask?(e.openBlock(),e.createBlock(X,{key:0,topVisible:e.unref(C),bottomVisible:e.unref(g),rightVisible:e.unref(h),leftVisible:e.unref(V)},null,8,["topVisible","bottomVisible","rightVisible","leftVisible"])):e.createCommentVNode("",!0),e.withDirectives(e.createVNode(e.unref(n.ScrollAreaScrollbar),{class:e.normalizeClass(e.unref(l.normCls)(e.unref(f),r.scrollbarCls)),orientation:"vertical"},{default:e.withCtx(()=>[e.createVNode(e.unref(n.ScrollAreaThumb),{class:e.normalizeClass(e.unref(l.normCls)(e.unref(b),r.thumbCls))},null,8,["class"])]),_:1},8,["class"]),[[e.vShow,!r.hideVerticalScrollbar]]),e.withDirectives(e.createVNode(e.unref(n.ScrollAreaScrollbar),{class:e.normalizeClass(e.unref(l.normCls)(e.unref(f),r.scrollbarCls)),orientation:"horizontal"},{default:e.withCtx(()=>[e.createVNode(e.unref(n.ScrollAreaThumb),{class:e.normalizeClass(e.unref(l.normCls)(e.unref(b),r.thumbCls))},null,8,["class"])]),_:1},8,["class"]),[[e.vShow,!r.hideHorizontalScrollbar]]),e.createVNode(e.unref(n.ScrollAreaCorner),{ref:"corner",class:e.normalizeClass(r.cornerCls)},null,8,["class"]),e.renderSlot(r.$slots,"root")]),_:3},16,["class","scrollHideDelay","dir","type","style"]))}});exports.ScrollContainerSizes=M;exports.ScrollContainerTypes=Y;exports._sfc_main=F;

package/dist/Segmented/Segmented.d.ts

@@ -1,12 +1,12 @@
 import { RovingFocusGroupProps, RovingFocusGroupEmits } from 'reka-ui';
-import { SegmentedSize } from './Segmented.model.js';
+import { SegmentedSize } from './Segmented.model';
 import { ClassValue } from 'class-variance-authority/types';
 type SegmentOption = (Record<string, any> & {
     value: string;
     disabled?: boolean;
     text?: string;
     icon?: string;
-}) | string | number;
+}) | string;
 export interface SegmentedProps extends Omit<RovingFocusGroupProps, 'currentTabStopId' | 'defaultCurrentTabStopId' | 'as' | 'asChild'> {
     options: SegmentOption[];
     size?: SegmentedSize;
@@ -17,6 +17,7 @@ export interface SegmentedProps extends Omit<RovingFocusGroupProps, 'currentTabS
     optionTextCls?: ClassValue;
     block?: boolean;
     modelValue?: string | number;
+    disabled?: boolean;
     defaultModelValue?: string | number;
 }
 export interface SegmentedEmits extends Omit<RovingFocusGroupEmits, 'update:currentTabStopId'> {
@@ -51,6 +52,7 @@ declare const __VLS_component: import('vue').DefineComponent<SegmentedProps, {},
     onEntryFocus?: ((event: Event) => any) | undefined;
 }>, {
     size: SegmentedSize;
+    disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/Segmented/index.js

@@ -1,4 +1,4 @@
-import { _ as s, S as t, _ as S } from "../Segmented.vue_vue_type_style_index_0_lang-BPt9_TEH.js";
+import { _ as s, S as t, _ as S } from "../Segmented.vue_vue_type_script_setup_true_lang-D7yf-Ezy.js";
 export {
   s as Segmented,
   t as SegmentedSizes,

package/dist/Segmented/index.umd.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../Segmented.vue_vue_type_style_index_0_lang-BSt3GUbV.js");exports.Segmented=e._sfc_main;exports.SegmentedSizes=e.SegmentedSizes;exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../Segmented.vue_vue_type_script_setup_true_lang-CoJCKPrs.js");exports.Segmented=e._sfc_main;exports.SegmentedSizes=e.SegmentedSizes;exports.default=e._sfc_main;

package/dist/Segmented.vue_vue_type_script_setup_true_lang-CoJCKPrs.js

@@ -0,0 +1 @@
+"use strict";const t=require("vue"),_=require("reka-ui"),i=require("@pantograph/utils"),z=require("class-variance-authority"),Q=require("./ConfigProvider.vue_vue_type_script_setup_true_lang-BAXkTMEt.js"),T=require("es-toolkit"),r=require("./Icon.vue_vue_type_script_setup_true_lang-BDTw4CRD.js"),W=require("./options-CY2uxp5A.js"),X=require("./useInputDataStates-CVQJAe1K.js");require("@vueuse/core");const Y=require("./useVmodel-BU5qtyne.js");require("@tanstack/vue-virtual");const Z=require("@pantograph/style/segmented.css?raw"),F=["sm","md","lg"],ee=t.defineComponent({...W.getComponentOptions("Segmented"),__name:"Segmented",props:{options:{},size:{default:"md"},class:{},selectionIndicatorCls:{},optionCls:{},optionIconCls:{},optionTextCls:{},block:{type:Boolean},modelValue:{},disabled:{type:Boolean,default:void 0},defaultModelValue:{},orientation:{},dir:{},loop:{type:Boolean},preventScrollOnEntryFocus:{type:Boolean}},emits:["update:modelValue","change","entryFocus"],setup(j,{emit:w}){r.useComponentStyle("segmented",Z);const n=j,C=w,l=t.useSlots(),D=t.computed(()=>T.pick(n,["orientation","dir","loop","preventScrollOnEntryFocus"])),L=_.useForwardPropsEmits(D,C),v=i.getBemBlock("segmented"),M=z.cva(v,{variants:{size:i.generateVariantClassList(F,v),block:i.generateVariantClassList("block",v)}}),m=i.getBemElement(v,"option"),P=z.cva(m,{variants:{icon:i.generateVariantClassList("icon",m),text:i.generateVariantClassList("text",m)}}),{getDir:R}=Q.useConfig(),N=R(),U=t.computed(()=>{switch(n.size){case"lg":return"xsm";default:return"2xsm"}}),c=Y.useVModel(n,"modelValue",C,{defaultValue:n.defaultModelValue,passive:n.modelValue===void 0,onChange:e=>{C("change",e)}}),{getDisabled:$}=X.useFormInput(),f=e=>[null,void 0].includes(e),u=e=>r.isObject(e)?e.value:e,A=e=>!!($.value||r.isObject(e)&&e.disabled),G=e=>r.isObject(e)?e.icon:void 0,H=e=>r.isObject(e)?e.text:u(e);t.watch(()=>n.options,()=>{var s,o;const e=(s=n.options)==null?void 0:s.find(a=>{const d=u(a);return!f(d)&&d===c.value});if(!e||f(u(e))){const a=(o=n.options)==null?void 0:o.find(d=>{const p=u(d);return!f(p)});a&&(c.value=u(a))}},{immediate:!0,deep:!0});const J=()=>{var e;return(e=n.options)==null?void 0:e.map(s=>{var E,O,k;const o=u(s);if(f(o))return;const a=A(s),d=r.isObject(s)?T.omit(s,["icon","value","text"]):{},p=c.value===o;let g;const x=(E=l.option)==null?void 0:E.call(l,{disabled:a,selected:p,option:s});r.isEmptyElement(x)||(g=x);const S=G(s),b=(O=l.icon)==null?void 0:O.call(l,{disabled:a,selected:p,option:s}),V=H(s),h=(k=l.text)==null?void 0:k.call(l,{disabled:a,selected:p,option:s});g=[];const y=!r.isEmptyElement(b),B=!!(S||y),I=!r.isEmptyElement(h),q=!!(V||I);B&&g.push(t.h(r._sfc_main$2,{icon:S,size:U.value,class:i.normCls(i.getBemElement(m,"icon"),n.optionIconCls)},y?b:void 0)),q&&g.push(t.h("div",{class:i.normCls(i.getBemElement(m,"text"),n.optionTextCls)},I?h:V));const K=c.value===o;return t.h(_.RovingFocusItem,{as:"button",active:K,focusable:!a,disabled:a,tabStopId:o,value:o,...d,class:i.normCls(P({icon:B,text:q}),n.optionCls)},()=>g)})};return(e,s)=>(t.openBlock(),t.createBlock(t.unref(_.RovingFocusGroup),t.mergeProps(t.unref(L),{dir:t.unref(N),"current-tab-stop-id":t.unref(c),"onUpdate:currentTabStopId":s[0]||(s[0]=o=>t.isRef(c)?c.value=o:null),asChild:""}),{default:t.withCtx(()=>{var o;return[t.createElementVNode("div",{class:t.normalizeClass(t.unref(i.normCls)(t.unref(M)({...n}),n.class)),style:t.normalizeStyle({gridTemplateColumns:`repeat(${((o=n.options)==null?void 0:o.length)??1}, minmax(0, 1fr))`})},[t.createVNode(J)],6)]}),_:1},16,["dir","current-tab-stop-id"]))}});exports.SegmentedSizes=F;exports._sfc_main=ee;

package/dist/Segmented.vue_vue_type_script_setup_true_lang-D7yf-Ezy.js

@@ -0,0 +1,171 @@
+import { defineComponent as X, useSlots as Y, computed as M, watch as Z, createBlock as ee, openBlock as te, unref as c, mergeProps as oe, isRef as se, withCtx as ne, createElementVNode as ae, normalizeStyle as ie, normalizeClass as le, createVNode as re, h as S } from "vue";
+import { useForwardPropsEmits as ce, RovingFocusGroup as ue, RovingFocusItem as de } from "reka-ui";
+import { getBemBlock as me, generateVariantClassList as g, getBemElement as b, normCls as x } from "@pantograph/utils";
+import { cva as D } from "class-variance-authority";
+import { u as pe } from "./ConfigProvider.vue_vue_type_script_setup_true_lang-DiuPi_DT.js";
+import { pick as fe, omit as ve } from "es-toolkit";
+import { u as ge, v as p, g as h, e as xe } from "./Icon.vue_vue_type_script_setup_true_lang-DJv20Efl.js";
+import { a as Ce } from "./options-J8HfRMSU.js";
+import { u as Se } from "./useInputDataStates-DCxDvkM-.js";
+import "@vueuse/core";
+import { u as be } from "./useVmodel-DlyNieM5.js";
+import "@tanstack/vue-virtual";
+import he from "@pantograph/style/segmented.css?raw";
+const Ve = ["sm", "md", "lg"], Pe = /* @__PURE__ */ X({
+  ...Ce("Segmented"),
+  __name: "Segmented",
+  props: {
+    options: {},
+    size: { default: "md" },
+    class: {},
+    selectionIndicatorCls: {},
+    optionCls: {},
+    optionIconCls: {},
+    optionTextCls: {},
+    block: { type: Boolean },
+    modelValue: {},
+    disabled: { type: Boolean, default: void 0 },
+    defaultModelValue: {},
+    orientation: {},
+    dir: {},
+    loop: { type: Boolean },
+    preventScrollOnEntryFocus: { type: Boolean }
+  },
+  emits: ["update:modelValue", "change", "entryFocus"],
+  setup(P, { emit: R }) {
+    ge("segmented", he);
+    const t = P, C = R, a = Y(), N = M(
+      () => fe(t, ["orientation", "dir", "loop", "preventScrollOnEntryFocus"])
+    ), $ = ce(N, C), f = me("segmented"), j = D(f, {
+      variants: {
+        size: g(Ve, f),
+        block: g("block", f)
+        // style: generateVariantClassList('absolute-selected-indicator', prefix),
+      }
+    }), u = b(f, "option"), G = D(u, {
+      variants: {
+        icon: g("icon", u),
+        text: g("text", u)
+      }
+    }), { getDir: L } = pe(), U = L(), q = M(() => {
+      switch (t.size) {
+        case "lg":
+          return "xsm";
+        default:
+          return "2xsm";
+      }
+    }), i = be(
+      t,
+      "modelValue",
+      C,
+      {
+        defaultValue: t.defaultModelValue,
+        passive: t.modelValue === void 0,
+        onChange: (e) => {
+          C("change", e);
+        }
+      }
+    ), { getDisabled: A } = Se(), v = (e) => [null, void 0].includes(e), l = (e) => p(e) ? e.value : e, H = (e) => !!(A.value || p(e) && e.disabled), J = (e) => p(e) ? e.icon : void 0, K = (e) => p(e) ? e.text : l(e);
+    Z(
+      () => t.options,
+      () => {
+        var o, s;
+        const e = (o = t.options) == null ? void 0 : o.find((n) => {
+          const r = l(n);
+          return !v(r) && r === i.value;
+        });
+        if (!e || v(l(e))) {
+          const n = (s = t.options) == null ? void 0 : s.find((r) => {
+            const d = l(r);
+            return !v(d);
+          });
+          n && (i.value = l(n));
+        }
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const Q = () => {
+      var e;
+      return (e = t.options) == null ? void 0 : e.map((o) => {
+        var E, F, w;
+        const s = l(o);
+        if (v(s)) return;
+        const n = H(o), r = p(o) ? ve(o, ["icon", "value", "text"]) : {}, d = i.value === s;
+        let m;
+        const V = (E = a.option) == null ? void 0 : E.call(a, { disabled: n, selected: d, option: o });
+        h(V) || (m = V);
+        const B = J(o), I = (F = a.icon) == null ? void 0 : F.call(a, { disabled: n, selected: d, option: o }), y = K(o), _ = (w = a.text) == null ? void 0 : w.call(a, { disabled: n, selected: d, option: o });
+        m = [];
+        const O = !h(I), z = !!(B || O), T = !h(_), k = !!(y || T);
+        z && m.push(
+          S(
+            xe,
+            {
+              icon: B,
+              size: q.value,
+              class: x(b(u, "icon"), t.optionIconCls)
+            },
+            O ? I : void 0
+          )
+        ), k && m.push(
+          S(
+            "div",
+            {
+              class: x(b(u, "text"), t.optionTextCls)
+            },
+            T ? _ : y
+          )
+        );
+        const W = i.value === s;
+        return S(
+          de,
+          {
+            as: "button",
+            active: W,
+            focusable: !n,
+            disabled: n,
+            tabStopId: s,
+            value: s,
+            ...r,
+            class: x(
+              G({
+                icon: z,
+                text: k
+              }),
+              t.optionCls
+            )
+          },
+          () => m
+        );
+      });
+    };
+    return (e, o) => (te(), ee(c(ue), oe(c($), {
+      dir: c(U),
+      "current-tab-stop-id": c(i),
+      "onUpdate:currentTabStopId": o[0] || (o[0] = (s) => se(i) ? i.value = s : null),
+      asChild: ""
+    }), {
+      default: ne(() => {
+        var s;
+        return [
+          ae("div", {
+            class: le(c(x)(c(j)({
+              ...t
+              /*, style: !style*/
+            }), t.class)),
+            style: ie({
+              gridTemplateColumns: `repeat(${((s = t.options) == null ? void 0 : s.length) ?? 1}, minmax(0, 1fr))`
+            })
+          }, [
+            re(Q)
+          ], 6)
+        ];
+      }),
+      _: 1
+    }, 16, ["dir", "current-tab-stop-id"]));
+  }
+});
+export {
+  Ve as S,
+  Pe as _
+};

package/dist/Select/Select.d.ts

@@ -8,21 +8,24 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SelectProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: import('reka-ui').AcceptableValue) => any;
+    select: (value: string, selected: boolean) => any;
+    change: (value: import('reka-ui').AcceptableValue) => any;
     closeAutoFocus: (event: Event) => any;
+    "update:open": (value: boolean) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import('reka-ui').PointerDownOutsideEvent) => any;
-    "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<SelectProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: import('reka-ui').AcceptableValue) => any) | undefined;
+    onSelect?: ((value: string, selected: boolean) => any) | undefined;
+    onChange?: ((value: import('reka-ui').AcceptableValue) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import('reka-ui').PointerDownOutsideEvent) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     size: import('./Select.model').SelectSize;
     disabled: boolean;
     placement: import('..').PopoverPlacement;
-    bordered: boolean;
     forceMount: boolean;
     prioritizePosition: boolean;
     sideOffset: number;
@@ -33,15 +36,16 @@ declare const __VLS_component: import('vue').DefineComponent<SelectProps, {}, {}
     positionStrategy: "absolute" | "fixed";
     defaultOpen: boolean;
     open: boolean;
-    trailingIcon: string;
+    position: "item-aligned" | "popper";
     multiple: boolean;
+    trailingIcon: string;
+    bordered: boolean;
     selectedItemIconAsTrailingIcon: boolean;
     indicatorIcon: string;
     loadingRowCount: number;
     clearOnChangeMultiple: boolean;
     samePopupWidth: boolean;
     popupHeight: string | number;
-    position: "item-aligned" | "popper";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-import { _ as a, a as s, S, b as c, c as l, i as o, p as i } from "../Select.vue_vue_type_style_index_0_lang-XLlU2Du1.js";
+import { _ as a, a as s, S, b as c, c as l, i as o, p as i } from "../Select.vue_vue_type_script_setup_true_lang-B8L_locv.js";
 export {
   a as Select,
   s as SelectLabel,

package/dist/Select/index.umd.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Select.vue_vue_type_style_index_0_lang-D7VjqOBv.js");exports.Select=e._sfc_main;exports.SelectLabel=e._sfc_main$1;exports.SelectOption=e.SelectOption;exports.SelectSizes=e.SelectSizes;exports.SelectStatuses=e.SelectStatuses;exports.injectSelectContext=e.injectSelectContext;exports.provideSelectContext=e.provideSelectContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Select.vue_vue_type_script_setup_true_lang-BxOgh92J.js");exports.Select=e._sfc_main;exports.SelectLabel=e._sfc_main$1;exports.SelectOption=e.SelectOption;exports.SelectSizes=e.SelectSizes;exports.SelectStatuses=e.SelectStatuses;exports.injectSelectContext=e.injectSelectContext;exports.provideSelectContext=e.provideSelectContext;

package/dist/Select/types.d.ts

@@ -1,12 +1,11 @@
 import { SelectContentEmits, SelectContentProps, SelectPortalProps, SelectRootEmits, SelectRootProps, SelectTriggerProps } from 'reka-ui';
-import { GetPopupContainer } from '../Popover/Popover';
-import { PopoverPlacement } from '../Popover';
+import { GetPopupContainer, PopoverPlacement } from '../Popover';
 import { Direction } from '../ConfigProvider';
-import { SkeletonProps } from '../Skeleton/Skeleton';
+import { SkeletonProps } from '../Skeleton';
 import { SelectSize, SelectStatus } from './Select.model';
 import { EmitToProp } from '../types';
-import { ScrollContainerProps } from '../ScrollContainer/index.js';
-import { EmptyProps } from '../Empty/index.js';
+import { ScrollContainerProps } from '../ScrollContainer';
+import { EmptyProps } from '../Empty';
 import { ClassValue } from 'class-variance-authority/types';
 export interface SelectOptionItemDefault {
     icon?: string;
@@ -76,6 +75,8 @@ export interface SelectProps extends SelectRootProps, Omit<SelectTriggerProps, '
     minWidth?: string | number;
 }
 export interface SelectEmits extends SelectRootEmits, SelectContentEmits {
+    change: SelectRootEmits['update:modelValue'];
+    select: [value: string, selected: boolean];
 }
 export type SelectEmitObject = {
     [K in keyof SelectEmits as EmitToProp<K>]: () => void;