@scalar/components 0.30.7 → 0.31.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/README.md +6 -0
- package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.d.ts.map +1 -1
- package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.js.map +1 -1
- package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js +1 -1
- package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.js.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js +2 -3
- package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.script.js.map +1 -1
- package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts +0 -2
- 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 +3 -4
- package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.script.js.map +1 -1
- package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.d.ts +4 -13
- package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.d.ts.map +1 -1
- package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.js.map +1 -1
- package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.script.js +2 -4
- package/dist/components/ScalarFloating/ScalarFloatingBackdrop.vue.script.js.map +1 -1
- package/dist/components/ScalarListbox/ScalarListbox.vue.d.ts.map +1 -1
- package/dist/components/ScalarListbox/ScalarListbox.vue.js.map +1 -1
- package/dist/components/ScalarListbox/ScalarListbox.vue.script.js +3 -4
- package/dist/components/ScalarListbox/ScalarListbox.vue.script.js.map +1 -1
- package/dist/components/ScalarPopover/ScalarPopover.vue.d.ts.map +1 -1
- package/dist/components/ScalarPopover/ScalarPopover.vue.js.map +1 -1
- package/dist/components/ScalarPopover/ScalarPopover.vue.script.js +2 -3
- package/dist/components/ScalarPopover/ScalarPopover.vue.script.js.map +1 -1
- package/dist/components/ScalarPopover/types.d.ts +0 -5
- package/dist/components/ScalarPopover/types.d.ts.map +1 -1
- package/dist/style.css +5 -37
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -114,6 +114,12 @@ Since you can directly target the reference element with Tailwind classes any cl
|
|
|
114
114
|
</ScalarPopover>
|
|
115
115
|
```
|
|
116
116
|
|
|
117
|
+
The floating element also paints its own surface: `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`. To change the background, override both modes, since `bg-*` alone does not replace the `dark:` variant:
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<ScalarPopover class="bg-b-2 dark:bg-b-2">...</ScalarPopover>
|
|
121
|
+
```
|
|
122
|
+
|
|
117
123
|
## CSS Layers
|
|
118
124
|
|
|
119
125
|
The components package uses the same [CSS Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) as the themes package to apply the theme styles. For more information see the [themes README](https://github.com/scalar/scalar/tree/main/packages/themes).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarColorModeToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"names":[],"mappings":"AA6DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IASlB,yCAAyC;iBAC5B,OAAO;;;;IADpB,yCAAyC;iBAC5B,OAAO;;;
|
|
1
|
+
{"version":3,"file":"ScalarColorModeToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"names":[],"mappings":"AA6DA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IASlB,yCAAyC;iBAC5B,OAAO;;;;IADpB,yCAAyC;iBAC5B,OAAO;;;kFAuFhB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarColorModeToggleButton.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n * <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n <button\n :aria-pressed=\"model\"\n type=\"button\"\n v-bind=\"\n cx(\n 'group/toggle flex h-6 w-[38px]
|
|
1
|
+
{"version":3,"file":"ScalarColorModeToggleButton.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n * <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n <button\n :aria-pressed=\"model\"\n type=\"button\"\n v-bind=\"\n cx(\n 'group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n )\n \"\n @click=\"model = !model\">\n <!-- Background -->\n <div\n class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n <!-- Slider -->\n <div\n class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n :class=\"{ 'translate-x-[14px]': model }\">\n <!-- Icon -->\n <ScalarColorModeToggleIcon\n is=\"div\"\n :mode=\"model ? 'dark' : 'light'\" />\n </div>\n </button>\n</template>\n"],"mappings":""}
|
|
@@ -19,7 +19,7 @@ var ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default = /*
|
|
|
19
19
|
return openBlock(), createElementBlock("button", mergeProps({
|
|
20
20
|
"aria-pressed": model.value,
|
|
21
21
|
type: "button"
|
|
22
|
-
}, unref(cx)("group/toggle flex h-6 w-[38px]
|
|
22
|
+
}, unref(cx)("group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none"), { onClick: _cache[0] || (_cache[0] = ($event) => model.value = !model.value) }), [_cache[1] || (_cache[1] = createElementVNode("div", { class: "h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1" }, null, -1)), createElementVNode("div", { class: normalizeClass(["size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out", { "translate-x-[14px]": model.value }]) }, [createVNode(ScalarColorModeToggleIcon_default, {
|
|
23
23
|
is: "div",
|
|
24
24
|
mode: model.value ? "dark" : "light"
|
|
25
25
|
}, null, 8, ["mode"])], 2)], 16, _hoisted_1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarColorModeToggleButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n * <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n <button\n :aria-pressed=\"model\"\n type=\"button\"\n v-bind=\"\n cx(\n 'group/toggle flex h-6 w-[38px]
|
|
1
|
+
{"version":3,"file":"ScalarColorModeToggleButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n * <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n <button\n :aria-pressed=\"model\"\n type=\"button\"\n v-bind=\"\n cx(\n 'group/toggle flex h-6 w-[38px] -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n )\n \"\n @click=\"model = !model\">\n <!-- Background -->\n <div\n class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n <!-- Slider -->\n <div\n class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 dark:bg-b-1.5 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n :class=\"{ 'translate-x-[14px]': model }\">\n <!-- Icon -->\n <ScalarColorModeToggleIcon\n is=\"div\"\n :mode=\"model ? 'dark' : 'light'\" />\n </div>\n </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAsBA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,QAAQ,SAAoB,SAAA,YAAC;;uBAGjC,mBAqBS,UArBT,WAqBS;IApBN,gBAAc,MAAA;IACf,MAAK;MACU,MAAA,EAAA,CAAE,CAAA,yFAAA,GAAA,EAKhB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK,CAAI,MAAA,OAAA,CAAA,GAAA,CAAA,OAAA,OAAA,OAAA,KAEjB,mBACuG,OAAA,EAArG,OAAM,6FAA4F,GAAA,MAAA,EAAA,IAEpG,mBAOM,OAAA,EANJ,OAAK,eAAA,CAAC,iNAA+M,EAAA,sBACrL,MAAA,MAAK,CAAA,CAAA,EAAA,GAAA,CAErC,YAEqC,mCAAA;IADnC,IAAG;IACF,MAAM,MAAA,QAAK,SAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAmFA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAG1D;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mRAiKd,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":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n * <button>Toggle</button>\n * <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {
|
|
1
|
+
{"version":3,"file":"ScalarComboboxPopover.vue.js","names":[],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n * <button>Toggle</button>\n * <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n return\n }\n e.preventDefault()\n e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton\n ref=\"popoverButtonRef\"\n as=\"template\"\n @keydown=\"handleKeydown\">\n <slot :open />\n </PopoverButton>\n <template\n v-if=\"open\"\n #floating=\"{ width }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :style=\"{ width }\"\n v-bind=\"\n cx(\n 'relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n )\n \">\n <slot\n :close\n name=\"popover\"\n :open />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":""}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
|
|
2
|
-
import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
|
|
3
2
|
import { useBindCx } from "@scalar/use-hooks/useBindCx";
|
|
4
3
|
import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
|
|
5
4
|
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
|
|
@@ -44,11 +43,11 @@ var ScalarComboboxPopover_vue_vue_type_script_setup_true_lang_default = /*@__PUR
|
|
|
44
43
|
_: 2
|
|
45
44
|
}, [open ? {
|
|
46
45
|
name: "floating",
|
|
47
|
-
fn: withCtx(({ width }) => [createVNode(unref(PopoverPanel), mergeProps({ style: { width } }, unref(cx)("relative flex flex-col max-h-[inherit] w-40 rounded-xl text-sm")), {
|
|
46
|
+
fn: withCtx(({ width }) => [createVNode(unref(PopoverPanel), mergeProps({ style: { width } }, unref(cx)("relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border")), {
|
|
48
47
|
default: withCtx(({ close }) => [renderSlot(_ctx.$slots, "popover", {
|
|
49
48
|
close,
|
|
50
49
|
open
|
|
51
|
-
})
|
|
50
|
+
})]),
|
|
52
51
|
_: 2
|
|
53
52
|
}, 1040, ["style"])]),
|
|
54
53
|
key: "0"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n * <button>Toggle</button>\n * <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport {
|
|
1
|
+
{"version":3,"file":"ScalarComboboxPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Combobox Popover component\n *\n * Wraps combobox content in a floating popover panel.\n * Handles open/close behavior and keyboard interactions.\n *\n * @example\n * <ScalarComboboxPopover>\n * <button>Toggle</button>\n * <template #popover=\"{ close }\">Content</template>\n * </ScalarComboboxPopover>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { ScalarPopoverSlots } from '../ScalarPopover'\n\ndefineProps<ScalarFloatingOptions>()\n\ndefineSlots<ScalarPopoverSlots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Expose the popover button so we can close the popup */\nconst popoverButtonRef = ref<typeof PopoverButton | null>(null)\n\n/** Open the popover of the up or down arrows are pressed */\nconst handleKeydown = (e: KeyboardEvent) => {\n if (!['ArrowUp', 'ArrowDown'].includes(e.key)) {\n return\n }\n e.preventDefault()\n e.target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n}\n\ndefineExpose({ popoverButtonRef })\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton\n ref=\"popoverButtonRef\"\n as=\"template\"\n @keydown=\"handleKeydown\">\n <slot :open />\n </PopoverButton>\n <template\n v-if=\"open\"\n #floating=\"{ width }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :style=\"{ width }\"\n v-bind=\"\n cx(\n 'relative flex flex-col max-h-[inherit] w-40 rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n )\n \">\n <slot\n :close\n name=\"popover\"\n :open />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,mBAAmB,IAAiC,IAAI;;EAG9D,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,CAAC,CAAC,WAAW,WAAW,CAAC,CAAC,SAAS,EAAE,GAAG,GAC1C;GAEF,EAAE,eAAe;GACjB,EAAE,QAAQ,cAAc,IAAI,cAAc,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;EACxE;EAEA,SAAa,EAAE,iBAAiB,CAAC;;uBAG/B,YA4BU,MAAA,OAAA,GAAA,EA1BR,IAAG,WAAU,GAAA;sBAyBI,EA1BP,WAAI,CAEd,YAwBiB,MAAA,sBAAA,GAAA,eAAA,mBAxBOA,KAAAA,MAAM,CAAA,GAAA,YAAA;4BAMZ,CALhB,YAKgB,MAAA,aAAA,GAAA;eAJV;MAAJ,KAAI;MACJ,IAAG;MACF,WAAS;;6BACI,CAAd,WAAc,KAAA,QAAA,WAAA,EAAP,KAAI,CAAA,CAAA,CAAA;;;;QAGL,OAAA;WACL;kBAac,EAbF,YAAK,CAClB,YAYe,MAAA,YAAA,GAZf,WAYe,EAVZ,OAAK,EAAI,MAAK,EAAA,GACM,MAAA,EAAA,CAAE,CAAA,mHAAA,CAAA,GAAA;wBAQb,EAVA,YAAK,CAOf,WAGU,KAAA,QAAA,WAAA;OAFP;OAEA"}
|
|
@@ -27,8 +27,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
27
27
|
default?(): unknown;
|
|
28
28
|
/** Overrides the normal menu list element */
|
|
29
29
|
menu?(): unknown;
|
|
30
|
-
/** Overrides the backdrop for the dropdown */
|
|
31
|
-
backdrop?(): unknown;
|
|
32
30
|
}>;
|
|
33
31
|
type __VLS_WithSlots<T, S> = T & {
|
|
34
32
|
new (): {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AA6DA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC;;;;;;;;;;;;;;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;EAsEd,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\
|
|
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\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}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <!-- Background container -->\n <component\n :is=\"is ?? 'div'\"\n v-bind=\"\n cx(\n 'relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n )\n \">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n <!-- Menu items -->\n <slot name=\"menu\">\n <div class=\"flex flex-col p-0.75\">\n <slot />\n </div>\n </slot>\n </div>\n </component>\n</template>\n"],"mappings":""}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
|
|
2
1
|
import { useBindCx } from "@scalar/use-hooks/useBindCx";
|
|
3
|
-
import { createBlock, createElementVNode,
|
|
2
|
+
import { createBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
|
|
4
3
|
//#region src/components/ScalarDropdown/ScalarDropdownMenu.vue?vue&type=script&setup=true&lang.ts
|
|
5
4
|
var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1 rounded-[inherit]" };
|
|
6
5
|
var _hoisted_2 = { class: "flex flex-col p-0.75" };
|
|
@@ -11,8 +10,8 @@ var ScalarDropdownMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
|
|
|
11
10
|
setup(__props) {
|
|
12
11
|
const { cx } = useBindCx();
|
|
13
12
|
return (_ctx, _cache) => {
|
|
14
|
-
return openBlock(), createBlock(resolveDynamicComponent(__props.is ?? "div"), normalizeProps(guardReactiveProps(unref(cx)("relative flex w-56 rounded-xl"))), {
|
|
15
|
-
default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])])
|
|
13
|
+
return openBlock(), createBlock(resolveDynamicComponent(__props.is ?? "div"), normalizeProps(guardReactiveProps(unref(cx)("relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border"))), {
|
|
14
|
+
default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "menu", {}, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])])])]),
|
|
16
15
|
_: 3
|
|
17
16
|
}, 16);
|
|
18
17
|
};
|
|
@@ -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\
|
|
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\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}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <!-- Background container -->\n <component\n :is=\"is ?? 'div'\"\n v-bind=\"\n cx(\n 'relative flex w-56 rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n )\n \">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n <!-- Menu items -->\n <slot name=\"menu\">\n <div class=\"flex flex-col p-0.75\">\n <slot />\n </div>\n </slot>\n </div>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;EAmCA,MAAM,EAAE,OAAO,UAAU;;uBAIvB,YAgBY,wBAfL,QAAA,MAAE,KAAA,GAAA,eAAA,mBACQ,MAAA,EAAA,CAAE,CAAA,kFAAA,CAAA,CAAA,GAAA;2BAaX,CAPN,mBAOM,OAPN,YAOM,CALJ,WAIO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHL,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
|
|
@@ -1,23 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Scalar floating backdrop component
|
|
3
3
|
*
|
|
4
|
-
* Provides an absolutely positioned
|
|
5
|
-
* This is used internally by a number of the Scalar floating components
|
|
6
|
-
* (e.g. Dropdown, Popover, Listbox)
|
|
7
|
-
*
|
|
8
|
-
* You can use this component directly if you need to customize the backdrop
|
|
9
|
-
* for a floating component
|
|
4
|
+
* Provides an absolutely positioned surface behind a floating element
|
|
10
5
|
*
|
|
11
6
|
* The backdrop inherits its border radius from its parent, so set the radius
|
|
12
7
|
* on the floating element itself and the backdrop will follow it
|
|
13
8
|
*
|
|
14
|
-
* @
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* <template #backdrop>
|
|
18
|
-
* <ScalarFloatingBackdrop />
|
|
19
|
-
* </template>
|
|
20
|
-
* </ScalarDropdown>
|
|
9
|
+
* @deprecated The Scalar floating components now paint their own surface, so
|
|
10
|
+
* style the floating element directly instead, e.g.
|
|
11
|
+
* `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`
|
|
21
12
|
*/
|
|
22
13
|
declare const _default: typeof __VLS_export;
|
|
23
14
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarFloatingBackdrop.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarFloatingBackdrop.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"names":[],"mappings":"AAqCA;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA8BJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAQxC,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":"ScalarFloatingBackdrop.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned
|
|
1
|
+
{"version":3,"file":"ScalarFloatingBackdrop.vue.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned surface behind a floating element\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @deprecated The Scalar floating components now paint their own surface, so\n * style the floating element directly instead, e.g.\n * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div\n v-bind=\"\n cx(\n 'absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n )\n \">\n <slot />\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { useBindCx } from "@scalar/use-hooks/useBindCx";
|
|
2
|
-
import { createElementBlock,
|
|
3
|
-
//#region src/components/ScalarFloating/ScalarFloatingBackdrop.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
-
var _hoisted_1 = { class: "absolute inset-0 bg-inherit brightness-lifted" };
|
|
2
|
+
import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
|
|
5
3
|
var ScalarFloatingBackdrop_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
6
4
|
inheritAttrs: false,
|
|
7
5
|
__name: "ScalarFloatingBackdrop",
|
|
8
6
|
setup(__props) {
|
|
9
7
|
const { cx } = useBindCx();
|
|
10
8
|
return (_ctx, _cache) => {
|
|
11
|
-
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("absolute inset-0 -z-1
|
|
9
|
+
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border"))), [renderSlot(_ctx.$slots, "default")], 16);
|
|
12
10
|
};
|
|
13
11
|
}
|
|
14
12
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarFloatingBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned
|
|
1
|
+
{"version":3,"file":"ScalarFloatingBackdrop.vue.script.js","names":[],"sources":["../../../src/components/ScalarFloating/ScalarFloatingBackdrop.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar floating backdrop component\n *\n * Provides an absolutely positioned surface behind a floating element\n *\n * The backdrop inherits its border radius from its parent, so set the radius\n * on the floating element itself and the backdrop will follow it\n *\n * @deprecated The Scalar floating components now paint their own surface, so\n * style the floating element directly instead, e.g.\n * `rounded-xl bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border`\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <div\n v-bind=\"\n cx(\n 'absolute inset-0 -z-1 rounded-[inherit] bg-b-1 dark:bg-b-1.5 shadow-md inset-shadow-border',\n )\n \">\n <slot />\n </div>\n</template>\n"],"mappings":";;;;;;EAmBA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAOM,OAAA,eAAA,mBANW,MAAA,EAAA,CAAE,CAAA,4FAAA,CAAA,CAAA,GAAA,CAKjB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAuHA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAGrC;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAYL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;aAItB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;eAZL,KAAK,GAAG,SAAS;iBACf,MAAM,GAAG,SAAS;;aASpB,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;cAPN,IAAI;iBACD,MAAM,EAAE,GAAG,SAAS;;;;IAmBjC,4CAA4C;mBAC7B;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO;EAoLT,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":"ScalarListbox.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n * <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n Listbox,\n ListboxButton,\n ListboxLabel,\n ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {
|
|
1
|
+
{"version":3,"file":"ScalarListbox.vue.js","names":[],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n * <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n Listbox,\n ListboxButton,\n ListboxLabel,\n ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n multiple?: false | undefined\n modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n multiple: true\n modelValue?: Option[] | undefined\n}\n\ndefineProps<\n {\n options: Option[]\n id?: string\n label?: string\n } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n ScalarFloatingOptions\n>()\n\ndefineEmits<{\n (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n /** The reference element for the listbox */\n default(props: {\n /** Whether or not the listbox is open */\n open: boolean\n }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <Listbox\n v-slot=\"{ open }\"\n :modelValue=\"modelValue\"\n :multiple=\"multiple\"\n @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n <ListboxLabel\n v-if=\"label\"\n class=\"sr-only\">\n {{ label }}\n </ListboxLabel>\n <ScalarFloating\n v-bind=\"$props\"\n :placement=\"placement ?? 'bottom-start'\">\n <ListboxButton\n :id=\"id\"\n as=\"template\">\n <slot :open=\"open\" />\n </ListboxButton>\n <template #floating=\"{ width }\">\n <!-- Background container -->\n <div\n v-if=\"open\"\n :style=\"{ width }\"\n v-bind=\"\n cx(\n 'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n )\n \">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n <!-- Options list -->\n <ListboxOptions\n class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n <ScalarListboxOption\n v-for=\"option in options\"\n :key=\"option.id\"\n :multiselect=\"multiple\"\n :option=\"option\" />\n </ListboxOptions>\n </div>\n </div>\n </template>\n </ScalarFloating>\n </Listbox>\n</template>\n"],"mappings":""}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
|
|
2
|
-
import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
|
|
3
2
|
import ScalarListboxItem_default from "./ScalarListboxItem.vue.js";
|
|
4
3
|
import { useBindCx } from "@scalar/use-hooks/useBindCx";
|
|
5
4
|
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
|
|
6
5
|
import { Listbox, ListboxButton, ListboxLabel, ListboxOptions } from "@headlessui/vue";
|
|
7
6
|
//#region src/components/ScalarListbox/ScalarListbox.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1" };
|
|
7
|
+
var _hoisted_1 = { class: "custom-scroll min-h-0 flex-1 rounded-[inherit]" };
|
|
9
8
|
var ScalarListbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
10
9
|
inheritAttrs: false,
|
|
11
10
|
__name: "ScalarListbox",
|
|
@@ -45,7 +44,7 @@ var ScalarListbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
45
44
|
floating: withCtx(({ width }) => [open ? (openBlock(), createElementBlock("div", mergeProps({
|
|
46
45
|
key: 0,
|
|
47
46
|
style: { width }
|
|
48
|
-
}, unref(cx)("relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl text-sm")), [createElementVNode("div", _hoisted_1, [createVNode(unref(ListboxOptions), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
|
|
47
|
+
}, unref(cx)("relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border")), [createElementVNode("div", _hoisted_1, [createVNode(unref(ListboxOptions), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
|
|
49
48
|
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
|
|
50
49
|
return openBlock(), createBlock(ScalarListboxItem_default, {
|
|
51
50
|
key: option.id,
|
|
@@ -54,7 +53,7 @@ var ScalarListbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
54
53
|
}, null, 8, ["multiselect", "option"]);
|
|
55
54
|
}), 128))]),
|
|
56
55
|
_: 1
|
|
57
|
-
})])
|
|
56
|
+
})])], 16)) : createCommentVNode("", true)]),
|
|
58
57
|
default: withCtx(() => [createVNode(unref(ListboxButton), {
|
|
59
58
|
id: __props.id,
|
|
60
59
|
as: "template"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarListbox.vue.script.js","names":["$emit","$props"],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n * <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n Listbox,\n ListboxButton,\n ListboxLabel,\n ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {
|
|
1
|
+
{"version":3,"file":"ScalarListbox.vue.script.js","names":["$emit","$props"],"sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Listbox component\n *\n * A dropdown select component built on HeadlessUI Listbox.\n * Supports single and multiple selection modes.\n *\n * @example\n * <ScalarListbox v-model=\"selected\" :options=\"options\">\n * <ScalarButton>{{ selected?.label ?? 'Select' }}</ScalarButton>\n * </ScalarListbox>\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n Listbox,\n ListboxButton,\n ListboxLabel,\n ListboxOptions,\n} from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport ScalarListboxOption from './ScalarListboxItem.vue'\nimport type { Option } from './types'\n\ntype SingleSelectListboxProps = {\n multiple?: false | undefined\n modelValue?: Option | undefined\n}\n\ntype MultipleSelectListboxProps = {\n multiple: true\n modelValue?: Option[] | undefined\n}\n\ndefineProps<\n {\n options: Option[]\n id?: string\n label?: string\n } & (SingleSelectListboxProps | MultipleSelectListboxProps) &\n ScalarFloatingOptions\n>()\n\ndefineEmits<{\n (e: 'update:modelValue', v: Option): void\n}>()\n\ndefineSlots<{\n /** The reference element for the listbox */\n default(props: {\n /** Whether or not the listbox is open */\n open: boolean\n }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <Listbox\n v-slot=\"{ open }\"\n :modelValue=\"modelValue\"\n :multiple=\"multiple\"\n @update:modelValue=\"(v) => $emit('update:modelValue', v)\">\n <ListboxLabel\n v-if=\"label\"\n class=\"sr-only\">\n {{ label }}\n </ListboxLabel>\n <ScalarFloating\n v-bind=\"$props\"\n :placement=\"placement ?? 'bottom-start'\">\n <ListboxButton\n :id=\"id\"\n as=\"template\">\n <slot :open=\"open\" />\n </ListboxButton>\n <template #floating=\"{ width }\">\n <!-- Background container -->\n <div\n v-if=\"open\"\n :style=\"{ width }\"\n v-bind=\"\n cx(\n 'relative flex max-h-[inherit] w-40 max-w-[inherit] rounded-xl bg-b-1 dark:bg-b-1.5 text-sm shadow-md inset-shadow-border',\n )\n \">\n <!-- Scroll container -->\n <div class=\"custom-scroll min-h-0 flex-1 rounded-[inherit]\">\n <!-- Options list -->\n <ListboxOptions\n class=\"flex flex-col gap-0.75 p-0.75 -outline-offset-1\">\n <ScalarListboxOption\n v-for=\"option in options\"\n :key=\"option.id\"\n :multiselect=\"multiple\"\n :option=\"option\" />\n </ListboxOptions>\n </div>\n </div>\n </template>\n </ScalarFloating>\n </Listbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YA2CU,MAAA,OAAA,GAAA;IAzCP,YAAY,QAAA;IACZ,UAAU,QAAA;IACV,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAMA,KAAAA,MAAK,qBAAsB,CAAC;;sBAKxC,EARL,WAAI,CAKN,QAAA,SAAA,UAAA,GADR,YAIe,MAAA,YAAA,GAAA;;KAFb,OAAM;;4BACK,CAAA,gBAAA,gBAAR,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;wCAEV,YAgCiB,MAAA,sBAAA,GAhCjB,WACUC,KA+BO,QA/BD,EACb,WAAW,QAAA,aAAS,eAAA,CAAA,GAAA;KAMV,UAAQ,SAsBX,EAtBe,YAAK,CAGlB,QAAA,UAAA,GADR,mBAoBM,OApBN,WAoBM;;MAlBH,OAAK,EAAI,MAAK;QACM,MAAA,EAAA,CAAE,CAAA,0HAAA,CAAA,GAAA,CAMvB,mBAUM,OAVN,YAUM,CARJ,YAOiB,MAAA,cAAA,GAAA,EANf,OAAM,kDAAiD,GAAA;6BAE5B,EAAA,UAAA,IAAA,GAD3B,mBAIqB,UAAA,MAAA,WAHF,QAAA,UAAV,WAAM;2BADf,YAIqB,2BAAA;QAFlB,KAAK,OAAO;QACZ,aAAa,QAAA;QACL;;;;;4BApBH,CAJhB,YAIgB,MAAA,aAAA,GAAA;MAHb,IAAI,QAAA;MACL,IAAG;;6BACkB,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"AAmEA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,0DAA0D;YAClD,OAAO;;IADf,0DAA0D;YAClD,OAAO;iIAmIf,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":"ScalarPopover.vue.js","names":[],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n * <button>Open</button>\n * <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {
|
|
1
|
+
{"version":3,"file":"ScalarPopover.vue.js","names":[],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n * <button>Open</button>\n * <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n {\n /** Automatically focus the popover panel when it opens */\n focus?: boolean\n } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton as=\"template\">\n <slot :open=\"open\" />\n </PopoverButton>\n <template #floating=\"{ width, height }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :focus=\"focus\"\n :style=\"{ width, height }\"\n v-bind=\"\n cx(\n 'relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border',\n )\n \">\n <slot\n :close=\"() => close()\"\n name=\"popover\"\n :open=\"open\" />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":""}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import ScalarFloating_default from "../ScalarFloating/ScalarFloating.vue.js";
|
|
2
|
-
import ScalarFloatingBackdrop_default from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
|
|
3
2
|
import { useBindCx } from "@scalar/use-hooks/useBindCx";
|
|
4
3
|
import { createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
|
|
5
4
|
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
|
|
@@ -30,11 +29,11 @@ var ScalarPopover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
30
29
|
width,
|
|
31
30
|
height
|
|
32
31
|
}
|
|
33
|
-
}, unref(cx)("relative flex flex-col rounded-xl p-0.75")), {
|
|
32
|
+
}, unref(cx)("relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border")), {
|
|
34
33
|
default: withCtx(({ close }) => [renderSlot(_ctx.$slots, "popover", {
|
|
35
34
|
close: () => close(),
|
|
36
35
|
open
|
|
37
|
-
})
|
|
36
|
+
})]),
|
|
38
37
|
_: 2
|
|
39
38
|
}, 1040, ["focus", "style"])]),
|
|
40
39
|
default: withCtx(() => [createVNode(unref(PopoverButton), { as: "template" }, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n * <button>Open</button>\n * <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport {
|
|
1
|
+
{"version":3,"file":"ScalarPopover.vue.script.js","names":["$props"],"sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Popover component\n *\n * A floating panel that appears when a trigger element is clicked.\n * Built on HeadlessUI Popover with Floating UI positioning.\n *\n * @example\n * <ScalarPopover>\n * <button>Open</button>\n * <template #popover=\"{ close }\">Popover content</template>\n * </ScalarPopover>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFloating, type ScalarFloatingOptions } from '../ScalarFloating'\nimport type { Slots } from './types'\n\ndefineProps<\n {\n /** Automatically focus the popover panel when it opens */\n focus?: boolean\n } & ScalarFloatingOptions\n>()\n\ndefineSlots<Slots>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <Popover\n v-slot=\"{ open }\"\n as=\"template\">\n <ScalarFloating v-bind=\"$props\">\n <PopoverButton as=\"template\">\n <slot :open=\"open\" />\n </PopoverButton>\n <template #floating=\"{ width, height }\">\n <PopoverPanel\n v-slot=\"{ close }\"\n :focus=\"focus\"\n :style=\"{ width, height }\"\n v-bind=\"\n cx(\n 'relative flex flex-col rounded-xl bg-b-1 dark:bg-b-1.5 p-0.75 shadow-md inset-shadow-border',\n )\n \">\n <slot\n :close=\"() => close()\"\n name=\"popover\"\n :open=\"open\" />\n </PopoverPanel>\n </template>\n </ScalarFloating>\n </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,YAwBU,MAAA,OAAA,GAAA,EAtBR,IAAG,WAAU,GAAA;sBAqBI,EAtBP,WAAI,CAEd,YAoBiB,MAAA,sBAAA,GAAA,eAAA,mBApBOA,KAAAA,MAAM,CAAA,GAAA;KAIjB,UAAQ,SAcF,EAdM,OAAO,aAAM,CAClC,YAae,MAAA,YAAA,GAbf,WAae;MAXZ,OAAO,QAAA;MACP,OAAK;OAAI;OAAO;MAAM;QACF,MAAA,EAAA,CAAE,CAAA,6FAAA,CAAA,GAAA;wBAQN,EAXP,YAAK,CAQf,WAGiB,KAAA,QAAA,WAAA;OAFd,aAAa,MAAK;OAEZ;;;;4BAdG,CAFhB,YAEgB,MAAA,aAAA,GAAA,EAFD,IAAG,WAAU,GAAA;6BACL,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,KAAI,CAAA,CAAA,CAAA"}
|
|
@@ -10,10 +10,5 @@ export type Slots = {
|
|
|
10
10
|
/** A callback to close the popover */
|
|
11
11
|
close: () => void;
|
|
12
12
|
}): unknown;
|
|
13
|
-
/** Overrides the popover backdrop */
|
|
14
|
-
backdrop?(props: {
|
|
15
|
-
/** Whether or not the popover is open */
|
|
16
|
-
open: boolean;
|
|
17
|
-
}): unknown;
|
|
18
13
|
};
|
|
19
14
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO,CAAA;IACX,2BAA2B;IAC3B,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;QACb,sCAAsC;QACtC,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,GAAG,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,OAAO,CAAA;IACX,2BAA2B;IAC3B,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;QACb,sCAAsC;QACtC,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,GAAG,OAAO,CAAA;CACZ,CAAA"}
|
package/dist/style.css
CHANGED
|
@@ -86,7 +86,6 @@
|
|
|
86
86
|
--tw-backdrop-sepia: initial;
|
|
87
87
|
--tw-duration: initial;
|
|
88
88
|
--tw-ease: initial;
|
|
89
|
-
--tw-content: "";
|
|
90
89
|
}
|
|
91
90
|
}
|
|
92
91
|
}
|
|
@@ -1949,10 +1948,6 @@
|
|
|
1949
1948
|
}
|
|
1950
1949
|
}
|
|
1951
1950
|
|
|
1952
|
-
.scalar-app .bg-red {
|
|
1953
|
-
background-color: var(--scalar-color-red);
|
|
1954
|
-
}
|
|
1955
|
-
|
|
1956
1951
|
.scalar-app .bg-sidebar-b-1 {
|
|
1957
1952
|
background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
|
|
1958
1953
|
}
|
|
@@ -2500,6 +2495,11 @@
|
|
|
2500
2495
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2501
2496
|
}
|
|
2502
2497
|
|
|
2498
|
+
.scalar-app .inset-shadow-border {
|
|
2499
|
+
--tw-inset-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
|
|
2500
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2501
|
+
}
|
|
2502
|
+
|
|
2503
2503
|
.scalar-app .outline {
|
|
2504
2504
|
outline-style: var(--tw-outline-style);
|
|
2505
2505
|
outline-width: 1px;
|
|
@@ -2767,32 +2767,6 @@
|
|
|
2767
2767
|
font-family: inherit;
|
|
2768
2768
|
}
|
|
2769
2769
|
|
|
2770
|
-
.scalar-app .after\:pointer-events-none:after {
|
|
2771
|
-
content: var(--tw-content);
|
|
2772
|
-
pointer-events: none;
|
|
2773
|
-
}
|
|
2774
|
-
|
|
2775
|
-
.scalar-app .after\:absolute:after {
|
|
2776
|
-
content: var(--tw-content);
|
|
2777
|
-
position: absolute;
|
|
2778
|
-
}
|
|
2779
|
-
|
|
2780
|
-
.scalar-app .after\:inset-0:after {
|
|
2781
|
-
content: var(--tw-content);
|
|
2782
|
-
inset: 0;
|
|
2783
|
-
}
|
|
2784
|
-
|
|
2785
|
-
.scalar-app .after\:rounded-\[inherit\]:after {
|
|
2786
|
-
content: var(--tw-content);
|
|
2787
|
-
border-radius: inherit;
|
|
2788
|
-
}
|
|
2789
|
-
|
|
2790
|
-
.scalar-app .after\:shadow-border:after {
|
|
2791
|
-
content: var(--tw-content);
|
|
2792
|
-
--tw-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
|
|
2793
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2794
|
-
}
|
|
2795
|
-
|
|
2796
2770
|
.scalar-app .first\:rounded-t-\[inherit\]:first-child {
|
|
2797
2771
|
border-top-left-radius: inherit;
|
|
2798
2772
|
border-top-right-radius: inherit;
|
|
@@ -3528,12 +3502,6 @@
|
|
|
3528
3502
|
inherits: false
|
|
3529
3503
|
}
|
|
3530
3504
|
|
|
3531
|
-
@property --tw-content {
|
|
3532
|
-
syntax: "*";
|
|
3533
|
-
inherits: false;
|
|
3534
|
-
initial-value: "";
|
|
3535
|
-
}
|
|
3536
|
-
|
|
3537
3505
|
@keyframes pulse {
|
|
3538
3506
|
50% {
|
|
3539
3507
|
opacity: .5;
|
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.
|
|
13
|
+
"version": "0.31.0",
|
|
14
14
|
"engines": {
|
|
15
15
|
"node": ">=22"
|
|
16
16
|
},
|
|
@@ -217,10 +217,10 @@
|
|
|
217
217
|
"@headlessui/tailwindcss": "^0.2.2",
|
|
218
218
|
"@headlessui/vue": "1.7.23",
|
|
219
219
|
"@scalar/code-highlight": "0.4.8",
|
|
220
|
-
"@scalar/helpers": "0.16.
|
|
220
|
+
"@scalar/helpers": "0.16.2",
|
|
221
221
|
"@scalar/icons": "0.7.6",
|
|
222
|
-
"@scalar/themes": "0.
|
|
223
|
-
"@scalar/use-hooks": "0.4.
|
|
222
|
+
"@scalar/themes": "0.19.0",
|
|
223
|
+
"@scalar/use-hooks": "0.4.19",
|
|
224
224
|
"@vueuse/core": "13.9.0",
|
|
225
225
|
"cva": "1.0.0-beta.4",
|
|
226
226
|
"radix-vue": "^1.9.17",
|