@scalar/components 0.29.2 → 0.29.3
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/ScalarDropdown/ScalarDropdownButton.vue.js +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.js.map +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.script.js +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.script.js.map +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts.map +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.js.map +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.script.js +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.script.js.map +1 -1
- package/dist/style.css +2 -2
- package/dist/vue-styles.css +2 -2
- package/package.json +7 -7
|
@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
|
|
|
2
2
|
import ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default from "./ScalarDropdownButton.vue.script.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/ScalarDropdown/ScalarDropdownButton.vue
|
|
5
|
-
var ScalarDropdownButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
5
|
+
var ScalarDropdownButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-128eed00"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ScalarDropdownButton_default as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarDropdownButton.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown button base component\n *\n * Provide a styled button for the ScalarDropdown or similar\n *\n * This is used internally by the ScalarDropdownItem component\n *\n * If you're looking to add items to a dropdown menu you\n * probably want the ScalarDropdownItem component\n *\n * @example\n * <ScalarDropdownButton ＠click=\"handleClick\">\n * Label\n * </ScalarDropdownButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n is?: string | Component\n active?: boolean\n disabled?: boolean\n}>()\n\nconst variants = cva({\n base: [\n // Layout\n 'block h-8 min-w-0 gap-1.5 rounded px-2.5 py-1.5 text-left',\n // Text / background style\n 'truncate no-underline text-sm text-c-1',\n // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n // Radix keyboard navigation and mouse-hover within Radix menu items\n 'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n ],\n variants: {\n disabled: { true: 'pointer-events-none text-c-3' },\n active: { true: '' },\n },\n compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n <component\n :is=\"is\"\n :aria-disabled=\"disabled\"\n class=\"item\"\n :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n :type=\"is === 'button' ? 'button' : undefined\">\n <slot />\n </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ScalarDropdownButton.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown button base component\n *\n * Provide a styled button for the ScalarDropdown or similar\n *\n * This is used internally by the ScalarDropdownItem component\n *\n * If you're looking to add items to a dropdown menu you\n * probably want the ScalarDropdownItem component\n *\n * @example\n * <ScalarDropdownButton ＠click=\"handleClick\">\n * Label\n * </ScalarDropdownButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n is?: string | Component\n active?: boolean\n disabled?: boolean\n}>()\n\nconst variants = cva({\n base: [\n // Layout\n 'block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left',\n // Text / background style\n 'truncate no-underline text-sm text-c-1',\n // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n // Radix keyboard navigation and mouse-hover within Radix menu items\n 'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n ],\n variants: {\n disabled: { true: 'pointer-events-none text-c-3' },\n active: { true: '' },\n },\n compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n <component\n :is=\"is\"\n :aria-disabled=\"disabled\"\n class=\"item\"\n :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n :type=\"is === 'button' ? 'button' : undefined\">\n <slot />\n </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n filter: brightness(1.1);\n}\n</style>\n"],"mappings":""}
|
|
@@ -10,7 +10,7 @@ var ScalarDropdownButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE
|
|
|
10
10
|
setup(__props) {
|
|
11
11
|
const variants = cva({
|
|
12
12
|
base: [
|
|
13
|
-
"block h-8 min-w-0 gap-1.5 rounded px-2.5 py-1.5 text-left",
|
|
13
|
+
"block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left",
|
|
14
14
|
"truncate no-underline text-sm text-c-1",
|
|
15
15
|
"cursor-pointer hover:bg-b-2 highlighted:bg-b-2"
|
|
16
16
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarDropdownButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown button base component\n *\n * Provide a styled button for the ScalarDropdown or similar\n *\n * This is used internally by the ScalarDropdownItem component\n *\n * If you're looking to add items to a dropdown menu you\n * probably want the ScalarDropdownItem component\n *\n * @example\n * <ScalarDropdownButton ＠click=\"handleClick\">\n * Label\n * </ScalarDropdownButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n is?: string | Component\n active?: boolean\n disabled?: boolean\n}>()\n\nconst variants = cva({\n base: [\n // Layout\n 'block h-8 min-w-0 gap-1.5 rounded px-2.5 py-1.5 text-left',\n // Text / background style\n 'truncate no-underline text-sm text-c-1',\n // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n // Radix keyboard navigation and mouse-hover within Radix menu items\n 'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n ],\n variants: {\n disabled: { true: 'pointer-events-none text-c-3' },\n active: { true: '' },\n },\n compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n <component\n :is=\"is\"\n :aria-disabled=\"disabled\"\n class=\"item\"\n :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n :type=\"is === 'button' ? 'button' : undefined\">\n <slot />\n </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAGA;GACF;GACA,UAAU;IACR,UAAU,EAAE,MAAM,+BAA+B;IACjD,QAAQ,EAAE,MAAM,GAAG;GACrB;GACA,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;GAAS,CAAC;EACvE,CAAC;;uBAGC,YAOY,wBANL,QAAA,EAAE,GAAA;IACN,iBAAe,QAAA;IAChB,OAAK,eAAA,CAAC,QACE,MAAA,EAAA,CAAE,CAAA,wBAAyB,MAAA,QAAA,CAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;IAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;2BAC5B,CAAR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"ScalarDropdownButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown button base component\n *\n * Provide a styled button for the ScalarDropdown or similar\n *\n * This is used internally by the ScalarDropdownItem component\n *\n * If you're looking to add items to a dropdown menu you\n * probably want the ScalarDropdownItem component\n *\n * @example\n * <ScalarDropdownButton ＠click=\"handleClick\">\n * Label\n * </ScalarDropdownButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport type { Component } from 'vue'\n\nconst { is = 'button' } = defineProps<{\n is?: string | Component\n active?: boolean\n disabled?: boolean\n}>()\n\nconst variants = cva({\n base: [\n // Layout\n 'block h-8 min-w-0 gap-1.5 rounded-md px-2.5 py-1.5 text-left',\n // Text / background style\n 'truncate no-underline text-sm text-c-1',\n // Interaction — hover:bg-b-2 handles mouse, highlighted:bg-b-2 handles\n // Radix keyboard navigation and mouse-hover within Radix menu items\n 'cursor-pointer hover:bg-b-2 highlighted:bg-b-2',\n ],\n variants: {\n disabled: { true: 'pointer-events-none text-c-3' },\n active: { true: '' },\n },\n compoundVariants: [{ disabled: false, active: true, class: 'bg-b-2' }],\n})\n</script>\n<template>\n <component\n :is=\"is\"\n :aria-disabled=\"disabled\"\n class=\"item\"\n :class=\"cx('scalar-dropdown-item', variants({ active, disabled }))\"\n :type=\"is === 'button' ? 'button' : undefined\">\n <slot />\n </component>\n</template>\n<style scoped>\n.dark-mode .scalar-dropdown-item:hover,\n.dark-mode .scalar-dropdown-item[data-highlighted] {\n filter: brightness(1.1);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,WAAW,IAAI;GACnB,MAAM;IAEJ;IAEA;IAGA;GACF;GACA,UAAU;IACR,UAAU,EAAE,MAAM,+BAA+B;IACjD,QAAQ,EAAE,MAAM,GAAG;GACrB;GACA,kBAAkB,CAAC;IAAE,UAAU;IAAO,QAAQ;IAAM,OAAO;GAAS,CAAC;EACvE,CAAC;;uBAGC,YAOY,wBANL,QAAA,EAAE,GAAA;IACN,iBAAe,QAAA;IAChB,OAAK,eAAA,CAAC,QACE,MAAA,EAAA,CAAE,CAAA,wBAAyB,MAAA,QAAA,CAAQ,CAAA;KAAA,QAAG,QAAA;KAAM,UAAE,QAAA;IAAQ,CAAA,CAAA,CAAA,CAAA;IAC7D,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;;2BAC5B,CAAR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AAgEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;gBACZ,OAAO;IACnB,6CAA6C;aACpC,OAAO;IAChB,8CAA8C;iBACjC,OAAO;
|
|
1
|
+
{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AAgEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;gBACZ,OAAO;IACnB,6CAA6C;aACpC,OAAO;IAChB,8CAA8C;iBACjC,OAAO;EA6ElB,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":"ScalarDropdownMenu.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n * <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n * <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\n\ndefineProps<{\n /** The component to render */\n is?: string | Component\n}>()\n\ndefineSlots<{\n /** The menu contents */\n default?(): unknown\n /** Overrides the normal menu list element */\n menu?(): unknown\n /** Overrides the backdrop for the dropdown */\n backdrop?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <!-- Background container -->\n <component\n :is=\"is ?? 'div'\"\n v-bind=\"cx('relative flex w-56')\">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1\">\n <!-- Menu items -->\n <slot name=\"menu\">\n <div class=\"flex flex-col p-0.75\">\n <slot />\n </div>\n </slot>\n <slot name=\"backdrop\">\n <ScalarFloatingBackdrop />\n </slot>\n </div>\n </component>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ScalarDropdownMenu.vue.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n * <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n * <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\n\ndefineProps<{\n /** The component to render */\n is?: string | Component\n}>()\n\ndefineSlots<{\n /** The menu contents */\n default?(): unknown\n /** Overrides the normal menu list element */\n menu?(): unknown\n /** Overrides the backdrop for the dropdown */\n backdrop?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <!-- Background container -->\n <component\n :is=\"is ?? 'div'\"\n v-bind=\"cx('relative flex w-56')\">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1\">\n <!-- Menu items -->\n <slot name=\"menu\">\n <div class=\"flex flex-col p-0.75\">\n <slot />\n </div>\n </slot>\n <slot name=\"backdrop\">\n <ScalarFloatingBackdrop class=\"rounded-xl border shadow-md\" />\n </slot>\n </div>\n </component>\n</template>\n"],"mappings":""}
|
|
@@ -12,7 +12,7 @@ var ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
|
|
|
12
12
|
const { cx } = useBindCx();
|
|
13
13
|
return (_ctx, _cache) => {
|
|
14
14
|
return openBlock(), createBlock(resolveDynamicComponent(__props.is ?? "div"), normalizeProps(guardReactiveProps(unref(cx)("relative flex w-56"))), {
|
|
15
|
-
default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])]), renderSlot(_ctx.$slots, "backdrop", {}, () => [createVNode(unref(ScalarFloatingBackdrop_default))])])]),
|
|
15
|
+
default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])]), renderSlot(_ctx.$slots, "backdrop", {}, () => [createVNode(unref(ScalarFloatingBackdrop_default), { class: "rounded-xl border shadow-md" })])])]),
|
|
16
16
|
_: 3
|
|
17
17
|
}, 16);
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarDropdownMenu.vue.script.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n * <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n * <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\n\ndefineProps<{\n /** The component to render */\n is?: string | Component\n}>()\n\ndefineSlots<{\n /** The menu contents */\n default?(): unknown\n /** Overrides the normal menu list element */\n menu?(): unknown\n /** Overrides the backdrop for the dropdown */\n backdrop?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <!-- Background container -->\n <component\n :is=\"is ?? 'div'\"\n v-bind=\"cx('relative flex w-56')\">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1\">\n <!-- Menu items -->\n <slot name=\"menu\">\n <div class=\"flex flex-col p-0.75\">\n <slot />\n </div>\n </slot>\n <slot name=\"backdrop\">\n <ScalarFloatingBackdrop />\n </slot>\n </div>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;EAuCA,MAAM,EAAE,OAAO,UAAU;;uBAIvB,YAeY,wBAdL,QAAA,MAAE,KAAA,GAAA,eAAA,mBACC,MAAA,EAAA,CAAE,CAAA,oBAAA,CAAA,CAAA,GAAA;2BAYJ,CAVN,mBAUM,OAVN,YAUM,CARJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,GAGZ,WAEO,KAAA,QAAA,YAAA,CAAA,SAAA,CADL,
|
|
1
|
+
{"version":3,"file":"ScalarDropdownMenu.vue.script.js","names":[],"sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar dropdown menu component\n *\n * Provides a scrollable container for dropdown items\n * This is used internally by the ScalarDropdown component\n *\n * If you're looking to create a dropdown menu with a trigger\n * button you probably want the ScalarDropdown component\n *\n * @example\n * <ScalarDropdownMenu>\n * <ScalarDropdownItem>Item 1</ScalarDropdownItem>\n * <ScalarDropdownItem>Item 2</ScalarDropdownItem>\n * </ScalarDropdownMenu>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component } from 'vue'\n\nimport { ScalarFloatingBackdrop } from '../ScalarFloating'\n\ndefineProps<{\n /** The component to render */\n is?: string | Component\n}>()\n\ndefineSlots<{\n /** The menu contents */\n default?(): unknown\n /** Overrides the normal menu list element */\n menu?(): unknown\n /** Overrides the backdrop for the dropdown */\n backdrop?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <!-- Background container -->\n <component\n :is=\"is ?? 'div'\"\n v-bind=\"cx('relative flex w-56')\">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1\">\n <!-- Menu items -->\n <slot name=\"menu\">\n <div class=\"flex flex-col p-0.75\">\n <slot />\n </div>\n </slot>\n <slot name=\"backdrop\">\n <ScalarFloatingBackdrop class=\"rounded-xl border shadow-md\" />\n </slot>\n </div>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;EAuCA,MAAM,EAAE,OAAO,UAAU;;uBAIvB,YAeY,wBAdL,QAAA,MAAE,KAAA,GAAA,eAAA,mBACC,MAAA,EAAA,CAAE,CAAA,oBAAA,CAAA,CAAA,GAAA;2BAYJ,CAVN,mBAUM,OAVN,YAUM,CARJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,GAGZ,WAEO,KAAA,QAAA,YAAA,CAAA,SAAA,CADL,YAA8D,MAAA,8BAAA,GAAA,EAAtC,OAAM,8BAA6B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
|
package/dist/style.css
CHANGED
|
@@ -3764,8 +3764,8 @@ to {
|
|
|
3764
3764
|
transform: translate3d(0, 0, 0);
|
|
3765
3765
|
}
|
|
3766
3766
|
|
|
3767
|
-
.dark-mode .scalar-dropdown-item[data-v-
|
|
3768
|
-
.dark-mode .scalar-dropdown-item[data-highlighted][data-v-
|
|
3767
|
+
.dark-mode .scalar-dropdown-item[data-v-128eed00]:hover,
|
|
3768
|
+
.dark-mode .scalar-dropdown-item[data-highlighted][data-v-128eed00] {
|
|
3769
3769
|
filter: brightness(1.1);
|
|
3770
3770
|
}
|
|
3771
3771
|
|
package/dist/vue-styles.css
CHANGED
|
@@ -270,8 +270,8 @@ to {
|
|
|
270
270
|
transform: translate3d(0, 0, 0);
|
|
271
271
|
}
|
|
272
272
|
|
|
273
|
-
.dark-mode .scalar-dropdown-item[data-v-
|
|
274
|
-
.dark-mode .scalar-dropdown-item[data-highlighted][data-v-
|
|
273
|
+
.dark-mode .scalar-dropdown-item[data-v-128eed00]:hover,
|
|
274
|
+
.dark-mode .scalar-dropdown-item[data-highlighted][data-v-128eed00] {
|
|
275
275
|
filter: brightness(1.1);
|
|
276
276
|
}
|
|
277
277
|
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "git+https://github.com/scalar/scalar.git",
|
|
11
11
|
"directory": "packages/components"
|
|
12
12
|
},
|
|
13
|
-
"version": "0.29.
|
|
13
|
+
"version": "0.29.3",
|
|
14
14
|
"engines": {
|
|
15
15
|
"node": ">=22"
|
|
16
16
|
},
|
|
@@ -216,16 +216,16 @@
|
|
|
216
216
|
"@floating-ui/vue": "1.1.9",
|
|
217
217
|
"@headlessui/tailwindcss": "^0.2.2",
|
|
218
218
|
"@headlessui/vue": "1.7.23",
|
|
219
|
+
"@scalar/code-highlight": "0.4.6",
|
|
220
|
+
"@scalar/helpers": "0.12.0",
|
|
221
|
+
"@scalar/icons": "0.7.6",
|
|
222
|
+
"@scalar/themes": "0.18.0",
|
|
223
|
+
"@scalar/use-hooks": "0.4.12",
|
|
219
224
|
"@vueuse/core": "13.9.0",
|
|
220
225
|
"cva": "1.0.0-beta.4",
|
|
221
226
|
"radix-vue": "^1.9.17",
|
|
222
227
|
"vue": "^3.5.40",
|
|
223
|
-
"vue-component-type-helpers": "^3.2.6"
|
|
224
|
-
"@scalar/code-highlight": "0.4.6",
|
|
225
|
-
"@scalar/icons": "0.7.6",
|
|
226
|
-
"@scalar/helpers": "0.12.0",
|
|
227
|
-
"@scalar/themes": "0.18.0",
|
|
228
|
-
"@scalar/use-hooks": "0.4.12"
|
|
228
|
+
"vue-component-type-helpers": "^3.2.6"
|
|
229
229
|
},
|
|
230
230
|
"devDependencies": {
|
|
231
231
|
"@playwright/test": "1.62.1",
|