@scalar/components 0.21.4 → 0.22.0
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/ScalarIcon/variants.d.ts +2 -50
- package/dist/components/ScalarIcon/variants.d.ts.map +1 -1
- package/dist/components/ScalarMenu/ScalarMenuLink.vue.d.ts +2 -0
- package/dist/components/ScalarMenu/ScalarMenuLink.vue.d.ts.map +1 -1
- package/dist/components/ScalarMenu/ScalarMenuLink.vue.js.map +1 -1
- package/dist/components/ScalarMenu/ScalarMenuLink.vue.script.js +7 -6
- package/dist/components/ScalarMenu/ScalarMenuLink.vue.script.js.map +1 -1
- package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.js.map +1 -1
- package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.script.js +4 -4
- package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.script.js.map +1 -1
- package/dist/components/ScalarMenu/ScalarMenuWorkspacePicker.vue.js.map +1 -1
- package/dist/components/ScalarMenu/ScalarMenuWorkspacePicker.vue.script.js +4 -4
- package/dist/components/ScalarMenu/ScalarMenuWorkspacePicker.vue.script.js.map +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarFooter.vue.js.map +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarFooter.vue.script.js +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarFooter.vue.script.js.map +1 -1
- package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.d.ts +10 -1
- package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.d.ts.map +1 -1
- package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.js +3 -1
- package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.js.map +1 -1
- package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.script.js +183 -37
- package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.script.js.map +1 -1
- package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.d.ts +45 -0
- package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.d.ts.map +1 -0
- package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.js +9 -0
- package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.js.map +1 -0
- package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.script.js +101 -0
- package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.script.js.map +1 -0
- package/dist/docs/useBindCx/MockComponents.d.ts +4 -100
- package/dist/docs/useBindCx/MockComponents.d.ts.map +1 -1
- package/dist/style.css +96 -9
- package/package.json +14 -14
|
@@ -4,58 +4,10 @@
|
|
|
4
4
|
export declare const variants: (props?: ({
|
|
5
5
|
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
|
|
6
6
|
} & ({
|
|
7
|
-
class?:
|
|
8
|
-
[x: string]: any;
|
|
9
|
-
} | null | undefined)[] | {
|
|
10
|
-
[x: string]: any;
|
|
11
|
-
} | null | undefined)[] | {
|
|
12
|
-
[x: string]: any;
|
|
13
|
-
} | null | undefined)[] | {
|
|
14
|
-
[x: string]: any;
|
|
15
|
-
} | null | undefined)[] | {
|
|
16
|
-
[x: string]: any;
|
|
17
|
-
} | null | undefined)[] | {
|
|
18
|
-
[x: string]: any;
|
|
19
|
-
} | null | undefined)[] | {
|
|
20
|
-
[x: string]: any;
|
|
21
|
-
} | null | undefined)[] | {
|
|
22
|
-
[x: string]: any;
|
|
23
|
-
} | null | undefined)[] | {
|
|
24
|
-
[x: string]: any;
|
|
25
|
-
} | null | undefined)[] | {
|
|
26
|
-
[x: string]: any;
|
|
27
|
-
} | null | undefined)[] | {
|
|
28
|
-
[x: string]: any;
|
|
29
|
-
} | null | undefined)[] | {
|
|
30
|
-
[x: string]: any;
|
|
31
|
-
} | null | undefined;
|
|
7
|
+
class?: import("cva").ClassValue;
|
|
32
8
|
className?: never;
|
|
33
9
|
} | {
|
|
34
10
|
class?: never;
|
|
35
|
-
className?:
|
|
36
|
-
[x: string]: any;
|
|
37
|
-
} | null | undefined)[] | {
|
|
38
|
-
[x: string]: any;
|
|
39
|
-
} | null | undefined)[] | {
|
|
40
|
-
[x: string]: any;
|
|
41
|
-
} | null | undefined)[] | {
|
|
42
|
-
[x: string]: any;
|
|
43
|
-
} | null | undefined)[] | {
|
|
44
|
-
[x: string]: any;
|
|
45
|
-
} | null | undefined)[] | {
|
|
46
|
-
[x: string]: any;
|
|
47
|
-
} | null | undefined)[] | {
|
|
48
|
-
[x: string]: any;
|
|
49
|
-
} | null | undefined)[] | {
|
|
50
|
-
[x: string]: any;
|
|
51
|
-
} | null | undefined)[] | {
|
|
52
|
-
[x: string]: any;
|
|
53
|
-
} | null | undefined)[] | {
|
|
54
|
-
[x: string]: any;
|
|
55
|
-
} | null | undefined)[] | {
|
|
56
|
-
[x: string]: any;
|
|
57
|
-
} | null | undefined)[] | {
|
|
58
|
-
[x: string]: any;
|
|
59
|
-
} | null | undefined;
|
|
11
|
+
className?: import("cva").ClassValue;
|
|
60
12
|
})) | undefined) => string;
|
|
61
13
|
//# sourceMappingURL=variants.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/variants.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/variants.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;0BAgBnB,CAAA"}
|
|
@@ -18,10 +18,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
18
18
|
is?: string | Component;
|
|
19
19
|
icon?: Icon | ScalarIconComponent;
|
|
20
20
|
strong?: boolean;
|
|
21
|
+
submenu?: boolean;
|
|
21
22
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
|
|
22
23
|
is?: string | Component;
|
|
23
24
|
icon?: Icon | ScalarIconComponent;
|
|
24
25
|
strong?: boolean;
|
|
26
|
+
submenu?: boolean;
|
|
25
27
|
}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
26
28
|
default?: (props: {}) => any;
|
|
27
29
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAGlE;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;WAChB,IAAI,GAAG,mBAAmB;aACxB,OAAO;cACN,OAAO;;SAHZ,MAAM,GAAG,SAAS;WAChB,IAAI,GAAG,mBAAmB;aACxB,OAAO;cACN,OAAO;;cA2FL,CAAC,KAAK,IAAiB,KAAK,GAAG;EASzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarMenuLink.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n * Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is =
|
|
1
|
+
{"version":3,"file":"ScalarMenuLink.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n * Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = 'a' } = defineProps<{\n is?: string | Component\n icon?: Icon | ScalarIconComponent\n strong?: boolean\n submenu?: boolean\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <ScalarDropdownButton\n v-bind=\"cx('flex items-center')\"\n :is=\"submenu ? DropdownMenu.SubTrigger : DropdownMenu.Item\"\n :as=\"is\">\n <ScalarIconLegacyAdapter\n v-if=\"icon\"\n :class=\"[\n strong ? 'text-c-1' : 'text-c-2',\n typeof icon === 'string' ? 'size-3' : 'size-3.5 -mx-px',\n ]\"\n :icon=\"icon\"\n :thickness=\"strong ? '2.5' : '2'\"\n :weight=\"strong ? 'bold' : 'regular'\" />\n <div\n v-else\n class=\"size-3\" />\n <div\n class=\"flex items-center flex-1 min-w-0 truncate\"\n :class=\"strong ? 'font-medium' : 'font-normal'\">\n <slot />\n </div>\n </ScalarDropdownButton>\n</template>\n"],"mappings":""}
|
|
@@ -12,20 +12,21 @@ var ScalarMenuLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
|
|
|
12
12
|
inheritAttrs: false,
|
|
13
13
|
__name: "ScalarMenuLink",
|
|
14
14
|
props: {
|
|
15
|
-
is: { default:
|
|
15
|
+
is: { default: "a" },
|
|
16
16
|
icon: { type: [Object, Function] },
|
|
17
|
-
strong: { type: Boolean }
|
|
17
|
+
strong: { type: Boolean },
|
|
18
|
+
submenu: { type: Boolean }
|
|
18
19
|
},
|
|
19
20
|
setup(__props) {
|
|
20
21
|
const { cx } = useBindCx();
|
|
21
22
|
return (_ctx, _cache) => {
|
|
22
23
|
return openBlock(), createBlock(unref(ScalarDropdownButton_default), mergeProps(unref(cx)("flex items-center"), {
|
|
23
|
-
is: __props.
|
|
24
|
-
as:
|
|
24
|
+
is: __props.submenu ? unref(DropdownMenu).SubTrigger : unref(DropdownMenu).Item,
|
|
25
|
+
as: __props.is
|
|
25
26
|
}), {
|
|
26
27
|
default: withCtx(() => [__props.icon ? (openBlock(), createBlock(unref(ScalarIconLegacyAdapter_default), {
|
|
27
28
|
key: 0,
|
|
28
|
-
class: normalizeClass([__props.strong ? "text-c-1" : "text-c-2", typeof __props.icon === "string" ? "size-3" : "size-3.5 -mx-
|
|
29
|
+
class: normalizeClass([__props.strong ? "text-c-1" : "text-c-2", typeof __props.icon === "string" ? "size-3" : "size-3.5 -mx-px"]),
|
|
29
30
|
icon: __props.icon,
|
|
30
31
|
thickness: __props.strong ? "2.5" : "2",
|
|
31
32
|
weight: __props.strong ? "bold" : "regular"
|
|
@@ -36,7 +37,7 @@ var ScalarMenuLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
|
|
|
36
37
|
"weight"
|
|
37
38
|
])) : (openBlock(), createElementBlock("div", _hoisted_1)), createElementVNode("div", { class: normalizeClass(["flex items-center flex-1 min-w-0 truncate", __props.strong ? "font-medium" : "font-normal"]) }, [renderSlot(_ctx.$slots, "default")], 2)]),
|
|
38
39
|
_: 3
|
|
39
|
-
}, 16, ["is"]);
|
|
40
|
+
}, 16, ["is", "as"]);
|
|
40
41
|
};
|
|
41
42
|
}
|
|
42
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarMenuLink.vue.script.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n * Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is =
|
|
1
|
+
{"version":3,"file":"ScalarMenuLink.vue.script.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Link component\n *\n * A menu item that renders as a link with an optional icon.\n * Used within ScalarMenu sections.\n *\n * @example\n * <ScalarMenuLink href=\"https://example.com\" :icon=\"ScalarIconBook\">\n * Documentation\n * </ScalarMenuLink>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport type { Component } from 'vue'\n\nimport { ScalarDropdownButton } from '../ScalarDropdown'\nimport { type Icon, ScalarIconLegacyAdapter } from '../ScalarIcon'\n\nconst { is = 'a' } = defineProps<{\n is?: string | Component\n icon?: Icon | ScalarIconComponent\n strong?: boolean\n submenu?: boolean\n}>()\n\nconst { cx } = useBindCx()\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <ScalarDropdownButton\n v-bind=\"cx('flex items-center')\"\n :is=\"submenu ? DropdownMenu.SubTrigger : DropdownMenu.Item\"\n :as=\"is\">\n <ScalarIconLegacyAdapter\n v-if=\"icon\"\n :class=\"[\n strong ? 'text-c-1' : 'text-c-2',\n typeof icon === 'string' ? 'size-3' : 'size-3.5 -mx-px',\n ]\"\n :icon=\"icon\"\n :thickness=\"strong ? '2.5' : '2'\"\n :weight=\"strong ? 'bold' : 'regular'\" />\n <div\n v-else\n class=\"size-3\" />\n <div\n class=\"flex items-center flex-1 min-w-0 truncate\"\n :class=\"strong ? 'font-medium' : 'font-normal'\">\n <slot />\n </div>\n </ScalarDropdownButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,YAqBuB,MAAA,6BAAA,EArBvB,WACU,MAoBa,GApBX,CAAA,oBAAA,EAAA;IACT,IAAI,QAAA,UAAU,MAAA,aAAY,CAAC,aAAa,MAAA,aAAY,CAAC;IACrD,IAAI,QAAA;;2BASqC,CAPlC,QAAA,QAAA,WAAA,EADR,YAQ0C,MAAA,gCAAA,EAAA;;KANvC,OAAK,eAAA,CAAY,QAAA,SAAM,aAAA,YAAA,OAA2C,QAAA,SAAI,WAAA,WAAA,kBAAA,CAAA;KAItE,MAAM,QAAA;KACN,WAAW,QAAA,SAAM,QAAA;KACjB,QAAQ,QAAA,SAAM,SAAA;;;;;;wBACjB,mBAEmB,OAFnB,WAEmB,GACnB,mBAIM,OAAA,EAHJ,OAAK,eAAA,CAAC,6CACE,QAAA,SAAM,gBAAA,cAAA,CAAA,EAAA,EAAA,CACd,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarMenuTeamPicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n ScalarDropdownButton,\n ScalarDropdownMenu,\n ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst props = defineProps<{\n /** The currently selected team */\n team?: ScalarMenuTeamOption | undefined\n /** The list of teams to choose from */\n teams: ScalarMenuTeamOption[]\n}>()\n\nconst emit = defineEmits<{\n /** Emitted when the selected team changes */\n (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n /** Emitted when the user clicks the \"Create new team\" button */\n (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n get: () => props.team?.id,\n set: (v) =>\n emit(\n 'update:team',\n props.teams.find((t) => t.id === v),\n ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :
|
|
1
|
+
{"version":3,"file":"ScalarMenuTeamPicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n ScalarDropdownButton,\n ScalarDropdownMenu,\n ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst props = defineProps<{\n /** The currently selected team */\n team?: ScalarMenuTeamOption | undefined\n /** The list of teams to choose from */\n teams: ScalarMenuTeamOption[]\n}>()\n\nconst emit = defineEmits<{\n /** Emitted when the selected team changes */\n (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n /** Emitted when the user clicks the \"Create new team\" button */\n (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n get: () => props.team?.id,\n set: (v) =>\n emit(\n 'update:team',\n props.teams.find((t) => t.id === v),\n ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :icon=\"ScalarIconUserSwitch\"\n submenu\n v-bind=\"$attrs\">\n <div>Change team</div>\n <ScalarIconCaretRight\n class=\"ml-auto text-c-2 -mr-px size-3\"\n weight=\"bold\" />\n </ScalarMenuLink>\n <DropdownMenu.Portal>\n <DropdownMenu.SubContent\n :as=\"ScalarDropdownMenu\"\n class=\"max-h-radix-popper z-context-plus\"\n :sideOffset=\"3\">\n <DropdownMenu.RadioGroup\n v-model=\"model\"\n class=\"contents\">\n <DropdownMenu.RadioItem\n v-for=\"t in teams\"\n :key=\"t.id\"\n :as=\"ScalarDropdownButton\"\n class=\"group/item flex items-center\"\n :value=\"t.id\">\n <ScalarMenuTeamProfile\n class=\"-ml-0.75 flex-1 min-w-0\"\n :label=\"t.label\"\n :src=\"t.src\" />\n <ScalarListboxCheckbox\n class=\"ml-auto\"\n :selected=\"t.id === model\" />\n </DropdownMenu.RadioItem>\n </DropdownMenu.RadioGroup>\n <DropdownMenu.Item\n :as=\"ScalarDropdownButton\"\n class=\"flex items-center\"\n @click=\"emit('add')\">\n <ScalarIconPlus\n class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n weight=\"bold\" />\n Create new team\n </DropdownMenu.Item>\n </DropdownMenu.SubContent>\n </DropdownMenu.Portal>\n </DropdownMenu.Sub>\n</template>\n"],"mappings":""}
|
|
@@ -25,15 +25,15 @@ var ScalarMenuTeamPicker_vue_vue_type_script_setup_true_lang_default = /* @__PUR
|
|
|
25
25
|
return (_ctx, _cache) => {
|
|
26
26
|
return openBlock(), createBlock(unref(DropdownMenu).Sub, null, {
|
|
27
27
|
default: withCtx(() => [createVNode(unref(ScalarMenuLink_default), mergeProps({
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
icon: unref(ScalarIconUserSwitch),
|
|
29
|
+
submenu: ""
|
|
30
30
|
}, _ctx.$attrs), {
|
|
31
31
|
default: withCtx(() => [_cache[2] || (_cache[2] = createElementVNode("div", null, "Change team", -1)), createVNode(unref(ScalarIconCaretRight), {
|
|
32
|
-
class: "ml-auto text-c-2 -mr-
|
|
32
|
+
class: "ml-auto text-c-2 -mr-px size-3",
|
|
33
33
|
weight: "bold"
|
|
34
34
|
})]),
|
|
35
35
|
_: 1
|
|
36
|
-
}, 16, ["
|
|
36
|
+
}, 16, ["icon"]), createVNode(unref(DropdownMenu).Portal, null, {
|
|
37
37
|
default: withCtx(() => [createVNode(unref(DropdownMenu).SubContent, {
|
|
38
38
|
as: unref(ScalarDropdownMenu_default),
|
|
39
39
|
class: "max-h-radix-popper z-context-plus",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarMenuTeamPicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n ScalarDropdownButton,\n ScalarDropdownMenu,\n ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst props = defineProps<{\n /** The currently selected team */\n team?: ScalarMenuTeamOption | undefined\n /** The list of teams to choose from */\n teams: ScalarMenuTeamOption[]\n}>()\n\nconst emit = defineEmits<{\n /** Emitted when the selected team changes */\n (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n /** Emitted when the user clicks the \"Create new team\" button */\n (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n get: () => props.team?.id,\n set: (v) =>\n emit(\n 'update:team',\n props.teams.find((t) => t.id === v),\n ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :
|
|
1
|
+
{"version":3,"file":"ScalarMenuTeamPicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuTeamPicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Team Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between teams\n * or create a new team.\n *\n * @example\n * <ScalarMenuTeamPicker :teams=\"teams\" :team=\"currentTeam\" @update:team=\"setTeam\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconUserSwitch,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\nimport { computed } from 'vue'\n\nimport {\n ScalarDropdownButton,\n ScalarDropdownMenu,\n ScalarListboxCheckbox,\n} from '../..'\nimport { ScalarMenuLink, type ScalarMenuTeamOption } from './'\nimport ScalarMenuTeamProfile from './ScalarMenuTeamProfile.vue'\n\nconst props = defineProps<{\n /** The currently selected team */\n team?: ScalarMenuTeamOption | undefined\n /** The list of teams to choose from */\n teams: ScalarMenuTeamOption[]\n}>()\n\nconst emit = defineEmits<{\n /** Emitted when the selected team changes */\n (e: 'update:team', value: ScalarMenuTeamOption | undefined): void\n /** Emitted when the user clicks the \"Create new team\" button */\n (e: 'add'): void\n}>()\n\n/** A model that tracks the team id */\nconst model = computed<string | undefined>({\n get: () => props.team?.id,\n set: (v) =>\n emit(\n 'update:team',\n props.teams.find((t) => t.id === v),\n ),\n})\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :icon=\"ScalarIconUserSwitch\"\n submenu\n v-bind=\"$attrs\">\n <div>Change team</div>\n <ScalarIconCaretRight\n class=\"ml-auto text-c-2 -mr-px size-3\"\n weight=\"bold\" />\n </ScalarMenuLink>\n <DropdownMenu.Portal>\n <DropdownMenu.SubContent\n :as=\"ScalarDropdownMenu\"\n class=\"max-h-radix-popper z-context-plus\"\n :sideOffset=\"3\">\n <DropdownMenu.RadioGroup\n v-model=\"model\"\n class=\"contents\">\n <DropdownMenu.RadioItem\n v-for=\"t in teams\"\n :key=\"t.id\"\n :as=\"ScalarDropdownButton\"\n class=\"group/item flex items-center\"\n :value=\"t.id\">\n <ScalarMenuTeamProfile\n class=\"-ml-0.75 flex-1 min-w-0\"\n :label=\"t.label\"\n :src=\"t.src\" />\n <ScalarListboxCheckbox\n class=\"ml-auto\"\n :selected=\"t.id === model\" />\n </DropdownMenu.RadioItem>\n </DropdownMenu.RadioGroup>\n <DropdownMenu.Item\n :as=\"ScalarDropdownButton\"\n class=\"flex items-center\"\n @click=\"emit('add')\">\n <ScalarIconPlus\n class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n weight=\"bold\" />\n Create new team\n </DropdownMenu.Item>\n </DropdownMenu.SubContent>\n </DropdownMenu.Portal>\n </DropdownMenu.Sub>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EA6BA,MAAM,QAAQ;EAOd,MAAM,OAAO;;EAQb,MAAM,QAAQ,SAA6B;GACzC,WAAW,MAAM,MAAM;GACvB,MAAM,MACJ,KACE,eACA,MAAM,MAAM,MAAM,MAAM,EAAE,OAAO,EAAE,CACpC;GACJ,CAAA;;uBAKC,YA4CmB,MAAA,aAAA,CAAA,KAAA,MAAA;2BAnCA,CARjB,YAQiB,MAAA,uBAAA,EARjB,WAQiB;KAPd,MAAM,MAAA,qBAAoB;KAC3B,SAAA;OACQA,KAAAA,OAAM,EAAA;4BACQ,CAAA,OAAA,OAAA,OAAA,KAAtB,mBAAsB,OAAA,MAAjB,eAAW,GAAA,GAChB,YAEkB,MAAA,qBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;;sBAEX,YAiCsB,MAAA,aAAA,CAAA,QAAA,MAAA;4BADM,CA/B1B,YA+B0B,MAAA,aAAA,CAAA,YAAA;MA9BvB,IAAI,MAAA,2BAAkB;MACvB,OAAM;MACL,YAAY;;6BAkBa,CAjB1B,YAiB0B,MAAA,aAAA,CAAA,YAAA;mBAhBf,MAAA;0EAAK,QAAA;OACd,OAAM;;8BAEc,EAAA,UAAA,KAAA,EADpB,mBAayB,UAAA,MAAA,WAZX,QAAA,QAAL,MAAC;4BADV,YAayB,MAAA,aAAA,CAAA,WAAA;SAXtB,KAAK,EAAE;SACP,IAAI,MAAA,6BAAoB;SACzB,OAAM;SACL,OAAO,EAAE;;gCAIO,CAHjB,YAGiB,+BAAA;UAFf,OAAM;UACL,OAAO,EAAE;UACT,KAAK,EAAE;wCACV,YAE+B,MAAA,8BAAA,EAAA;UAD7B,OAAM;UACL,UAAU,EAAE,OAAO,MAAA;;;;;;6BAG1B,YAQoB,MAAA,aAAA,CAAA,MAAA;OAPjB,IAAI,MAAA,6BAAoB;OACzB,OAAM;OACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;;8BAGM,CAFlB,YAEkB,MAAA,eAAA,EAAA;QADhB,OAAM;QACN,QAAO;qDAAS,qBAEpB,GAAA,EAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarMenuWorkspacePicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n ScalarListboxCheckbox,\n type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n /** Label for the group */\n label?: string\n /** Options within the group */\n options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n /** The list of workspaces to choose from */\n workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n /** Create a new workspace */\n (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :
|
|
1
|
+
{"version":3,"file":"ScalarMenuWorkspacePicker.vue.js","names":[],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n ScalarListboxCheckbox,\n type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n /** Label for the group */\n label?: string\n /** Options within the group */\n options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n /** The list of workspaces to choose from */\n workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n /** Create a new workspace */\n (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :icon=\"ScalarIconSwap\"\n submenu\n v-bind=\"$attrs\">\n <div>Change workspace</div>\n <ScalarIconCaretRight\n class=\"ml-auto text-c-2 -mr-px size-3\"\n weight=\"bold\" />\n </ScalarMenuLink>\n\n <DropdownMenu.Portal>\n <DropdownMenu.SubContent\n :as=\"ScalarDropdownMenu\"\n class=\"max-h-radix-popper z-context-plus\"\n :sideOffset=\"3\">\n <DropdownMenu.RadioGroup\n v-model=\"model\"\n class=\"contents\">\n <template\n v-for=\"(group, groupIndex) in workspaceOptions\"\n :key=\"groupIndex\">\n <!-- Group label (only shown if there's a label) -->\n <DropdownMenu.Label\n v-if=\"group.label\"\n class=\"px-3 py-1.5 text-xs font-medium text-c-3 select-none\">\n {{ group.label }}\n </DropdownMenu.Label>\n\n <!-- Group items -->\n <DropdownMenu.RadioItem\n v-for=\"w in group.options\"\n :key=\"w.id\"\n :as=\"ScalarDropdownButton\"\n class=\"group/item flex items-center\"\n :value=\"w.id\">\n <div class=\"flex h-full items-center gap-1 flex-1 truncate\">\n {{ w.label }}\n </div>\n <ScalarListboxCheckbox\n class=\"ml-auto\"\n :selected=\"w.id === model\" />\n </DropdownMenu.RadioItem>\n\n <!-- Group separator (only between groups, not after the last one) -->\n <DropdownMenu.Separator\n v-if=\"groupIndex < workspaceOptions.length - 1\"\n class=\"h-px bg-b-3 my-1.5\" />\n </template>\n </DropdownMenu.RadioGroup>\n\n <DropdownMenu.Item\n :as=\"ScalarDropdownButton\"\n class=\"flex items-center\"\n @click=\"emit('createWorkspace')\">\n <ScalarIconPlus\n class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n weight=\"bold\" />\n Create workspace\n </DropdownMenu.Item>\n </DropdownMenu.SubContent>\n </DropdownMenu.Portal>\n </DropdownMenu.Sub>\n</template>\n"],"mappings":""}
|
|
@@ -21,15 +21,15 @@ var ScalarMenuWorkspacePicker_vue_vue_type_script_setup_true_lang_default = /* @
|
|
|
21
21
|
return (_ctx, _cache) => {
|
|
22
22
|
return openBlock(), createBlock(unref(DropdownMenu).Sub, null, {
|
|
23
23
|
default: withCtx(() => [createVNode(ScalarMenuLink_default, mergeProps({
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
icon: unref(ScalarIconSwap),
|
|
25
|
+
submenu: ""
|
|
26
26
|
}, _ctx.$attrs), {
|
|
27
27
|
default: withCtx(() => [_cache[2] || (_cache[2] = createElementVNode("div", null, "Change workspace", -1)), createVNode(unref(ScalarIconCaretRight), {
|
|
28
|
-
class: "ml-auto text-c-2 -mr-
|
|
28
|
+
class: "ml-auto text-c-2 -mr-px size-3",
|
|
29
29
|
weight: "bold"
|
|
30
30
|
})]),
|
|
31
31
|
_: 1
|
|
32
|
-
}, 16, ["
|
|
32
|
+
}, 16, ["icon"]), createVNode(unref(DropdownMenu).Portal, null, {
|
|
33
33
|
default: withCtx(() => [createVNode(unref(DropdownMenu).SubContent, {
|
|
34
34
|
as: unref(ScalarDropdownMenu_default),
|
|
35
35
|
class: "max-h-radix-popper z-context-plus",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarMenuWorkspacePicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n ScalarListboxCheckbox,\n type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n /** Label for the group */\n label?: string\n /** Options within the group */\n options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n /** The list of workspaces to choose from */\n workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n /** Create a new workspace */\n (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :
|
|
1
|
+
{"version":3,"file":"ScalarMenuWorkspacePicker.vue.script.js","names":["$attrs"],"sources":["../../../src/components/ScalarMenu/ScalarMenuWorkspacePicker.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Menu Workspace Picker component\n *\n * A sub-menu within ScalarMenu that lets users switch between\n * workspaces or create a new one.\n *\n * @example\n * <ScalarMenuWorkspacePicker v-model=\"workspaceId\" :workspaceOptions=\"groups\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n ScalarIconCaretRight,\n ScalarIconPlus,\n ScalarIconSwap,\n} from '@scalar/icons'\nimport { DropdownMenu } from 'radix-vue/namespaced'\n\nimport { ScalarDropdownButton, ScalarDropdownMenu } from '../ScalarDropdown'\nimport {\n ScalarListboxCheckbox,\n type ScalarListboxOption,\n} from '../ScalarListbox'\nimport ScalarMenuLink from './ScalarMenuLink.vue'\n\nexport type WorkspaceGroup = {\n /** Label for the group */\n label?: string\n /** Options within the group */\n options: ScalarListboxOption[]\n}\n\nconst { workspaceOptions } = defineProps<{\n /** The list of workspaces to choose from */\n workspaceOptions: WorkspaceGroup[]\n}>()\n\nconst emit = defineEmits<{\n /** Create a new workspace */\n (e: 'createWorkspace'): void\n}>()\n\nconst model = defineModel<string | undefined>()\n\ndefineOptions({ inheritAttrs: false })\n</script>\n<template>\n <DropdownMenu.Sub>\n <ScalarMenuLink\n :icon=\"ScalarIconSwap\"\n submenu\n v-bind=\"$attrs\">\n <div>Change workspace</div>\n <ScalarIconCaretRight\n class=\"ml-auto text-c-2 -mr-px size-3\"\n weight=\"bold\" />\n </ScalarMenuLink>\n\n <DropdownMenu.Portal>\n <DropdownMenu.SubContent\n :as=\"ScalarDropdownMenu\"\n class=\"max-h-radix-popper z-context-plus\"\n :sideOffset=\"3\">\n <DropdownMenu.RadioGroup\n v-model=\"model\"\n class=\"contents\">\n <template\n v-for=\"(group, groupIndex) in workspaceOptions\"\n :key=\"groupIndex\">\n <!-- Group label (only shown if there's a label) -->\n <DropdownMenu.Label\n v-if=\"group.label\"\n class=\"px-3 py-1.5 text-xs font-medium text-c-3 select-none\">\n {{ group.label }}\n </DropdownMenu.Label>\n\n <!-- Group items -->\n <DropdownMenu.RadioItem\n v-for=\"w in group.options\"\n :key=\"w.id\"\n :as=\"ScalarDropdownButton\"\n class=\"group/item flex items-center\"\n :value=\"w.id\">\n <div class=\"flex h-full items-center gap-1 flex-1 truncate\">\n {{ w.label }}\n </div>\n <ScalarListboxCheckbox\n class=\"ml-auto\"\n :selected=\"w.id === model\" />\n </DropdownMenu.RadioItem>\n\n <!-- Group separator (only between groups, not after the last one) -->\n <DropdownMenu.Separator\n v-if=\"groupIndex < workspaceOptions.length - 1\"\n class=\"h-px bg-b-3 my-1.5\" />\n </template>\n </DropdownMenu.RadioGroup>\n\n <DropdownMenu.Item\n :as=\"ScalarDropdownButton\"\n class=\"flex items-center\"\n @click=\"emit('createWorkspace')\">\n <ScalarIconPlus\n class=\"bg-b-3 -ml-0.75 rounded p-1 size-5 text-c-3\"\n weight=\"bold\" />\n Create workspace\n </DropdownMenu.Item>\n </DropdownMenu.SubContent>\n </DropdownMenu.Portal>\n </DropdownMenu.Sub>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuCA,MAAM,OAAO;EAKb,MAAM,QAAQ,SAA+B,SAAA,aAAC;;uBAK5C,YA8DmB,MAAA,aAAA,CAAA,KAAA,MAAA;2BArDA,CARjB,YAQiB,wBARjB,WAQiB;KAPd,MAAM,MAAA,eAAc;KACrB,SAAA;OACQA,KAAAA,OAAM,EAAA;4BACa,CAAA,OAAA,OAAA,OAAA,KAA3B,mBAA2B,OAAA,MAAtB,oBAAgB,GAAA,GACrB,YAEkB,MAAA,qBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;;sBAGX,YAkDsB,MAAA,aAAA,CAAA,QAAA,MAAA;4BADM,CAhD1B,YAgD0B,MAAA,aAAA,CAAA,YAAA;MA/CvB,IAAI,MAAA,2BAAkB;MACvB,OAAM;MACL,YAAY;;6BAkCa,CAjC1B,YAiC0B,MAAA,aAAA,CAAA,YAAA;mBAhCf,MAAA;0EAAK,QAAA;OACd,OAAM;;8BAE2C,EAAA,UAAA,KAAA,EADjD,mBA6BW,UAAA,MAAA,WA5BqB,QAAA,mBAAtB,OAAO,eAAU;gEACnB,YAAU,EAAA;SAGR,MAAM,SAAA,WAAA,EADd,YAIqB,MAAA,aAAA,CAAA,OAAA;;UAFnB,OAAM;;iCACW,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;2BAIhB,mBAYyB,UAAA,MAAA,WAXX,MAAM,UAAX,MAAC;8BADV,YAYyB,MAAA,aAAA,CAAA,WAAA;WAVtB,KAAK,EAAE;WACP,IAAI,MAAA,6BAAoB;WACzB,OAAM;WACL,OAAO,EAAE;;kCAGJ,CAFN,mBAEM,OAFN,YAEM,gBADD,EAAE,MAAK,EAAA,EAAA,EAEZ,YAE+B,MAAA,8BAAA,EAAA;YAD7B,OAAM;YACL,UAAU,EAAE,OAAO,MAAA;;;;;SAKhB,aAAa,QAAA,iBAAiB,SAAM,KAAA,WAAA,EAD5C,YAE+B,MAAA,aAAA,CAAA,WAAA;;UAA7B,OAAM;;;;;6BAIZ,YAQoB,MAAA,aAAA,CAAA,MAAA;OAPjB,IAAI,MAAA,6BAAoB;OACzB,OAAM;OACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,kBAAA;;8BAGM,CAFlB,YAEkB,MAAA,eAAA,EAAA;QADhB,OAAM;QACN,QAAO;qDAAS,sBAEpB,GAAA,EAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebarFooter.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n * <ScalarSidebarFooter>\n * <!-- Footer content at the top of the footer -->\n * <template #description>\n * <!-- Replaces the Powered by Scalar link -->\n * </template>\n * <template #toggle>\n * <!-- Replaces the color mode toggle -->\n * </template>\n * </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n /** Footer content at the top of the footer */\n default?(): unknown\n /** Replaces the Powered by Scalar link */\n description?(): unknown\n /** Replaces the color mode toggle */\n toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-3
|
|
1
|
+
{"version":3,"file":"ScalarSidebarFooter.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n * <ScalarSidebarFooter>\n * <!-- Footer content at the top of the footer -->\n * <template #description>\n * <!-- Replaces the Powered by Scalar link -->\n * </template>\n * <template #toggle>\n * <!-- Replaces the color mode toggle -->\n * </template>\n * </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n /** Footer content at the top of the footer */\n default?(): unknown\n /** Replaces the Powered by Scalar link */\n description?(): unknown\n /** Replaces the color mode toggle */\n toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-3 px-3 pb-3 border-sidebar-border')\">\n <slot />\n <div class=\"flex items-center\">\n <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n <slot name=\"description\">\n <a\n class=\"no-underline hover:underline\"\n href=\"https://www.scalar.com\"\n target=\"_blank\">\n Powered by Scalar\n </a>\n </slot>\n </div>\n <slot name=\"toggle\">\n <ScalarColorModeToggle />\n </slot>\n </div>\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -10,7 +10,7 @@ var ScalarSidebarFooter_vue_vue_type_script_setup_true_lang_default = /* @__PURE
|
|
|
10
10
|
setup(__props) {
|
|
11
11
|
const { cx } = useBindCx();
|
|
12
12
|
return (_ctx, _cache) => {
|
|
13
|
-
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex flex-col gap-3
|
|
13
|
+
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex flex-col gap-3 px-3 pb-3 border-sidebar-border"))), [renderSlot(_ctx.$slots, "default"), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "description", {}, () => [_cache[0] || (_cache[0] = createElementVNode("a", {
|
|
14
14
|
class: "no-underline hover:underline",
|
|
15
15
|
href: "https://www.scalar.com",
|
|
16
16
|
target: "_blank"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebarFooter.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n * <ScalarSidebarFooter>\n * <!-- Footer content at the top of the footer -->\n * <template #description>\n * <!-- Replaces the Powered by Scalar link -->\n * </template>\n * <template #toggle>\n * <!-- Replaces the color mode toggle -->\n * </template>\n * </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n /** Footer content at the top of the footer */\n default?(): unknown\n /** Replaces the Powered by Scalar link */\n description?(): unknown\n /** Replaces the color mode toggle */\n toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-3
|
|
1
|
+
{"version":3,"file":"ScalarSidebarFooter.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarFooter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Footer component\n *\n * A footer for the sidebar, be default it contains a\n * \"Powered by Scalar\" link and a {@link ScalarColorModeToggle} toggle.\n *\n * @example\n * <ScalarSidebarFooter>\n * <!-- Footer content at the top of the footer -->\n * <template #description>\n * <!-- Replaces the Powered by Scalar link -->\n * </template>\n * <template #toggle>\n * <!-- Replaces the color mode toggle -->\n * </template>\n * </ScalarSidebarFooter>\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarColorModeToggle } from '../ScalarColorModeToggle'\n\ndefineSlots<{\n /** Footer content at the top of the footer */\n default?(): unknown\n /** Replaces the Powered by Scalar link */\n description?(): unknown\n /** Replaces the color mode toggle */\n toggle?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div v-bind=\"cx('flex flex-col gap-3 px-3 pb-3 border-sidebar-border')\">\n <slot />\n <div class=\"flex items-center\">\n <div class=\"flex-1 min-w-0 flex items-center text-sm text-sidebar-c-2\">\n <slot name=\"description\">\n <a\n class=\"no-underline hover:underline\"\n href=\"https://www.scalar.com\"\n target=\"_blank\">\n Powered by Scalar\n </a>\n </slot>\n </div>\n <slot name=\"toggle\">\n <ScalarColorModeToggle />\n </slot>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAiBM,OAAA,eAAA,mBAjBO,MAAA,GAAE,CAAA,sDAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,EACR,mBAcM,OAdN,YAcM,CAbJ,mBASM,OATN,YASM,CARJ,WAOO,KAAA,QAAA,eAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KANL,mBAKI,KAAA;IAJF,OAAM;IACN,MAAK;IACL,QAAO;MAAS,uBAElB,GAAA,EAAA,CAAA,CAAA,CAAA,EAGJ,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CADL,YAAyB,MAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA"}
|
|
@@ -2,10 +2,14 @@
|
|
|
2
2
|
* Scalar Virtual Text component
|
|
3
3
|
*
|
|
4
4
|
* Renders large blocks of text efficiently using virtualized scrolling.
|
|
5
|
-
* Only the visible lines are rendered to the DOM.
|
|
5
|
+
* Only the visible lines are rendered to the DOM. Supports in-content
|
|
6
|
+
* search with match highlighting and navigation (Cmd/Ctrl+F).
|
|
6
7
|
*
|
|
7
8
|
* @example
|
|
8
9
|
* <ScalarVirtualText text="line1\nline2\nline3" :lineHeight="20" />
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* <ScalarVirtualText text="lots of text" searchable />
|
|
9
13
|
*/
|
|
10
14
|
declare const _default: typeof __VLS_export;
|
|
11
15
|
export default _default;
|
|
@@ -20,6 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
|
|
|
20
24
|
containerClass?: string;
|
|
21
25
|
contentClass?: string;
|
|
22
26
|
lineClass?: string;
|
|
27
|
+
/** Enable built-in search with Cmd/Ctrl+F */
|
|
28
|
+
searchable?: boolean;
|
|
23
29
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
|
|
24
30
|
/** Text to display */
|
|
25
31
|
text: string;
|
|
@@ -31,10 +37,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
|
|
|
31
37
|
containerClass?: string;
|
|
32
38
|
contentClass?: string;
|
|
33
39
|
lineClass?: string;
|
|
40
|
+
/** Enable built-in search with Cmd/Ctrl+F */
|
|
41
|
+
searchable?: boolean;
|
|
34
42
|
}> & Readonly<{}>, {
|
|
35
43
|
lineHeight: number;
|
|
36
44
|
containerClass: string;
|
|
37
45
|
contentClass: string;
|
|
38
46
|
lineClass: string;
|
|
47
|
+
searchable: boolean;
|
|
39
48
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
40
49
|
//# sourceMappingURL=ScalarVirtualText.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"AAkXA;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;IAXpB,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;gBALP,MAAM;oBACF,MAAM;kBACR,MAAM;eACT,MAAM;gBAEL,OAAO;6EA+ZpB,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
|
|
1
2
|
import ScalarVirtualText_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualText.vue.script.js";
|
|
3
|
+
/* empty css */
|
|
2
4
|
//#region src/components/ScalarVirtualText/ScalarVirtualText.vue
|
|
3
|
-
var ScalarVirtualText_default = ScalarVirtualText_vue_vue_type_script_setup_true_lang_default;
|
|
5
|
+
var ScalarVirtualText_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarVirtualText_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b50a85e1"]]);
|
|
4
6
|
//#endregion
|
|
5
7
|
export { ScalarVirtualText_default as default };
|
|
6
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarVirtualText.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Text component\n *\n * Renders large blocks of text efficiently using virtualized scrolling.\n * Only the visible lines are rendered to the DOM.\n *\n * @example\n * <ScalarVirtualText text=\"line1\\nline2\\nline3\" :lineHeight=\"20\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\n\nconst props = withDefaults(\n defineProps<{\n /** Text to display */\n text: string\n /**\n * Height of each line\n * @default 20\n */\n lineHeight?: number\n containerClass?: string\n contentClass?: string\n lineClass?: string\n }>(),\n {\n lineHeight: 20,\n containerClass: '',\n contentClass: '',\n lineClass: '',\n },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst contentRef = ref<HTMLElement | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/**\n * Total height of all lines combined\n *\n * TODO: there is a problem with this calculation which screws up the scrollbar a bit\n */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n Math.min(\n Math.ceil(\n (scrollPosition.value + containerHeight.value) / props.lineHeight,\n ),\n lines.value.length,\n ),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n const buffer = 10\n const start = Math.max(0, visibleStartIndex.value - buffer)\n const end = Math.min(lines.value.length, visibleEndIndex.value + buffer)\n\n return lines.value.slice(start, end)\n})\n\n/** Style object for the content container, controls \"scrolling\" */\nconst contentStyle = computed(() => ({\n height: `${totalHeight.value}px`,\n transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`,\n}))\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n containerRef.value &&\n (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n updateContainerHeight()\n window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('resize', updateContainerHeight)\n})\n\nwatchEffect(() => {\n if (!contentRef.value) {\n return\n }\n\n contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`\n})\n</script>\n\n<template>\n <div\n ref=\"containerRef\"\n class=\"scalar-virtual-text overflow-auto\"\n :class=\"containerClass\"\n @scroll=\"handleScroll\">\n <code\n ref=\"contentRef\"\n class=\"scalar-virtual-text-content\"\n :class=\"contentClass\"\n :style=\"contentStyle\">\n <div\n v-for=\"(line, index) in visibleLines\"\n :key=\"visibleStartIndex + index\"\n class=\"scalar-virtual-text-line\"\n :class=\"lineClass\"\n :style=\"{\n height: `${props.lineHeight}px`,\n lineHeight: `${props.lineHeight}px`,\n }\">\n {{ line }}\n </div>\n </code>\n </div>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ScalarVirtualText.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Text component\n *\n * Renders large blocks of text efficiently using virtualized scrolling.\n * Only the visible lines are rendered to the DOM. Supports in-content\n * search with match highlighting and navigation (Cmd/Ctrl+F).\n *\n * @example\n * <ScalarVirtualText text=\"line1\\nline2\\nline3\" :lineHeight=\"20\" />\n *\n * @example\n * <ScalarVirtualText text=\"lots of text\" searchable />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport ScalarVirtualTextSearch from './ScalarVirtualTextSearch.vue'\n\nconst props = withDefaults(\n defineProps<{\n /** Text to display */\n text: string\n /**\n * Height of each line\n * @default 20\n */\n lineHeight?: number\n containerClass?: string\n contentClass?: string\n lineClass?: string\n /** Enable built-in search with Cmd/Ctrl+F */\n searchable?: boolean\n }>(),\n {\n lineHeight: 20,\n containerClass: '',\n contentClass: '',\n lineClass: '',\n searchable: false,\n },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst searchRef = ref<InstanceType<typeof ScalarVirtualTextSearch> | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\nconst searchQuery = ref('')\nconst searchOpen = ref(false)\nconst activeMatchIndex = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/** Total height of all lines combined */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n Math.min(\n Math.ceil(\n (scrollPosition.value + containerHeight.value) / props.lineHeight,\n ),\n lines.value.length,\n ),\n)\n\nconst BUFFER = 10\n\n/** Index of the first rendered line (clamped, shared between slice and offset) */\nconst renderStartIndex = computed(() =>\n Math.max(0, visibleStartIndex.value - BUFFER),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n const end = Math.min(lines.value.length, visibleEndIndex.value + BUFFER)\n return lines.value.slice(renderStartIndex.value, end)\n})\n\n/** Pixel offset for the visible content slice */\nconst contentOffset = computed(() => renderStartIndex.value * props.lineHeight)\n\n// ── Search ────────────────────────────────────────────────────────────\n\ntype SearchMatch = { line: number; start: number; end: number }\n\n/** All matches across the full text, computed only when the query changes */\nconst searchMatches = computed<SearchMatch[]>(() => {\n const query = searchQuery.value\n if (!query) return []\n\n const lowerQuery = query.toLowerCase()\n const matches: SearchMatch[] = []\n\n for (let i = 0; i < lines.value.length; i++) {\n const line = lines.value[i]\n if (!line) continue\n const lowerLine = line.toLowerCase()\n let pos = 0\n while (pos < lowerLine.length) {\n const idx = lowerLine.indexOf(lowerQuery, pos)\n if (idx === -1) break\n matches.push({ line: i, start: idx, end: idx + query.length })\n pos = idx + lowerQuery.length\n }\n }\n return matches\n})\n\n/** Set of line indices that contain at least one match, for quick lookup */\nconst matchLineSet = computed(() => {\n const set = new Set<number>()\n for (const m of searchMatches.value) set.add(m.line)\n return set\n})\n\n/** Clamp active index when match count changes */\nwatch(\n () => searchMatches.value.length,\n (count) => {\n if (count === 0) {\n activeMatchIndex.value = 0\n } else if (activeMatchIndex.value >= count) {\n activeMatchIndex.value = count - 1\n }\n },\n)\n\n/** Scroll the container so the active match's line is visible */\nconst scrollToMatch = (match: SearchMatch) => {\n if (!containerRef.value) return\n\n const targetScroll = match.line * props.lineHeight\n const viewTop = containerRef.value.scrollTop\n const viewBottom = viewTop + containerRef.value.clientHeight\n\n if (targetScroll < viewTop || targetScroll + props.lineHeight > viewBottom) {\n containerRef.value.scrollTop =\n targetScroll - containerRef.value.clientHeight / 2\n }\n}\n\nconst goToMatch = (index: number) => {\n const match = searchMatches.value[index]\n if (!match) return\n activeMatchIndex.value = index\n scrollToMatch(match)\n}\n\nconst nextMatch = () => {\n if (searchMatches.value.length === 0) return\n goToMatch((activeMatchIndex.value + 1) % searchMatches.value.length)\n}\n\nconst prevMatch = () => {\n if (searchMatches.value.length === 0) return\n goToMatch(\n (activeMatchIndex.value - 1 + searchMatches.value.length) %\n searchMatches.value.length,\n )\n}\n\nconst openSearch = () => {\n searchOpen.value = true\n void nextTick(() => searchRef.value?.focus())\n}\n\nconst closeSearch = () => {\n searchOpen.value = false\n searchQuery.value = ''\n activeMatchIndex.value = 0\n}\n\n/** Intercepts Cmd/Ctrl+F when searchable and the container has focus */\nconst handleKeydown = (e: KeyboardEvent) => {\n if (!props.searchable) return\n\n const modifier = e.metaKey || e.ctrlKey\n if (modifier && e.key === 'f') {\n e.preventDefault()\n e.stopPropagation()\n openSearch()\n }\n if (e.key === 'Escape' && searchOpen.value) {\n e.preventDefault()\n closeSearch()\n }\n}\n\n/** Jump to the first match whenever the query changes */\nwatch(searchQuery, () => {\n activeMatchIndex.value = 0\n const first = searchMatches.value[0]\n if (first) {\n scrollToMatch(first)\n }\n})\n\n// ── Scroll / resize ───────────────────────────────────────────────────\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n containerRef.value &&\n (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n updateContainerHeight()\n window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('resize', updateContainerHeight)\n})\n\n// ── Line rendering with highlights ────────────────────────────────────\n\ntype LineSegment = { text: string; highlight: boolean; active: boolean }\n\n/**\n * For a given absolute line index, splits the line text into segments\n * with match highlighting metadata.\n */\nconst getLineSegments = (absoluteIndex: number): LineSegment[] => {\n const lineText = lines.value[absoluteIndex] ?? ''\n if (!searchQuery.value || !matchLineSet.value.has(absoluteIndex)) {\n return [{ text: lineText, highlight: false, active: false }]\n }\n\n const lineMatches = searchMatches.value.filter(\n (m) => m.line === absoluteIndex,\n )\n const segments: LineSegment[] = []\n let cursor = 0\n\n for (const match of lineMatches) {\n if (match.start > cursor) {\n segments.push({\n text: lineText.slice(cursor, match.start),\n highlight: false,\n active: false,\n })\n }\n\n const isActive =\n searchMatches.value.indexOf(match) === activeMatchIndex.value\n\n segments.push({\n text: lineText.slice(match.start, match.end),\n highlight: true,\n active: isActive,\n })\n cursor = match.end\n }\n\n if (cursor < lineText.length) {\n segments.push({\n text: lineText.slice(cursor),\n highlight: false,\n active: false,\n })\n }\n\n return segments\n}\n\n/**\n * Converts a relative visible-line index to the absolute line index\n * in the full text.\n */\nconst toAbsoluteIndex = (relativeIndex: number): number =>\n renderStartIndex.value + relativeIndex\n</script>\n\n<template>\n <div\n ref=\"containerRef\"\n class=\"scalar-virtual-text relative overflow-auto\"\n :class=\"containerClass\"\n tabindex=\"0\"\n @keydown=\"handleKeydown\"\n @scroll=\"handleScroll\">\n <!-- Zero-height wrapper so the search bar does not contribute to scrollHeight -->\n <div\n v-if=\"searchable && searchOpen\"\n class=\"sticky top-0 z-10 flex h-0 w-full justify-end overflow-visible\">\n <ScalarVirtualTextSearch\n ref=\"searchRef\"\n v-model:query=\"searchQuery\"\n :activeMatchIndex=\"activeMatchIndex\"\n :matchCount=\"searchMatches.length\"\n @close=\"closeSearch\"\n @next=\"nextMatch\"\n @prev=\"prevMatch\" />\n </div>\n\n <!-- Invisible spacer that defines the full scrollable height -->\n <div :style=\"{ height: `${totalHeight}px` }\" />\n <code\n class=\"scalar-virtual-text-content absolute left-0 right-0 top-0\"\n :class=\"contentClass\"\n :style=\"{ transform: `translateY(${contentOffset}px)` }\">\n <div\n v-for=\"(line, index) in visibleLines\"\n :key=\"renderStartIndex + index\"\n class=\"scalar-virtual-text-line\"\n :class=\"lineClass\"\n :style=\"{\n height: `${props.lineHeight}px`,\n lineHeight: `${props.lineHeight}px`,\n }\">\n <template\n v-if=\"searchQuery && matchLineSet.has(toAbsoluteIndex(index))\">\n <template\n v-for=\"(segment, sIdx) in getLineSegments(toAbsoluteIndex(index))\"\n :key=\"sIdx\">\n <mark\n v-if=\"segment.highlight\"\n class=\"scalar-virtual-text-highlight\"\n :class=\"\n segment.active ? 'scalar-virtual-text-highlight-active' : ''\n \">\n {{ segment.text }}\n </mark>\n <template v-else>{{ segment.text }}</template>\n </template>\n </template>\n <template v-else>{{ line }}</template>\n </div>\n </code>\n </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text:focus {\n outline: none;\n}\n\n.scalar-virtual-text-highlight {\n background: var(--scalar-background-accent);\n color: inherit;\n border-radius: 2px;\n padding: 1px 0;\n}\n\n.scalar-virtual-text-highlight-active {\n background: var(--scalar-color-accent);\n color: var(--scalar-background-1);\n border-radius: 2px;\n}\n</style>\n"],"mappings":""}
|