@scalar/components 0.12.0 → 0.12.1

package/dist/components/ScalarDropdown/ScalarDropdown.vue.js

@@ -1,17 +1,17 @@
 import { defineComponent as a, openBlock as p, createBlock as i, unref as o, withCtx as t, createVNode as l, mergeProps as m, renderSlot as s, createElementVNode as f } from "vue";
 import { Menu as u, MenuItems as d, MenuButton as c } from "@headlessui/vue";
 import _ from "../ScalarFloating/ScalarFloating.vue.js";
-const h = /* @__PURE__ */ f("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1), w = /* @__PURE__ */ a({
+const g = /* @__PURE__ */ f("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1), w = /* @__PURE__ */ a({
   inheritAttrs: !1,
   __name: "ScalarDropdown",
   props: {
     placement: {},
     resize: { type: Boolean },
     isOpen: { type: Boolean },
-    teleport: { type: Boolean }
+    teleport: { type: [Boolean, String] }
   },
-  setup(B) {
-    return (e, b) => (p(), i(o(u), null, {
+  setup(h) {
+    return (e, B) => (p(), i(o(u), null, {
       default: t(({ open: r }) => [
         l(o(_), {
           isOpen: r ?? e.isOpen,
@@ -26,7 +26,7 @@ const h = /* @__PURE__ */ f("div", { class: "absolute inset-0 -z-1 rounded bg-b-
             }, e.$attrs), {
               default: t(() => [
                 s(e.$slots, "items"),
-                h
+                g
               ]),
               _: 2
             }, 1040, ["style"])

package/dist/components/ScalarFloating/ScalarFloating.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as w, ref as d, computed as t, openBlock as p, createElementBlock as z, Fragment as b, createElementVNode as r, normalizeClass as k, renderSlot as m, createBlock as B, Teleport as R, normalizeStyle as S, unref as c, createCommentVNode as _ } from "vue";
-import { getSideAxis as f } from "@floating-ui/utils";
-import { useFloating as C, autoUpdate as E, offset as F, flip as $, shift as A } from "@floating-ui/vue";
+import { defineComponent as w, ref as d, computed as t, openBlock as p, createElementBlock as z, Fragment as S, createElementVNode as r, normalizeClass as b, renderSlot as m, createBlock as k, Teleport as B, normalizeStyle as R, unref as f, createCommentVNode as C } from "vue";
+import { getSideAxis as c } from "@floating-ui/utils";
+import { useFloating as E, autoUpdate as F, offset as _, flip as $, shift as A } from "@floating-ui/vue";
 import { useResizeWithTarget as N } from "./useResizeWithTarget.js";
 const O = { class: "scalar-app" }, H = /* @__PURE__ */ w({
   inheritAttrs: !1,
@@ -10,58 +10,58 @@ const O = { class: "scalar-app" }, H = /* @__PURE__ */ w({
     resize: { type: Boolean },
     middleware: {},
     isOpen: { type: Boolean },
-    teleport: { type: Boolean }
+    teleport: { type: [Boolean, String] }
   },
   setup(u) {
-    const o = u, n = d(null), a = d(null), i = t(
+    const o = u, n = d(null), l = d(null), i = t(
       () => {
-        var e, l;
-        return (((l = (e = a.value) == null ? void 0 : e.children) == null ? void 0 : l[0]) || a.value) ?? void 0;
+        var e, a;
+        return (((a = (e = l.value) == null ? void 0 : e.children) == null ? void 0 : a[0]) || l.value) ?? void 0;
       }
     ), s = N(i, {
       enabled: t(() => o.resize)
     }), g = t(
-      () => f(o.placement || "bottom") === "y" ? s.width.value : void 0
+      () => c(o.placement || "bottom") === "y" ? s.width.value : void 0
     ), h = t(
-      () => f(o.placement || "bottom") === "x" ? s.height.value : void 0
-    ), { floatingStyles: v, middlewareData: y } = C(i, n, {
+      () => c(o.placement || "bottom") === "x" ? s.height.value : void 0
+    ), { floatingStyles: v, middlewareData: y } = E(i, n, {
       placement: t(() => o.placement),
-      whileElementsMounted: E,
+      whileElementsMounted: F,
       middleware: t(() => [
-        F(5),
+        _(5),
         $(),
         A(),
         ...o.middleware ?? []
       ])
     });
-    return (e, l) => (p(), z(b, null, [
+    return (e, a) => (p(), z(S, null, [
       r("div", {
         ref_key: "wrapperRef",
-        ref: a,
-        class: k({ contents: !!e.$slots.default })
+        ref: l,
+        class: b({ contents: !!e.$slots.default })
       }, [
         m(e.$slots, "default")
       ], 2),
-      e.isOpen ? (p(), B(R, {
+      e.isOpen ? (p(), k(B, {
         key: 0,
         disabled: !e.teleport,
-        to: "body"
+        to: typeof e.teleport == "string" ? e.teleport : "body"
       }, [
         r("div", O, [
           r("div", {
             ref_key: "floatingRef",
             ref: n,
             class: "relative z-overlay",
-            style: S(c(v))
+            style: R(f(v))
           }, [
             m(e.$slots, "floating", {
-              data: c(y),
+              data: f(y),
               height: h.value,
               width: g.value
             })
           ], 4)
         ])
-      ], 8, ["disabled"])) : _("", !0)
+      ], 8, ["disabled", "to"])) : C("", !0)
     ], 64));
   }
 });

package/dist/components/ScalarListbox/ScalarListbox.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as b, openBlock as i, createBlock as u, unref as t, normalizeClass as n, withCtx as l, createVNode as a, mergeProps as x, createElementBlock as v, Fragment as y, renderList as g, createElementVNode as o, toDisplayString as h, renderSlot as V } from "vue";
-import { Listbox as _, ListboxOptions as k, ListboxOption as z, ListboxButton as B } from "@headlessui/vue";
+import { defineComponent as b, openBlock as i, createBlock as u, unref as t, normalizeClass as n, withCtx as l, createVNode as a, mergeProps as y, createElementBlock as g, Fragment as v, renderList as x, createElementVNode as o, toDisplayString as h, renderSlot as B } from "vue";
+import { Listbox as V, ListboxOptions as k, ListboxOption as z, ListboxButton as _ } from "@headlessui/vue";
 import { cva as w, cx as L } from "../../cva.js";
 import O from "../ScalarFloating/ScalarFloating.vue.js";
 import $ from "../ScalarIcon/ScalarIcon.vue.js";
@@ -7,13 +7,14 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
+    multiple: { type: Boolean, default: !1 },
     options: {},
     modelValue: {},
     fullWidth: { type: Boolean },
     placement: {},
     resize: { type: Boolean },
     isOpen: { type: Boolean },
-    teleport: { type: Boolean }
+    teleport: { type: [Boolean, String] }
   },
   emits: ["update:modelValue"],
   setup(j) {
@@ -34,11 +35,12 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
         disabled: { true: "pointer-events-none opacity-50" }
       }
     });
-    return (e, d) => (i(), u(t(_), {
+    return (e, p) => (i(), u(t(V), {
       as: "div",
       class: n([{ "w-full": e.fullWidth }, "text-xs"]),
       modelValue: e.modelValue,
-      "onUpdate:modelValue": d[0] || (d[0] = (r) => e.$emit("update:modelValue", r))
+      multiple: e.multiple,
+      "onUpdate:modelValue": p[0] || (p[0] = (r) => e.$emit("update:modelValue", r))
     }, {
       default: l(({ open: r }) => [
         a(t(O), {
@@ -48,25 +50,25 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
           teleport: e.teleport
         }, {
           floating: l(({ width: f }) => [
-            a(t(k), x({
+            a(t(k), y({
               class: "relative flex w-40 flex-col rounded border p-0.75",
               style: { width: f }
             }, e.$attrs), {
               default: l(() => [
-                (i(!0), v(y, null, g(e.options, (s) => (i(), u(t(z), {
+                (i(!0), g(v, null, x(e.options, (s) => (i(), u(t(z), {
                   key: s.id,
                   as: "template",
                   disabled: s.disabled,
                   value: s
                 }, {
-                  default: l(({ active: c, selected: p }) => [
+                  default: l(({ active: c, selected: d }) => [
                     o("li", {
                       class: n(
-                        t(L)(t(m)({ active: c, selected: p, disabled: s.disabled }))
+                        t(L)(t(m)({ active: c, selected: d, disabled: s.disabled }))
                       )
                     }, [
                       o("div", {
-                        class: n(["flex size-4 items-center justify-center rounded-full p-[3px] group-hover:shadow-border", p ? "bg-blue text-b-1" : "text-transparent"])
+                        class: n(["flex size-4 items-center justify-center rounded-full p-[3px] group-hover:shadow-border", d ? "bg-blue text-b-1" : "text-transparent"])
                       }, [
                         a(t($), {
                           class: "relative top-[0.5px] size-2.5 stroke-[1.75]",
@@ -84,12 +86,12 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
             }, 1040, ["style"])
           ]),
           default: l(() => [
-            a(t(B), {
+            a(t(_), {
               as: "template",
               class: "justify-start"
             }, {
               default: l(() => [
-                V(e.$slots, "default")
+                B(e.$slots, "default")
               ]),
               _: 3
             })
@@ -98,7 +100,7 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
         }, 1032, ["isOpen", "placement", "resize", "teleport"])
       ]),
       _: 3
-    }, 8, ["class", "modelValue"]));
+    }, 8, ["class", "modelValue", "multiple"]));
   }
 });
 export {

package/dist/components/ScalarPopover/ScalarPopover.vue.js

@@ -1,37 +1,37 @@
-import { defineComponent as i, openBlock as f, createBlock as d, unref as t, withCtx as o, createVNode as l, mergeProps as r, renderSlot as s, createElementVNode as u } from "vue";
+import { defineComponent as i, openBlock as f, createBlock as d, unref as o, withCtx as t, createVNode as l, mergeProps as r, renderSlot as s, createElementVNode as u } from "vue";
 import { Popover as m, PopoverPanel as c, PopoverButton as _ } from "@headlessui/vue";
 import v from "../ScalarFloating/ScalarFloating.vue.js";
-const h = /* @__PURE__ */ u("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1), b = /* @__PURE__ */ i({
+const g = /* @__PURE__ */ u("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1), b = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "ScalarPopover",
   props: {
     placement: {},
     resize: { type: Boolean },
     isOpen: { type: Boolean },
-    teleport: { type: Boolean }
+    teleport: { type: [Boolean, String] }
   },
-  setup(B) {
-    return (e, P) => (f(), d(t(m), null, {
-      default: o(({ open: p }) => [
-        l(t(v), r(e.$props, {
+  setup(h) {
+    return (e, B) => (f(), d(o(m), null, {
+      default: t(({ open: p }) => [
+        l(o(v), r(e.$props, {
           isOpen: p ?? e.isOpen,
           teleport: e.teleport
         }), {
-          floating: o(({ width: a, height: n }) => [
-            l(t(c), r({
+          floating: t(({ width: n, height: a }) => [
+            l(o(c), r({
               class: "relative flex flex-col p-0.75",
-              style: { width: a, height: n }
+              style: { width: n, height: a }
             }, e.$attrs), {
-              default: o(() => [
+              default: t(() => [
                 s(e.$slots, "popover"),
-                h
+                g
               ]),
               _: 2
             }, 1040, ["style"])
           ]),
-          default: o(() => [
-            l(t(_), { as: "template" }, {
-              default: o(() => [
+          default: t(() => [
+            l(o(_), { as: "template" }, {
+              default: t(() => [
                 s(e.$slots, "default")
               ]),
               _: 3

package/dist/index.d.ts

@@ -74,6 +74,10 @@ declare type __VLS_Prettify_8<T> = {
     [K in keyof T]: T[K];
 } & {};
 
+declare type __VLS_Prettify_9<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable<T[K]>>;
@@ -275,6 +279,12 @@ declare type __VLS_WithDefaults_8<P, D> = {
     }> : P[K];
 };
 
+declare type __VLS_WithDefaults_9<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify_9<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -369,10 +379,11 @@ declare type FloatingOptions = {
      */
     isOpen?: boolean;
     /**
-     * Whether to teleport the floating element to the end of the document body.
+     * Whether to teleport the floating element.
+     * Can be an `id` to teleport to or `true` to teleport to the `<body>`.
      * @default false
      */
-    teleport?: boolean;
+    teleport?: boolean | string;
 };
 
 export declare type Icon = (typeof ICONS)[number];
@@ -592,19 +603,37 @@ size: "sm" | "md" | "xs" | "full" | "xxs";
 variant: string;
 }, {}>;
 
-export declare const ScalarListbox: __VLS_WithTemplateSlots_5<DefineComponent<__VLS_TypePropsToRuntimeProps_9<{
+export declare const ScalarListbox: __VLS_WithTemplateSlots_5<DefineComponent<__VLS_WithDefaults_5<__VLS_TypePropsToRuntimeProps_9<{
+/**
+* Allow selecting multiple values
+*
+* @default false
+*/
+multiple?: boolean | undefined;
 options: ScalarListboxOption[];
 modelValue?: ScalarListboxOption | undefined;
 fullWidth?: boolean | undefined;
-} & Omit<FloatingOptions, "middleware" | "offset">>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+} & Omit<FloatingOptions, "middleware" | "offset">>, {
+multiple: boolean;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (v: ScalarListboxOption) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_5<__VLS_TypePropsToRuntimeProps_9<{
+/**
+* Allow selecting multiple values
+*
+* @default false
+*/
+multiple?: boolean | undefined;
 options: ScalarListboxOption[];
 modelValue?: ScalarListboxOption | undefined;
 fullWidth?: boolean | undefined;
-} & Omit<FloatingOptions, "middleware" | "offset">>>> & {
+} & Omit<FloatingOptions, "middleware" | "offset">>, {
+multiple: boolean;
+}>>> & {
 "onUpdate:modelValue"?: ((v: ScalarListboxOption) => any) | undefined;
-}, {}, {}>, {
+}, {
+multiple: boolean;
+}, {}>, {
     default?(_: {}): any;
 }>;
 
@@ -615,12 +644,12 @@ export declare type ScalarListboxOption = {
     [x: string]: any;
 };
 
-export declare const ScalarLoading: DefineComponent<__VLS_WithDefaults_5<__VLS_TypePropsToRuntimeProps_10<{
+export declare const ScalarLoading: DefineComponent<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_10<{
 loadingState: LoadingState;
 size?: string | undefined;
 }>, {
 size: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_5<__VLS_TypePropsToRuntimeProps_10<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_10<{
 loadingState: LoadingState;
 size?: string | undefined;
 }>, {
@@ -643,7 +672,7 @@ withImages: boolean;
 withImages: boolean;
 }, {}>;
 
-export declare const ScalarModal: __VLS_WithTemplateSlots_6<DefineComponent<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_11<{
+export declare const ScalarModal: __VLS_WithTemplateSlots_6<DefineComponent<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_11<{
 state: ReturnType<typeof useModal>;
 title?: string | undefined;
 bodyClass?: string | undefined;
@@ -652,7 +681,7 @@ size?: "sm" | "md" | "xs" | "lg" | "full" | undefined;
 variant?: "search" | "history" | undefined;
 }>, {
 size: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_11<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_11<{
 state: ReturnType<typeof useModal>;
 title?: string | undefined;
 bodyClass?: string | undefined;
@@ -726,7 +755,7 @@ noResults?: boolean | undefined;
     default?(_: {}): any;
 }>;
 
-export declare const ScalarTextField: __VLS_WithTemplateSlots_11<DefineComponent<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_16<{
+export declare const ScalarTextField: __VLS_WithTemplateSlots_11<DefineComponent<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_16<{
 modelValue: string;
 placeholder?: string | undefined;
 label?: string | undefined;
@@ -747,7 +776,7 @@ disableTrim: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 submit: (v: string) => void;
 "update:modelValue": (v: string) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_16<{
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_16<{
 modelValue: string;
 placeholder?: string | undefined;
 label?: string | undefined;
@@ -776,7 +805,7 @@ disableTrim: boolean;
     default?(_: {}): any;
 }>;
 
-export declare const ScalarTooltip: __VLS_WithTemplateSlots_12<DefineComponent<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_17<{
+export declare const ScalarTooltip: __VLS_WithTemplateSlots_12<DefineComponent<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_17<{
 click?: (() => void) | undefined;
 delay?: number | undefined;
 skipDelay?: number | undefined;
@@ -788,7 +817,7 @@ skipDelay: number;
 side: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: () => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_17<{
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_17<{
 click?: (() => void) | undefined;
 delay?: number | undefined;
 skipDelay?: number | undefined;

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.12.0",
+  "version": "0.12.1",
   "engines": {
     "node": ">=18"
   },
@@ -39,8 +39,8 @@
     "radix-vue": "^1.8.4",
     "tailwind-merge": "^2.3.0",
     "vue": "^3.4.22",
-    "@scalar/oas-utils": "0.2.3",
-    "@scalar/code-highlight": "0.0.4"
+    "@scalar/code-highlight": "0.0.4",
+    "@scalar/oas-utils": "0.2.4"
   },
   "devDependencies": {
     "@headlessui/tailwindcss": "^0.2.0",