@7pmlabs/design-system 2.0.5 → 2.0.7
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system100.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n /**\n * Controlled open state. Use with `v-model:open` for two-way binding.\n * When this prop changes, the internal state syncs to it.\n */\n open?: boolean | null;\n /**\n * The trigger mode for expanding/collapsing the group menu.\n * When set, a trigger button is shown that reveals child buttons.\n */\n trigger?: `${BFloatButtonTrigger}`;\n /**\n * Animation direction when expanding/collapsing.\n * @default 'top'\n */\n placement?: `${BFloatButtonGroupPlacement}`;\n /**\n * Shape applied to all child float buttons.\n * @default 'circle'\n */\n shape?: `${BFloatButtonShape}`;\n /**\n * Icon name for the close/collapse trigger button.\n */\n closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n /** Emitted when the group open state changes. */\n (e: 'openChange', open: boolean): void;\n /** v-model support. */\n (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n /** Float button children. */\n default?(): unknown;\n /** Custom trigger icon (open state). */\n icon?(): unknown;\n /** Custom close icon (close state). */\n closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n () => props.open,\n (val) => {\n if (val === true) internalOpen.value = true;\n else if (val === false) internalOpen.value = false;\n // null/undefined means \"uncontrolled\" — do not override internal state\n },\n { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n internalOpen.value = val;\n emit('update:open', val);\n emit('openChange', val);\n}\n\nfunction toggle() {\n setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n setOpen(true);\n}\n\nfunction closeGroup() {\n setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n if (hideTimer) {\n clearTimeout(hideTimer);\n hideTimer = null;\n }\n openGroup();\n}\n\nfunction onMouseLeave() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n 'bFloatButtonGroupShape',\n computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n <div\n class=\"b-float-button-group\"\n :class=\"[\n placementClass,\n shapeClass,\n {\n 'b-float-button-group--menu': isGroup,\n 'b-float-button-group--open': isGroup && internalOpen,\n },\n ]\"\n :role=\"!isGroup ? 'group' : undefined\"\n :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n <div\n class=\"b-float-button-group__list\"\n :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n :inert=\"isGroup && !internalOpen ? true : undefined\"\n >\n <slot />\n </div>\n\n <!-- Trigger button (only rendered when trigger is set) -->\n <button\n v-if=\"isGroup\"\n type=\"button\"\n class=\"b-float-button-group__trigger\"\n :class=\"[\n 'b-float-button',\n `b-float-button--${props.shape ?? 'circle'}`,\n 'b-float-button--primary',\n ]\"\n :aria-expanded=\"internalOpen\"\n :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n @click=\"toggle\"\n >\n <span class=\"b-float-button__body\">\n <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n <template v-if=\"internalOpen\">\n <slot name=\"closeIcon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n />\n </svg>\n </slot>\n </template>\n <template v-else>\n <slot name=\"icon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n </svg>\n </slot>\n </template>\n </span>\n </span>\n </button>\n </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n Group container\n ───────────────────────────────────────────── */\n.b-float-button-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n position: relative;\n}\n\n.b-float-button-group--menu {\n position: relative;\n}\n\n/* ─────────────────────────────────────────────\n Items list (collapsible)\n ───────────────────────────────────────────── */\n.b-float-button-group__list {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n list-style: none;\n padding: 0;\n margin: 0 0 0.75rem 0;\n\n /* Collapsed: hidden */\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n transition:\n max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n max-height: 60vh;\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ── Placement variants for list direction
|
|
1
|
+
{"version":3,"file":"design-system100.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n /**\n * Controlled open state. Use with `v-model:open` for two-way binding.\n * When this prop changes, the internal state syncs to it.\n */\n open?: boolean | null;\n /**\n * The trigger mode for expanding/collapsing the group menu.\n * When set, a trigger button is shown that reveals child buttons.\n */\n trigger?: `${BFloatButtonTrigger}`;\n /**\n * Animation direction when expanding/collapsing.\n * @default 'top'\n */\n placement?: `${BFloatButtonGroupPlacement}`;\n /**\n * Shape applied to all child float buttons.\n * @default 'circle'\n */\n shape?: `${BFloatButtonShape}`;\n /**\n * Icon name for the close/collapse trigger button.\n */\n closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n /** Emitted when the group open state changes. */\n (e: 'openChange', open: boolean): void;\n /** v-model support. */\n (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n /** Float button children. */\n default?(): unknown;\n /** Custom trigger icon (open state). */\n icon?(): unknown;\n /** Custom close icon (close state). */\n closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n () => props.open,\n (val) => {\n if (val === true) internalOpen.value = true;\n else if (val === false) internalOpen.value = false;\n // null/undefined means \"uncontrolled\" — do not override internal state\n },\n { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n internalOpen.value = val;\n emit('update:open', val);\n emit('openChange', val);\n}\n\nfunction toggle() {\n setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n setOpen(true);\n}\n\nfunction closeGroup() {\n setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n if (hideTimer) {\n clearTimeout(hideTimer);\n hideTimer = null;\n }\n openGroup();\n}\n\nfunction onMouseLeave() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n 'bFloatButtonGroupShape',\n computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n <div\n class=\"b-float-button-group\"\n :class=\"[\n placementClass,\n shapeClass,\n {\n 'b-float-button-group--menu': isGroup,\n 'b-float-button-group--open': isGroup && internalOpen,\n },\n ]\"\n :role=\"!isGroup ? 'group' : undefined\"\n :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n <div\n class=\"b-float-button-group__list\"\n :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n :inert=\"isGroup && !internalOpen ? true : undefined\"\n >\n <slot />\n </div>\n\n <!-- Trigger button (only rendered when trigger is set) -->\n <button\n v-if=\"isGroup\"\n type=\"button\"\n class=\"b-float-button-group__trigger\"\n :class=\"[\n 'b-float-button',\n `b-float-button--${props.shape ?? 'circle'}`,\n 'b-float-button--primary',\n ]\"\n :aria-expanded=\"internalOpen\"\n :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n @click=\"toggle\"\n >\n <span class=\"b-float-button__body\">\n <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n <template v-if=\"internalOpen\">\n <slot name=\"closeIcon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n />\n </svg>\n </slot>\n </template>\n <template v-else>\n <slot name=\"icon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n </svg>\n </slot>\n </template>\n </span>\n </span>\n </button>\n </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n Group container\n ───────────────────────────────────────────── */\n.b-float-button-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n position: relative;\n}\n\n.b-float-button-group--menu {\n position: relative;\n}\n\n/* ─────────────────────────────────────────────\n Items list (collapsible)\n ───────────────────────────────────────────── */\n.b-float-button-group__list {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n list-style: none;\n padding: 0;\n margin: 0 0 0.75rem 0;\n\n /* Collapsed: hidden */\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n transition:\n max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n max-height: 60vh;\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ── Placement variants for list direction ──\n DOM order is always [list, trigger]. For `bottom`/`right` we reverse\n the container so the trigger comes before the list visually. */\n.b-float-button-group--top .b-float-button-group__list {\n flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom {\n flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n flex-direction: column;\n margin: 0.75rem 0 0 0;\n}\n\n.b-float-button-group--left .b-float-button-group__list {\n flex-direction: row-reverse;\n margin: 0 0.75rem 0 0;\n}\n\n.b-float-button-group--right .b-float-button-group__list {\n flex-direction: row;\n margin: 0 0 0 0.75rem;\n}\n\n/* ── Horizontal layout for left/right placements ── */\n.b-float-button-group--left {\n flex-direction: row;\n align-items: center;\n}\n\n.b-float-button-group--right {\n flex-direction: row-reverse;\n align-items: center;\n}\n\n/* ── Trigger button ── */\n.b-float-button-group__trigger {\n flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n Reduced motion\n ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n .b-float-button-group__list {\n transition-duration: 0ms;\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system98.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n /**\n * Controlled open state. Use with `v-model:open` for two-way binding.\n * When this prop changes, the internal state syncs to it.\n */\n open?: boolean | null;\n /**\n * The trigger mode for expanding/collapsing the group menu.\n * When set, a trigger button is shown that reveals child buttons.\n */\n trigger?: `${BFloatButtonTrigger}`;\n /**\n * Animation direction when expanding/collapsing.\n * @default 'top'\n */\n placement?: `${BFloatButtonGroupPlacement}`;\n /**\n * Shape applied to all child float buttons.\n * @default 'circle'\n */\n shape?: `${BFloatButtonShape}`;\n /**\n * Icon name for the close/collapse trigger button.\n */\n closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n /** Emitted when the group open state changes. */\n (e: 'openChange', open: boolean): void;\n /** v-model support. */\n (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n /** Float button children. */\n default?(): unknown;\n /** Custom trigger icon (open state). */\n icon?(): unknown;\n /** Custom close icon (close state). */\n closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n () => props.open,\n (val) => {\n if (val === true) internalOpen.value = true;\n else if (val === false) internalOpen.value = false;\n // null/undefined means \"uncontrolled\" — do not override internal state\n },\n { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n internalOpen.value = val;\n emit('update:open', val);\n emit('openChange', val);\n}\n\nfunction toggle() {\n setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n setOpen(true);\n}\n\nfunction closeGroup() {\n setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n if (hideTimer) {\n clearTimeout(hideTimer);\n hideTimer = null;\n }\n openGroup();\n}\n\nfunction onMouseLeave() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n 'bFloatButtonGroupShape',\n computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n <div\n class=\"b-float-button-group\"\n :class=\"[\n placementClass,\n shapeClass,\n {\n 'b-float-button-group--menu': isGroup,\n 'b-float-button-group--open': isGroup && internalOpen,\n },\n ]\"\n :role=\"!isGroup ? 'group' : undefined\"\n :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n <div\n class=\"b-float-button-group__list\"\n :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n :inert=\"isGroup && !internalOpen ? true : undefined\"\n >\n <slot />\n </div>\n\n <!-- Trigger button (only rendered when trigger is set) -->\n <button\n v-if=\"isGroup\"\n type=\"button\"\n class=\"b-float-button-group__trigger\"\n :class=\"[\n 'b-float-button',\n `b-float-button--${props.shape ?? 'circle'}`,\n 'b-float-button--primary',\n ]\"\n :aria-expanded=\"internalOpen\"\n :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n @click=\"toggle\"\n >\n <span class=\"b-float-button__body\">\n <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n <template v-if=\"internalOpen\">\n <slot name=\"closeIcon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n />\n </svg>\n </slot>\n </template>\n <template v-else>\n <slot name=\"icon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n </svg>\n </slot>\n </template>\n </span>\n </span>\n </button>\n </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n Group container\n ───────────────────────────────────────────── */\n.b-float-button-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n position: relative;\n}\n\n.b-float-button-group--menu {\n position: relative;\n}\n\n/* ─────────────────────────────────────────────\n Items list (collapsible)\n ───────────────────────────────────────────── */\n.b-float-button-group__list {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n list-style: none;\n padding: 0;\n margin: 0 0 0.75rem 0;\n\n /* Collapsed: hidden */\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n transition:\n max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n max-height: 60vh;\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ── Placement variants for list direction
|
|
1
|
+
{"version":3,"file":"design-system98.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n /**\n * Controlled open state. Use with `v-model:open` for two-way binding.\n * When this prop changes, the internal state syncs to it.\n */\n open?: boolean | null;\n /**\n * The trigger mode for expanding/collapsing the group menu.\n * When set, a trigger button is shown that reveals child buttons.\n */\n trigger?: `${BFloatButtonTrigger}`;\n /**\n * Animation direction when expanding/collapsing.\n * @default 'top'\n */\n placement?: `${BFloatButtonGroupPlacement}`;\n /**\n * Shape applied to all child float buttons.\n * @default 'circle'\n */\n shape?: `${BFloatButtonShape}`;\n /**\n * Icon name for the close/collapse trigger button.\n */\n closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n /** Emitted when the group open state changes. */\n (e: 'openChange', open: boolean): void;\n /** v-model support. */\n (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n /** Float button children. */\n default?(): unknown;\n /** Custom trigger icon (open state). */\n icon?(): unknown;\n /** Custom close icon (close state). */\n closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n () => props.open,\n (val) => {\n if (val === true) internalOpen.value = true;\n else if (val === false) internalOpen.value = false;\n // null/undefined means \"uncontrolled\" — do not override internal state\n },\n { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n internalOpen.value = val;\n emit('update:open', val);\n emit('openChange', val);\n}\n\nfunction toggle() {\n setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n setOpen(true);\n}\n\nfunction closeGroup() {\n setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n if (hideTimer) {\n clearTimeout(hideTimer);\n hideTimer = null;\n }\n openGroup();\n}\n\nfunction onMouseLeave() {\n if (props.trigger !== BFloatButtonTrigger.Hover) return;\n hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n 'bFloatButtonGroupShape',\n computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n <div\n class=\"b-float-button-group\"\n :class=\"[\n placementClass,\n shapeClass,\n {\n 'b-float-button-group--menu': isGroup,\n 'b-float-button-group--open': isGroup && internalOpen,\n },\n ]\"\n :role=\"!isGroup ? 'group' : undefined\"\n :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n <div\n class=\"b-float-button-group__list\"\n :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n :inert=\"isGroup && !internalOpen ? true : undefined\"\n >\n <slot />\n </div>\n\n <!-- Trigger button (only rendered when trigger is set) -->\n <button\n v-if=\"isGroup\"\n type=\"button\"\n class=\"b-float-button-group__trigger\"\n :class=\"[\n 'b-float-button',\n `b-float-button--${props.shape ?? 'circle'}`,\n 'b-float-button--primary',\n ]\"\n :aria-expanded=\"internalOpen\"\n :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n @click=\"toggle\"\n >\n <span class=\"b-float-button__body\">\n <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n <template v-if=\"internalOpen\">\n <slot name=\"closeIcon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n />\n </svg>\n </slot>\n </template>\n <template v-else>\n <slot name=\"icon\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n </svg>\n </slot>\n </template>\n </span>\n </span>\n </button>\n </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n Group container\n ───────────────────────────────────────────── */\n.b-float-button-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n position: relative;\n}\n\n.b-float-button-group--menu {\n position: relative;\n}\n\n/* ─────────────────────────────────────────────\n Items list (collapsible)\n ───────────────────────────────────────────── */\n.b-float-button-group__list {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n list-style: none;\n padding: 0;\n margin: 0 0 0.75rem 0;\n\n /* Collapsed: hidden */\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n transition:\n max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n max-height: 60vh;\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ── Placement variants for list direction ──\n DOM order is always [list, trigger]. For `bottom`/`right` we reverse\n the container so the trigger comes before the list visually. */\n.b-float-button-group--top .b-float-button-group__list {\n flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom {\n flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n flex-direction: column;\n margin: 0.75rem 0 0 0;\n}\n\n.b-float-button-group--left .b-float-button-group__list {\n flex-direction: row-reverse;\n margin: 0 0.75rem 0 0;\n}\n\n.b-float-button-group--right .b-float-button-group__list {\n flex-direction: row;\n margin: 0 0 0 0.75rem;\n}\n\n/* ── Horizontal layout for left/right placements ── */\n.b-float-button-group--left {\n flex-direction: row;\n align-items: center;\n}\n\n.b-float-button-group--right {\n flex-direction: row-reverse;\n align-items: center;\n}\n\n/* ── Trigger button ── */\n.b-float-button-group__trigger {\n flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n Reduced motion\n ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n .b-float-button-group__list {\n transition-duration: 0ms;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GA2BR,IAAO,GAmBP,IAAe,EAAI,GAAM;AAG/B,UACQ,EAAM,OACX,MAAQ;AACP,GAAI,MAAQ,KAAM,EAAa,QAAQ,KAC9B,MAAQ,OAAO,EAAa,QAAQ;KAG/C,EAAE,WAAW,IAAM,CACpB;EAED,SAAS,EAAQ,GAAc;AAG7B,GAFA,EAAa,QAAQ,GACrB,EAAK,eAAe,EAAI,EACxB,EAAK,cAAc,EAAI;;EAGzB,SAAS,IAAS;AAChB,KAAQ,CAAC,EAAa,MAAM;;EAG9B,SAAS,IAAY;AACnB,KAAQ,GAAK;;EAGf,SAAS,IAAa;AACpB,KAAQ,GAAM;;EAMhB,IAAI,IAAkD;EAEtD,SAAS,IAAe;AAClB,KAAM,YAAY,EAAoB,UAC1C,AAEE,OADA,aAAa,EAAU,EACX,OAEd,GAAW;;EAGb,SAAS,IAAe;AAClB,KAAM,YAAY,EAAoB,UAC1C,IAAY,iBAAiB,GAAY,EAAE,IAAI;;AAUjD,EAPA,QAAsB;AACpB,GAAI,KAAW,aAAa,EAAU;IACtC,EAKF,EACE,0BACA,QAAe,EAAM,SAAS,EAAkB,OAAO,CACxD;EAED,IAAM,IAAU,QAAe,EAAM,YAAY,KAAA,EAAU,EACrD,IAAiB,QACf,yBAAyB,EAAM,aAAa,EAA2B,MAC9E,EACK,IAAa,QACX,+BAA+B,EAAM,SAAS,EAAkB,SACvE;yBAIC,EAuEM,OAAA;GAtEJ,OAAK,EAAA,CAAC,wBAAsB;IACZ,EAAA;IAAsB,EAAA;;mCAA0D,EAAA;mCAA+C,EAAA,SAAW,EAAA;;;GAQzJ,MAAO,EAAA,QAAoB,KAAA,IAAb;GACd,cAAa,EAAA,QAAiC,KAAA,IAA1B;GACpB,cAAY;GACZ,cAAY;MAGb,EAMM,OAAA;GALJ,OAAM;GACL,eAAa,EAAA,QAAO,CAAI,EAAA,QAAe,KAAA;GACvC,OAAO,EAAA,SAAO,CAAK,EAAA,QAAY,KAAU,KAAA;MAE1C,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,EAAA,EAKF,EAAA,SAAA,GAAA,EADR,EA6CS,UAAA;;GA3CP,MAAK;GACL,OAAK,EAAA,CAAC,iCAA+B;;uBAC0B,EAAM,SAAK;;;GAKzE,iBAAe,EAAA;GACf,cAAY,EAAA,QAAY,0BAAA;GACxB,SAAO;MAER,EA+BO,QA/BP,GA+BO,CA9BL,EA6BO,QA7BP,GA6BO,CA5BW,EAAA,QACd,EAYO,EAAA,QAAA,aAAA,EAAA,KAAA,GAAA,QAAA,CAAA,AAAA,EAAA,OAXL,EAUM,OAAA;GATJ,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;MAEZ,EAEE,QAAA,EADA,GAAE,yGAAuG,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,GAM/G,EAUO,EAAA,QAAA,QAAA,EAAA,KAAA,GAAA,QAAA,CAAA,AAAA,EAAA,OATL,EAQM,OAAA;GAPJ,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;MAEZ,EAAgD,QAAA,EAA1C,GAAE,uCAAqC,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}
|