@cck-ui/core 0.10.0 → 0.11.0

package/cjs/components/splitter/splitter.cjs

@@ -0,0 +1,620 @@
+"use client";
+const require_export_helper = require("../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_use_component_props = require("../../core/config-provider/use-component-props/use-component-props.cjs");
+const require_index = require("../../core/box/index.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_splitter_module = require("./splitter.module.cjs");
+const require_splitter_utils = require("./splitter.utils.cjs");
+const require_splitter_context = require("./splitter.context.cjs");
+const require_splitter_pane = require("./splitter-pane/splitter-pane.cjs");
+const require_grip_icon = require("./grip-icon.cjs");
+let vue = require("vue");
+let _cck_ui_hooks = require("@cck-ui/hooks");
+//#region packages/@cck-ui/core/src/components/splitter/splitter.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	name: "CSplitter",
+	__name: "splitter",
+	props: {
+		orientation: {
+			type: String,
+			required: false
+		},
+		sizes: {
+			type: Array,
+			required: false
+		},
+		onSizeChange: {
+			type: Function,
+			required: false
+		},
+		onResizeStart: {
+			type: Function,
+			required: false
+		},
+		onResizeEnd: {
+			type: Function,
+			required: false
+		},
+		onCollapseChange: {
+			type: Function,
+			required: false
+		},
+		redistribute: {
+			type: [String, Function],
+			required: false
+		},
+		step: {
+			type: null,
+			required: false
+		},
+		shiftStep: {
+			type: null,
+			required: false
+		},
+		lineSize: {
+			type: [Number, String],
+			required: false
+		},
+		handleColor: {
+			type: null,
+			required: false
+		},
+		handleIcon: {
+			type: null,
+			required: false
+		},
+		withHandle: {
+			type: Boolean,
+			required: false
+		},
+		resetOnDoubleClick: {
+			type: Boolean,
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: [
+				Object,
+				Function,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		__vars: {
+			type: null,
+			required: false
+		},
+		__size: {
+			type: String,
+			required: false
+		},
+		hiddenFrom: {
+			type: null,
+			required: false
+		},
+		visibleFrom: {
+			type: null,
+			required: false
+		},
+		lightHidden: {
+			type: Boolean,
+			required: false
+		},
+		darkHidden: {
+			type: Boolean,
+			required: false
+		},
+		mod: {
+			type: [
+				Object,
+				String,
+				Array
+			],
+			required: false
+		},
+		m: {
+			type: null,
+			required: false
+		},
+		my: {
+			type: null,
+			required: false
+		},
+		mx: {
+			type: null,
+			required: false
+		},
+		mt: {
+			type: null,
+			required: false
+		},
+		mb: {
+			type: null,
+			required: false
+		},
+		ms: {
+			type: null,
+			required: false
+		},
+		me: {
+			type: null,
+			required: false
+		},
+		mis: {
+			type: null,
+			required: false
+		},
+		mie: {
+			type: null,
+			required: false
+		},
+		ml: {
+			type: null,
+			required: false
+		},
+		mr: {
+			type: null,
+			required: false
+		},
+		p: {
+			type: null,
+			required: false
+		},
+		py: {
+			type: null,
+			required: false
+		},
+		px: {
+			type: null,
+			required: false
+		},
+		pt: {
+			type: null,
+			required: false
+		},
+		pb: {
+			type: null,
+			required: false
+		},
+		ps: {
+			type: null,
+			required: false
+		},
+		pe: {
+			type: null,
+			required: false
+		},
+		pis: {
+			type: null,
+			required: false
+		},
+		pie: {
+			type: null,
+			required: false
+		},
+		pl: {
+			type: null,
+			required: false
+		},
+		pr: {
+			type: null,
+			required: false
+		},
+		bd: {
+			type: null,
+			required: false
+		},
+		bdrs: {
+			type: null,
+			required: false
+		},
+		bg: {
+			type: null,
+			required: false
+		},
+		c: {
+			type: null,
+			required: false
+		},
+		opacity: {
+			type: [
+				String,
+				Object,
+				Number
+			],
+			required: false
+		},
+		ff: {
+			type: [String, Object],
+			required: false
+		},
+		fz: {
+			type: null,
+			required: false
+		},
+		fw: {
+			type: null,
+			required: false
+		},
+		lts: {
+			type: null,
+			required: false
+		},
+		ta: {
+			type: [String, Object],
+			required: false
+		},
+		lh: {
+			type: null,
+			required: false
+		},
+		fs: {
+			type: null,
+			required: false
+		},
+		tt: {
+			type: [String, Object],
+			required: false
+		},
+		td: {
+			type: null,
+			required: false
+		},
+		w: {
+			type: null,
+			required: false
+		},
+		miw: {
+			type: null,
+			required: false
+		},
+		maw: {
+			type: null,
+			required: false
+		},
+		h: {
+			type: null,
+			required: false
+		},
+		mih: {
+			type: null,
+			required: false
+		},
+		mah: {
+			type: null,
+			required: false
+		},
+		bgsz: {
+			type: null,
+			required: false
+		},
+		bgp: {
+			type: null,
+			required: false
+		},
+		bgr: {
+			type: null,
+			required: false
+		},
+		bga: {
+			type: null,
+			required: false
+		},
+		pos: {
+			type: [String, Object],
+			required: false
+		},
+		top: {
+			type: null,
+			required: false
+		},
+		left: {
+			type: null,
+			required: false
+		},
+		bottom: {
+			type: null,
+			required: false
+		},
+		right: {
+			type: null,
+			required: false
+		},
+		inset: {
+			type: null,
+			required: false
+		},
+		display: {
+			type: null,
+			required: false
+		},
+		flex: {
+			type: null,
+			required: false
+		},
+		unstyled: {
+			type: Boolean,
+			required: false
+		},
+		variant: {
+			type: null,
+			required: false
+		},
+		classNames: {
+			type: null,
+			required: false
+		},
+		styles: {
+			type: null,
+			required: false
+		},
+		vars: {
+			type: Function,
+			required: false
+		},
+		attributes: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const rootRef = (0, vue.ref)(null);
+		const attrs = (0, vue.useAttrs)();
+		const slots = (0, vue.useSlots)();
+		const rawProps = __props;
+		const defaultProps = {
+			orientation: "horizontal",
+			lineSize: 2,
+			withHandle: true,
+			resetOnDoubleClick: true
+		};
+		const props = require_use_component_props.useComponentProps({
+			component: "CSplitter",
+			defaultProps,
+			props: rawProps
+		});
+		const knownProps = [
+			"classNames",
+			"className",
+			"style",
+			"styles",
+			"unstyled",
+			"vars",
+			"orientation",
+			"sizes",
+			"onSizeChange",
+			"onResizeStart",
+			"onResizeEnd",
+			"onCollapseChange",
+			"redistribute",
+			"step",
+			"shiftStep",
+			"lineSize",
+			"handleColor",
+			"handleIcon",
+			"withHandle",
+			"resetOnDoubleClick",
+			"mod",
+			"attributes"
+		];
+		const modList = (0, vue.computed)(() => [{ orientation: props.value.orientation }]);
+		const getStyles = require_use_styles.useStyles({
+			name: "Splitter",
+			classes: require_splitter_module.default,
+			props: {
+				...props.value,
+				...attrs
+			},
+			className: props.value.className,
+			style: props.value.style,
+			classNames: props.value.classNames,
+			styles: props.value.styles,
+			unstyled: props.value.unstyled,
+			attributes: props.value.attributes,
+			vars: props.value.vars,
+			varsResolver: require_splitter_utils.varsResolver
+		});
+		const paneVNodes = (0, vue.ref)([]);
+		const panels = (0, vue.ref)([]);
+		(0, vue.watchEffect)(() => {
+			const filtered = (slots.default?.() || []).filter((vnode) => vnode.type === require_splitter_pane.default);
+			paneVNodes.value = filtered;
+			panels.value = filtered.map((vnode) => {
+				const vProps = vnode.props || {};
+				return {
+					defaultSize: vProps.defaultSize ?? vProps["default-size"] ?? 0,
+					min: vProps.min ?? void 0,
+					max: vProps.max ?? void 0,
+					collapsible: vProps.collapsible ?? false,
+					collapseThreshold: vProps.collapseThreshold ?? vProps["collapse-threshold"] ?? void 0
+				};
+			});
+		});
+		const splitter = (0, _cck_ui_hooks.useSplitter)({
+			panels: panels.value,
+			orientation: props.value.orientation,
+			sizes: props.value.sizes,
+			onSizeChange: props.value.onSizeChange,
+			onResizeStart: props.value.onResizeStart,
+			onResizeEnd: props.value.onResizeEnd,
+			onCollapseChange: props.value.onCollapseChange,
+			redistribute: props.value.redistribute,
+			step: props.value.step,
+			shiftStep: props.value.shiftStep,
+			resetOnDoubleClick: props.value.resetOnDoubleClick
+		});
+		(0, vue.watch)(rootRef, (newVal) => {
+			if (newVal) {
+				const domEl = newVal.$el || newVal.root;
+				if (domEl instanceof HTMLElement) splitter.containerRef(domEl);
+			} else splitter.containerRef(null);
+		}, { immediate: true });
+		const getHandleAttrs = (index) => {
+			const handleProps = splitter.getHandleProps({ index });
+			const { ref: _ref, onDoubleClick, ...attrs } = handleProps;
+			return {
+				role: attrs.role,
+				"aria-orientation": attrs["aria-orientation"],
+				"aria-valuenow": handleProps["aria-valuenow"],
+				"aria-valuemin": handleProps["aria-valuemin"],
+				"aria-valuemax": handleProps["aria-valuemax"],
+				tabIndex: handleProps.tabIndex,
+				"data-active": handleProps["data-active"],
+				"data-orientation": handleProps["data-orientation"]
+			};
+		};
+		const isHandleActive = (index) => {
+			return splitter.activeHandle === index;
+		};
+		const handleAttrs = (index) => {
+			const styles = getStyles("handle");
+			const attrs = getHandleAttrs(index);
+			return {
+				...styles,
+				...attrs,
+				key: `handle-${index}`
+			};
+		};
+		const getPaneStyle = (index) => {
+			const size = splitter.sizes.value[index];
+			if (!splitter.pixelMode) return { flexBasis: `${typeof size === "number" ? size : parseFloat(size)}%` };
+			if (typeof size === "string" && (size.endsWith("px") || size.endsWith("rem"))) return {
+				flexGrow: 0,
+				flexShrink: 1,
+				flexBasis: size
+			};
+			return {
+				flexGrow: typeof size === "number" ? size : parseFloat(size),
+				flexShrink: 1,
+				flexBasis: 0
+			};
+		};
+		(0, vue.watch)(() => props.value.sizes, (newSizes) => {
+			if (!newSizes) return;
+			const currentSizes = splitter.sizes.value;
+			if (JSON.stringify(newSizes) !== JSON.stringify(currentSizes)) splitter.setSizes(newSizes);
+		}, {
+			immediate: true,
+			deep: true
+		});
+		const collapsed = (0, vue.computed)(() => splitter.collapsed);
+		const orientation = (0, vue.computed)(() => props.value.orientation || "horizontal");
+		require_splitter_context.provideSplitterContext({
+			getStyles,
+			sizes: splitter.sizes,
+			collapsed,
+			orientation,
+			getPaneStyle
+		});
+		const defaultIcon = (0, vue.computed)(() => props.value.orientation === "vertical" ? "horizontal" : "vertical");
+		const thumbIcon = (0, vue.computed)(() => {
+			if (props.value.handleIcon !== void 0) return props.value.handleIcon;
+			return require_grip_icon.default;
+		});
+		const withHandle = (0, vue.computed)(() => props.value.withHandle);
+		const handleDblClick = (index) => {
+			if (props.value.resetOnDoubleClick !== false) splitter.reset(index);
+		};
+		const rootAttrs = (0, vue.computed)(() => getStyles("root"));
+		const mergedAttrs = (0, vue.computed)(() => {
+			const others = {};
+			const propsValue = props.value;
+			for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
+			const userMod = props.value.mod;
+			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean), ...modList.value || []];
+			return {
+				...others,
+				mod: mergedMod,
+				...rootAttrs.value
+			};
+		});
+		__expose({
+			root: (0, vue.computed)(() => rootRef.value?.root || null),
+			sizes: splitter.sizes,
+			collapsed: splitter.collapsed,
+			activeHandle: splitter.activeHandle,
+			setSizes: splitter.setSizes,
+			collapse: splitter.collapse,
+			expand: splitter.expand,
+			toggleCollapse: splitter.toggleCollapse,
+			reset: splitter.reset
+		});
+		const __returned__ = {
+			rootRef,
+			attrs,
+			slots,
+			rawProps,
+			defaultProps,
+			props,
+			knownProps,
+			modList,
+			getStyles,
+			paneVNodes,
+			panels,
+			splitter,
+			getHandleAttrs,
+			isHandleActive,
+			handleAttrs,
+			getPaneStyle,
+			collapsed,
+			orientation,
+			defaultIcon,
+			thumbIcon,
+			withHandle,
+			handleDblClick,
+			rootAttrs,
+			mergedAttrs,
+			get CBox() {
+				return require_index.CBox;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ ref: "rootRef" }, $setup.mergedAttrs), {
+		default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($setup.paneVNodes, (vnode, index) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: `pane-${index}` }, [index > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({
+				key: 0,
+				ref_for: true
+			}, $setup.handleAttrs(index - 1), {
+				key: `handle-${index - 1}`,
+				onPointerdown: $setup.splitter.getHandleEventHandlers({ index: index - 1 }).onPointerDown,
+				onTouchstart: $setup.splitter.getHandleEventHandlers({ index: index - 1 }).onTouchStart,
+				onKeydown: $setup.splitter.getHandleEventHandlers({ index: index - 1 }).onKeyDown,
+				onDblclick: ($event) => $setup.handleDblClick(index - 1)
+			}), {
+				default: (0, vue.withCtx)(() => [$setup.withHandle ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({
+					key: 0,
+					ref_for: true
+				}, $setup.getStyles("thumb"), {
+					"data-orientation": $setup.orientation,
+					"data-active": $setup.isHandleActive(index - 1) || void 0
+				}), {
+					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($setup.thumbIcon), { orientation: $setup.defaultIcon }, null, 8, ["orientation"]))]),
+					_: 1
+				}, 16, ["data-orientation", "data-active"])) : (0, vue.createCommentVNode)("v-if", true)]),
+				_: 2
+			}, 1040, [
+				"onPointerdown",
+				"onTouchstart",
+				"onKeydown",
+				"onDblclick"
+			])) : (0, vue.createCommentVNode)("v-if", true), ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(vnode), { __index: index }, null, 8, ["__index"]))], 64);
+		}), 128))]),
+		_: 1
+	}, 16);
+}
+var splitter_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/splitter/splitter.vue"]]);
+//#endregion
+exports.default = splitter_default;
+
+//# sourceMappingURL=splitter.cjs.map

package/cjs/components/splitter/splitter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.cjs","names":[],"sources":["../../../src/components/splitter/splitter.vue"],"sourcesContent":["<template>\n  <c-box ref=\"rootRef\" v-bind=\"mergedAttrs\">\n    <template v-for=\"(vnode, index) in paneVNodes\" :key=\"`pane-${index}`\">\n      <c-box\n        v-if=\"index > 0\"\n        v-bind=\"handleAttrs(index - 1)\"\n        :key=\"`handle-${index - 1}`\"\n        @pointerdown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onPointerDown\"\n        @touchstart=\"splitter.getHandleEventHandlers({ index: index - 1 }).onTouchStart\"\n        @keydown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onKeyDown\"\n        @dblclick=\"handleDblClick(index - 1)\"\n      >\n        <c-box\n          v-if=\"withHandle\"\n          v-bind=\"getStyles('thumb')\"\n          :data-orientation=\"orientation\"\n          :data-active=\"isHandleActive(index - 1) || undefined\"\n        >\n          <component :is=\"thumbIcon\" :orientation=\"defaultIcon\" />\n        </c-box>\n      </c-box>\n\n      <component :is=\"vnode\" :__index=\"index\" />\n    </template>\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots, watch, watchEffect } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SplitterFactory, type SplitterProps } from './splitter.types'\nimport classes from './splitter.module.css'\nimport { varsResolver } from './splitter.utils'\nimport SplitterPane from './splitter-pane/splitter-pane.vue'\nimport { useSplitter, UseSplitterPanel } from '@cck-ui/hooks'\nimport { provideSplitterContext } from './splitter.context'\nimport GripIcon from './grip-icon.vue'\n\ndefineOptions({\n  name: 'CSplitter',\n})\n\nconst rootRef = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<SplitterProps>()\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  lineSize: 2,\n  withHandle: true,\n  resetOnDoubleClick: true,\n} satisfies Partial<SplitterProps>\n\nconst props = useComponentProps({\n  component: 'CSplitter',\n  defaultProps,\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'vars',\n  'orientation',\n  'sizes',\n  'onSizeChange',\n  'onResizeStart',\n  'onResizeEnd',\n  'onCollapseChange',\n  'redistribute',\n  'step',\n  'shiftStep',\n  'lineSize',\n  'handleColor',\n  'handleIcon',\n  'withHandle',\n  'resetOnDoubleClick',\n  'mod',\n  'attributes',\n]\n\nconst modList = computed(() => [\n  {\n    orientation: props.value.orientation,\n  },\n])\n\nconst getStyles = useStyles<SplitterFactory>({\n  name: 'Splitter',\n  classes,\n  props: { ...props.value, ...attrs } as SplitterProps,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst paneVNodes = ref<any[]>([])\nconst panels = ref<UseSplitterPanel[]>([])\n\nwatchEffect(() => {\n  const defaultSlots = slots.default?.() || []\n  const filtered = defaultSlots.filter((vnode) => vnode.type === SplitterPane)\n  paneVNodes.value = filtered\n  panels.value = filtered.map((vnode) => {\n    const vProps = vnode.props || {}\n    return {\n      defaultSize: vProps.defaultSize ?? vProps['default-size'] ?? 0,\n      min: vProps.min ?? undefined,\n      max: vProps.max ?? undefined,\n      collapsible: vProps.collapsible ?? false,\n      collapseThreshold: vProps.collapseThreshold ?? vProps['collapse-threshold'] ?? undefined,\n    }\n  })\n})\n\nconst splitter = useSplitter({\n  panels: panels.value,\n  orientation: props.value.orientation,\n  sizes: props.value.sizes,\n  onSizeChange: props.value.onSizeChange,\n  onResizeStart: props.value.onResizeStart,\n  onResizeEnd: props.value.onResizeEnd,\n  onCollapseChange: props.value.onCollapseChange,\n  redistribute: props.value.redistribute,\n  step: props.value.step,\n  shiftStep: props.value.shiftStep,\n  resetOnDoubleClick: props.value.resetOnDoubleClick,\n})\n\nwatch(\n  rootRef,\n  (newVal) => {\n    if (newVal) {\n      const domEl = newVal.$el || newVal.root\n      if (domEl instanceof HTMLElement) {\n        splitter.containerRef(domEl)\n      }\n    } else {\n      splitter.containerRef(null)\n    }\n  },\n  { immediate: true }\n)\n\nconst getHandleAttrs = (index: number) => {\n  const handleProps = splitter.getHandleProps({ index })\n  const { ref: _ref, onDoubleClick, ...attrs } = handleProps\n  return {\n    role: attrs.role,\n    'aria-orientation': attrs['aria-orientation'],\n    'aria-valuenow': handleProps['aria-valuenow'],\n    'aria-valuemin': handleProps['aria-valuemin'],\n    'aria-valuemax': handleProps['aria-valuemax'],\n    tabIndex: handleProps.tabIndex,\n    'data-active': handleProps['data-active'],\n    'data-orientation': handleProps['data-orientation'],\n  }\n}\n\nconst isHandleActive = (index: number) => {\n  return splitter.activeHandle === index\n}\n\nconst handleAttrs = (index: number) => {\n  const styles = getStyles('handle')\n  const attrs = getHandleAttrs(index)\n  return {\n    ...styles,\n    ...attrs,\n    key: `handle-${index}`,\n  }\n}\n\nconst getPaneStyle = (index: number) => {\n  const sizes = splitter.sizes.value\n  const size = sizes[index]\n  const pixelMode = splitter.pixelMode\n  if (!pixelMode) {\n    const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n    return { flexBasis: `${magnitude}%` }\n  }\n  const isFixed = typeof size === 'string' && (size.endsWith('px') || size.endsWith('rem'))\n  if (isFixed) {\n    return { flexGrow: 0, flexShrink: 1, flexBasis: size as string }\n  }\n  const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n  return { flexGrow: magnitude, flexShrink: 1, flexBasis: 0 }\n}\n\nwatch(\n  () => props.value.sizes,\n  (newSizes) => {\n    if (!newSizes) {\n      return\n    }\n    const currentSizes = splitter.sizes.value\n    if (JSON.stringify(newSizes) !== JSON.stringify(currentSizes)) {\n      splitter.setSizes(newSizes)\n    }\n  },\n  { immediate: true, deep: true }\n)\n\nconst collapsed = computed(() => splitter.collapsed)\nconst orientation = computed(() => props.value.orientation || 'horizontal')\n\nprovideSplitterContext({\n  getStyles,\n  sizes: splitter.sizes,\n  collapsed,\n  orientation,\n  getPaneStyle,\n})\n\nconst defaultIcon = computed(() =>\n  props.value.orientation === 'vertical' ? 'horizontal' : 'vertical'\n)\n\nconst thumbIcon = computed(() => {\n  if (props.value.handleIcon !== undefined) {\n    return props.value.handleIcon\n  }\n  return GripIcon\n})\n\nconst withHandle = computed(() => props.value.withHandle)\n\nconst handleDblClick = (index: number) => {\n  if (props.value.resetOnDoubleClick !== false) {\n    splitter.reset(index)\n  }\n}\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => rootRef.value?.root || null),\n  sizes: splitter.sizes,\n  collapsed: splitter.collapsed,\n  activeHandle: splitter.activeHandle,\n  setSizes: splitter.setSizes,\n  collapse: splitter.collapse,\n  expand: splitter.expand,\n  toggleCollapse: splitter.toggleCollapse,\n  reset: splitter.reset,\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/splitter/splitter.context.cjs

@@ -0,0 +1,17 @@
+"use client";
+let vue = require("vue");
+//#region packages/@cck-ui/core/src/components/splitter/splitter.context.ts
+const SPLITTER_CONTEXT_KEY = Symbol("SplitterContext");
+function provideSplitterContext(value) {
+	(0, vue.provide)(SPLITTER_CONTEXT_KEY, value);
+}
+function useSplitterContext() {
+	const ctx = (0, vue.inject)(SPLITTER_CONTEXT_KEY);
+	if (!ctx) throw new Error("Splitter component was not found in the tree");
+	return ctx;
+}
+//#endregion
+exports.provideSplitterContext = provideSplitterContext;
+exports.useSplitterContext = useSplitterContext;
+
+//# sourceMappingURL=splitter.context.cjs.map

package/cjs/components/splitter/splitter.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.context.cjs","names":[],"sources":["../../../src/components/splitter/splitter.context.ts"],"sourcesContent":["import type { SplitterPaneSize } from '@cck-ui/hooks'\nimport type { GetStylesApi } from '../../core'\nimport type { SplitterFactory } from './splitter.types'\nimport { ComputedRef, inject, InjectionKey, provide } from 'vue'\n\nexport interface SplitterContextValue {\n  getStyles: GetStylesApi<SplitterFactory>\n  sizes: ComputedRef<SplitterPaneSize[]>\n  collapsed: ComputedRef<boolean[]>\n  orientation: ComputedRef<'horizontal' | 'vertical'>\n  getPaneStyle: (index: number) => Record<string, any>\n}\n\nconst SPLITTER_CONTEXT_KEY: InjectionKey<SplitterContextValue> = Symbol('SplitterContext')\n\nexport function provideSplitterContext(value: SplitterContextValue) {\n  provide(SPLITTER_CONTEXT_KEY, value)\n}\n\nexport function useSplitterContext() {\n  const ctx = inject(SPLITTER_CONTEXT_KEY)\n  if (!ctx) {\n    throw new Error('Splitter component was not found in the tree')\n  }\n  return ctx\n}\n"],"mappings":";;;AAaA,MAAM,uBAA2D,OAAO,iBAAiB;AAEzF,SAAgB,uBAAuB,OAA6B;CAClE,CAAA,GAAA,IAAA,QAAA,CAAQ,sBAAsB,KAAK;AACrC;AAEA,SAAgB,qBAAqB;CACnC,MAAM,OAAA,GAAA,IAAA,OAAA,CAAa,oBAAoB;CACvC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,8CAA8C;CAEhE,OAAO;AACT"}

package/cjs/components/splitter/splitter.module.cjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@cck-ui/core/src/components/splitter/splitter.module.css
+var splitter_module_default = {
+	"root": "m_ea473028",
+	"pane": "m_ea4612ae",
+	"handle": "m_636563ee",
+	"thumb": "m_5eb7eb50"
+};
+//#endregion
+exports.default = splitter_module_default;
+
+//# sourceMappingURL=splitter.module.cjs.map

package/cjs/components/splitter/splitter.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.module.cjs","names":[],"sources":["../../../src/components/splitter/splitter.module.css"],"sourcesContent":[".root {\n  display: flex;\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n  }\n}\n\n.pane {\n  flex-grow: 0;\n  flex-shrink: 1;\n  overflow: auto;\n}\n\n.handle {\n  flex: 0 0 var(--splitter-line-size, rem(2px));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  touch-action: none;\n  outline: none;\n  background-color: var(--splitter-handle-color, var(--c-color-body));\n\n  &:where([data-orientation='horizontal']) {\n    cursor: col-resize;\n  }\n\n  &:where([data-orientation='vertical']) {\n    cursor: row-resize;\n  }\n}\n\n.thumb {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1000px;\n  color: var(--c-color-dimmed);\n  transition: color 100ms ease;\n\n  @mixin where-light {\n    background-color: var(--c-color-white);\n    border: rem(1px) solid var(--c-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--c-color-dark-6);\n    border: rem(1px) solid var(--c-color-dark-4);\n  }\n\n  &:where([data-orientation='horizontal']) {\n    width: rem(12px);\n    height: rem(60px);\n  }\n\n  &:where([data-orientation='vertical']) {\n    width: rem(60px);\n    height: rem(12px);\n  }\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .handle:focus-visible & {\n    box-shadow: 0 0 0 rem(2px) var(--c-primary-color-filled);\n  }\n}\n"],"mappings":";;AAAA,IAAA,0BAAe;CAAC,QAAO;CAAa,QAAO;CAAa,UAAS;CAAa,SAAQ;AAAY"}

package/cjs/components/splitter/splitter.utils.cjs

@@ -0,0 +1,12 @@
+"use client";
+const require_rem = require("../../core/utils/units-converters/rem.cjs");
+const require_get_theme_color = require("../../core/config-provider/color-functions/get-theme-color/get-theme-color.cjs");
+//#region packages/@cck-ui/core/src/components/splitter/splitter.utils.ts
+const varsResolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs").createVarsResolver((theme, { lineSize, handleColor }) => ({ root: {
+	"--splitter-line-size": require_rem.rem(lineSize),
+	"--splitter-handle-color": handleColor ? require_get_theme_color.getThemeColor(handleColor, theme) : void 0
+} }));
+//#endregion
+exports.varsResolver = varsResolver;
+
+//# sourceMappingURL=splitter.utils.cjs.map