@auronui/vue 1.0.8 → 1.0.10
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/cjs/index.cjs +10 -1
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/select/SelectContent.js.map +1 -1
- package/dist/components/select/SelectContent.vue_vue_type_script_setup_true_lang.js +11 -2
- package/dist/components/select/SelectContent.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContent.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n SelectContent,\n SelectViewport,\n SelectPortal,\n injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n position?: 'item-aligned' | 'popper'\n sideOffset?: number\n class?: string\n}>(), {\n position: 'popper',\n sideOffset: 8,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n</script>\n\n<template>\n <SelectPortal>\n <AnimatePresence>\n <!--\n No force-mount on SelectContent. With force-mount=true, Reka's\n SelectContentImpl (which contains DismissableLayer with\n disableOutsidePointerEvents=true) would mount immediately on page load and\n block all pointer events — including clicks on the trigger button.\n\n Without force-mount, when open=false, Reka teleports slot content into a\n DocumentFragment (after SelectContent's own onMounted). Components inside\n the slot (SelectItem) still get created and their setup() runs, so\n textValue-based registrations fire at setup time.\n\n v-show (not v-if) on the visual wrapper ensures SelectItem components are\n always instantiated when inside the DocumentFragment — their setup() fires\n and populates itemRegistry. The animated chrome is visually hidden via\n v-show when closed; enter/exit animation runs via motion.div bindings.\n -->\n <SelectContent\n :position=\"props.position\"\n :side-offset=\"props.sideOffset\"\n data-slot=\"popover\"\n >\n <motion.div\n v-show=\"rootContext.open.value\"\n :class=\"ctx.slots.value.popover()\"\n :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n :transition=\"{ duration: 0.15 }\"\n >\n <SelectViewport data-slot=\"list-box\">\n <slot />\n </SelectViewport>\n </motion.div>\n </SelectContent>\n </AnimatePresence>\n </SelectPortal>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"SelectContent.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n SelectContent,\n SelectViewport,\n SelectPortal,\n injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { ref, watch } from 'vue'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n position?: 'item-aligned' | 'popper'\n sideOffset?: number\n class?: string\n}>(), {\n position: 'popper',\n sideOffset: 8,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\n// Suppress scroll-behavior:smooth for the first frame after open so Reka's\n// programmatic scrollTop jump to the selected item is instant.\nconst justOpened = ref(false)\nwatch(() => rootContext.open.value, (open) => {\n if (open) {\n justOpened.value = true\n setTimeout(() => { justOpened.value = false }, 100)\n }\n})\n</script>\n\n<template>\n <SelectPortal>\n <AnimatePresence>\n <!--\n No force-mount on SelectContent. With force-mount=true, Reka's\n SelectContentImpl (which contains DismissableLayer with\n disableOutsidePointerEvents=true) would mount immediately on page load and\n block all pointer events — including clicks on the trigger button.\n\n Without force-mount, when open=false, Reka teleports slot content into a\n DocumentFragment (after SelectContent's own onMounted). Components inside\n the slot (SelectItem) still get created and their setup() runs, so\n textValue-based registrations fire at setup time.\n\n v-show (not v-if) on the visual wrapper ensures SelectItem components are\n always instantiated when inside the DocumentFragment — their setup() fires\n and populates itemRegistry. The animated chrome is visually hidden via\n v-show when closed; enter/exit animation runs via motion.div bindings.\n -->\n <SelectContent\n :position=\"props.position\"\n :side-offset=\"props.sideOffset\"\n data-slot=\"popover\"\n >\n <motion.div\n v-show=\"rootContext.open.value\"\n :class=\"[ctx.slots.value.popover(), { 'select__popover--opening': justOpened }]\"\n :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n :transition=\"{ duration: 0.15 }\"\n >\n <SelectViewport data-slot=\"list-box\">\n <slot />\n </SelectViewport>\n </motion.div>\n </SelectContent>\n </AnimatePresence>\n </SelectPortal>\n</template>\n"],"mappings":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { motion } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/motion/index.js";
|
|
2
2
|
import { AnimatePresence_default } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/animate-presence/AnimatePresence.js";
|
|
3
3
|
import { useSelectInject } from "./Select.context.js";
|
|
4
|
-
import { createBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, vShow, withCtx, withDirectives } from "vue";
|
|
4
|
+
import { createBlock, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref, vShow, watch, withCtx, withDirectives } from "vue";
|
|
5
5
|
import { SelectContent, SelectPortal, SelectViewport, injectSelectRootContext } from "reka-ui";
|
|
6
6
|
//#region src/components/select/SelectContent.vue?vue&type=script&setup=true&lang.ts
|
|
7
7
|
var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
@@ -15,6 +15,15 @@ var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
|
|
|
15
15
|
const props = __props;
|
|
16
16
|
const ctx = useSelectInject();
|
|
17
17
|
const rootContext = injectSelectRootContext();
|
|
18
|
+
const justOpened = ref(false);
|
|
19
|
+
watch(() => rootContext.open.value, (open) => {
|
|
20
|
+
if (open) {
|
|
21
|
+
justOpened.value = true;
|
|
22
|
+
setTimeout(() => {
|
|
23
|
+
justOpened.value = false;
|
|
24
|
+
}, 100);
|
|
25
|
+
}
|
|
26
|
+
});
|
|
18
27
|
return (_ctx, _cache) => {
|
|
19
28
|
return openBlock(), createBlock(unref(SelectPortal), null, {
|
|
20
29
|
default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
|
|
@@ -24,7 +33,7 @@ var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
|
|
|
24
33
|
"data-slot": "popover"
|
|
25
34
|
}, {
|
|
26
35
|
default: withCtx(() => [withDirectives(createVNode(unref(motion).div, {
|
|
27
|
-
class: normalizeClass(unref(ctx).slots.value.popover()),
|
|
36
|
+
class: normalizeClass([unref(ctx).slots.value.popover(), { "select__popover--opening": justOpened.value }]),
|
|
28
37
|
animate: unref(rootContext).open.value ? {
|
|
29
38
|
opacity: 1,
|
|
30
39
|
scale: 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n SelectContent,\n SelectViewport,\n SelectPortal,\n injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n position?: 'item-aligned' | 'popper'\n sideOffset?: number\n class?: string\n}>(), {\n position: 'popper',\n sideOffset: 8,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n</script>\n\n<template>\n <SelectPortal>\n <AnimatePresence>\n <!--\n No force-mount on SelectContent. With force-mount=true, Reka's\n SelectContentImpl (which contains DismissableLayer with\n disableOutsidePointerEvents=true) would mount immediately on page load and\n block all pointer events — including clicks on the trigger button.\n\n Without force-mount, when open=false, Reka teleports slot content into a\n DocumentFragment (after SelectContent's own onMounted). Components inside\n the slot (SelectItem) still get created and their setup() runs, so\n textValue-based registrations fire at setup time.\n\n v-show (not v-if) on the visual wrapper ensures SelectItem components are\n always instantiated when inside the DocumentFragment — their setup() fires\n and populates itemRegistry. The animated chrome is visually hidden via\n v-show when closed; enter/exit animation runs via motion.div bindings.\n -->\n <SelectContent\n :position=\"props.position\"\n :side-offset=\"props.sideOffset\"\n data-slot=\"popover\"\n >\n <motion.div\n v-show=\"rootContext.open.value\"\n :class=\"ctx.slots.value.popover()\"\n :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n :transition=\"{ duration: 0.15 }\"\n >\n <SelectViewport data-slot=\"list-box\">\n <slot />\n </SelectViewport>\n </motion.div>\n </SelectContent>\n </AnimatePresence>\n </SelectPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n SelectContent,\n SelectViewport,\n SelectPortal,\n injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { ref, watch } from 'vue'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n position?: 'item-aligned' | 'popper'\n sideOffset?: number\n class?: string\n}>(), {\n position: 'popper',\n sideOffset: 8,\n class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\n// Suppress scroll-behavior:smooth for the first frame after open so Reka's\n// programmatic scrollTop jump to the selected item is instant.\nconst justOpened = ref(false)\nwatch(() => rootContext.open.value, (open) => {\n if (open) {\n justOpened.value = true\n setTimeout(() => { justOpened.value = false }, 100)\n }\n})\n</script>\n\n<template>\n <SelectPortal>\n <AnimatePresence>\n <!--\n No force-mount on SelectContent. With force-mount=true, Reka's\n SelectContentImpl (which contains DismissableLayer with\n disableOutsidePointerEvents=true) would mount immediately on page load and\n block all pointer events — including clicks on the trigger button.\n\n Without force-mount, when open=false, Reka teleports slot content into a\n DocumentFragment (after SelectContent's own onMounted). Components inside\n the slot (SelectItem) still get created and their setup() runs, so\n textValue-based registrations fire at setup time.\n\n v-show (not v-if) on the visual wrapper ensures SelectItem components are\n always instantiated when inside the DocumentFragment — their setup() fires\n and populates itemRegistry. The animated chrome is visually hidden via\n v-show when closed; enter/exit animation runs via motion.div bindings.\n -->\n <SelectContent\n :position=\"props.position\"\n :side-offset=\"props.sideOffset\"\n data-slot=\"popover\"\n >\n <motion.div\n v-show=\"rootContext.open.value\"\n :class=\"[ctx.slots.value.popover(), { 'select__popover--opening': justOpened }]\"\n :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n :transition=\"{ duration: 0.15 }\"\n >\n <SelectViewport data-slot=\"list-box\">\n <slot />\n </SelectViewport>\n </motion.div>\n </SelectContent>\n </AnimatePresence>\n </SelectPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAUd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,cAAc,yBAAwB;EAI5C,MAAM,aAAa,IAAI,MAAK;AAC5B,cAAY,YAAY,KAAK,QAAQ,SAAS;AAC5C,OAAI,MAAM;AACR,eAAW,QAAQ;AACnB,qBAAiB;AAAE,gBAAW,QAAQ;OAAS,IAAG;;IAErD;;uBAIC,YAmCe,MAAA,aAAA,EAAA,MAAA;2BADK,CAjClB,YAiCkB,MAAA,wBAAA,EAAA,MAAA;4BADA,CAfhB,YAegB,MAAA,cAAA,EAAA;MAdb,UAAU,MAAM;MAChB,eAAa,MAAM;MACpB,aAAU;;6BAWG,CAAA,eATb,YASa,MAAA,OAAA,CAAA,KAAA;OAPV,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,EAAA,EAAA,4BAAkC,WAAA,OAAU,CAAA,CAAA;OAC3E,SAAS,MAAA,YAAW,CAAC,KAAK,QAAK;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAA,SAAA;QAAA,OAAA;QAAA;OAC/B,YAAY,EAAA,UAAA,KAAkB;;8BAId,CAFjB,YAEiB,MAAA,eAAA,EAAA,EAFD,aAAU,YAAU,EAAA;+BAC1B,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;4CANF,MAAA,YAAW,CAAC,KAAK,MAAK,CAAA,CAAA,CAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@auronui/vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "Vue 3 85 components with full visual and functional parity",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"tailwind-merge": "3.5.0",
|
|
70
70
|
"tailwind-variants": "3.2.2",
|
|
71
71
|
"vee-validate": "^4.15.1",
|
|
72
|
-
"@auronui/styles": "1.0.
|
|
72
|
+
"@auronui/styles": "1.0.10"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@chialab/vitest-axe": "0.19.1",
|