npm - @cck-ui/core - Versions diffs - 0.20.0 → 0.20.2 - Mend

@cck-ui/core 0.20.0 → 0.20.2

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.

Files changed (114) hide show

package/cjs/components/semi-circle-progress/semi-circle-progress.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"semi-circle-progress.cjs","names":[],"sources":["../../../src/components/semi-circle-progress/semi-circle-progress.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :size=\"props.size\">\n <c-box\n v-bind=\"labelAttrs\"\n v-if=\"$slots.label\"\n :data-position=\"props.labelPosition\"\n :data-orientation=\"props.orientation\"\n >\n <slot name=\"label\" />\n </c-box>\n\n <svg\n v-bind=\"svgAttrs.rest\"\n :class=\"svgAttrs.className\"\n :style=\"svgAttrs.style\"\n :width=\"props.size\"\n :height=\"props.size! / 2\"\n :viewBox=\"`0 0 ${props.size} ${props.size! / 2}`\"\n >\n <circle\n fill=\"none\"\n stroke=\"var(--scp-empty-segment-color)\"\n v-bind=\"emptySegmentAttrs.rest\"\n :class=\"emptySegmentAttrs.className\"\n :style=\"emptySegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n\n <circle\n fill=\"none\"\n stroke=\"var(--scp-filled-segment-color)\"\n v-bind=\"filledSegmentAttrs.rest\"\n :class=\"filledSegmentAttrs.className\"\n :style=\"filledSegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n </svg>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SemiCircleProgressFactory, SemiCircleProgressProps } from './semi-circle-progress.types'\nimport classes from './semi-circle-progress.module.css'\nimport { varsResolver } from './semi-circle-progress.utils'\nimport { clamp } from 'es-toolkit'\n\ndefineOptions({\n name: 'CSemiCircleProgress',\n})\n\nconst rawProps = defineProps<SemiCircleProgressProps>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst defaultProps = {\n size: 200,\n thickness: 12,\n orientation: 'up',\n fillDirection: 'left-to-right',\n labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>\n\nconst props = useComponentProps({\n component: 'CSemiCircleProgress',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'size',\n 'thickness',\n 'value',\n 'orientation',\n 'fillDirection',\n 'filledSegmentColor',\n 'emptySegmentColor',\n 'transitionDuration',\n 'label',\n 'labelPosition',\n 'attributes',\n]\n\nconst getStyles = useStyles<SemiCircleProgressFactory>({\n name: 'SemiCircleProgress',\n props: ~~{ ...props.value, ...attrs } as SemiCircleProgressProps~~,\n classes,\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 coordinateForCircle = computed(() => props.value.size! / 2)\nconst radius = computed(() => (props.value.size! - 2 * props.value.thickness!) / 2)\nconst circumference = computed(() => Math.PI * radius.value)\nconst semiCirclePercentage = computed(\n () => clamp(props.value.value, 0, 100) * (circumference.value / 100)\n)\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst labelAttrs = computed(() => getStyles('label'))\n\nconst svgAttrs = computed(() => {\n const attrsResult = getStyles('svg')\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst emptySegmentAttrs = computed(() => {\n const attrsResult = getStyles('emptySegment', {\n style: { strokeDashoffset: circumference.value },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\nconst filledSegmentAttrs = computed(() => {\n const attrsResult = getStyles('filledSegment', {\n style: {\n strokeDashoffset: semiCirclePercentage.value,\n ...(semiCirclePercentage.value === 0 ? { strokeOpacity: 0 } : null),\n },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst mergedRootAttrs = 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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,WAAW;EAEjB,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,eAAe;GACnB,MAAM;GACN,WAAW;GACX,aAAa;GACb,eAAe;GACf,eAAe;EACjB;EAEA,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAqC~~;~~GACrD~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,oCAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,mCAAA;EACF,CAAC;EAED,MAAM,uBAAA,GAAA,IAAA,SAAA,OAAqC,MAAM,MAAM,OAAQ,CAAC;EAChE,MAAM,UAAA,GAAA,IAAA,SAAA,QAAyB,MAAM,MAAM,OAAQ,IAAI,MAAM,MAAM,aAAc,CAAC;EAClF,MAAM,iBAAA,GAAA,IAAA,SAAA,OAA+B,KAAK,KAAK,OAAO,KAAK;EAC3D,MAAM,wBAAA,GAAA,IAAA,SAAA,QAAA,GAAA,WAAA,MAAA,CACQ,MAAM,MAAM,OAAO,GAAG,GAAG,KAAK,cAAc,QAAQ,IAClE;EAEA,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAClD,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EAEpD,MAAM,YAAA,GAAA,IAAA,SAAA,OAA0B;GAE9B,MAAM,EAAE,WAAW,OAAO,GAAG,SADT,UAAU,KACQ;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EAED,MAAM,qBAAA,GAAA,IAAA,SAAA,OAAmC;GAIvC,MAAM,EAAE,WAAW,OAAO,GAAG,SAHT,UAAU,gBAAgB,EAC5C,OAAO,EAAE,kBAAkB,cAAc,MAAM,EACjD,CACsC;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EACD,MAAM,sBAAA,GAAA,IAAA,SAAA,OAAoC;GAOxC,MAAM,EAAE,WAAW,OAAO,GAAG,SANT,UAAU,iBAAiB,EAC7C,OAAO;IACL,kBAAkB,qBAAqB;IACvC,GAAI,qBAAqB,UAAU,IAAI,EAAE,eAAe,EAAE,IAAI;GAChE,EACF,CACsC;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EAED,MAAM,mBAAA,GAAA,IAAA,SAAA,OAAiC;GACrC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAtHS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EA5CD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,MAAM,OAAA,MAAM,KAAA,CAAA,GAAA;kCAQ/C,CALA,KAAA,OAAO,UAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAKP,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GANE,OAAA,YAAU;GAEjB,iBAAe,OAAA,MAAM;GACrB,oBAAkB,OAAA,MAAM;;mCAEJ,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,OAAA,CAAA,CAAA;;iJAoCjB,QAAA,GAAA,IAAA,WAAA,CAAA,OAhCI,SAAS,MAAI;GACpB,OAAO,OAAA,SAAS;GAChB,OAAO,OAAA,SAAS;GAChB,OAAO,OAAA,MAAM;GACb,QAAQ,OAAA,MAAM,OAAI;GAClB,SAAO,OAAS,OAAA,MAAM,KAAI,GAAI,OAAA,MAAM,OAAI;mCAavC,WAAA,GAAA,IAAA,WAAA,CAAA;GAVA,MAAK;GACL,QAAO;KACC,OAAA,kBAAkB,MAAI;GAC7B,OAAO,OAAA,kBAAkB;GACzB,OAAO,OAAA,kBAAkB;GACzB,IAAI,OAAA;GACJ,IAAI,OAAA;GACJ,GAAG,OAAA;GACH,gBAAc,OAAA,MAAM;GACpB,oBAAkB,OAAA;yDAcnB,WAAA,GAAA,IAAA,WAAA,CAAA;GAVA,MAAK;GACL,QAAO;KACC,OAAA,mBAAmB,MAAI;GAC9B,OAAO,OAAA,mBAAmB;GAC1B,OAAO,OAAA,mBAAmB;GAC1B,IAAI,OAAA;GACJ,IAAI,OAAA;GACJ,GAAG,OAAA;GACH,gBAAc,OAAA,MAAM;GACpB,oBAAkB,OAAA"}
1	+ {"version":3,"file":"semi-circle-progress.cjs","names":[],"sources":["../../../src/components/semi-circle-progress/semi-circle-progress.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :size=\"props.size\">\n <c-box\n v-bind=\"labelAttrs\"\n v-if=\"$slots.label\"\n :data-position=\"props.labelPosition\"\n :data-orientation=\"props.orientation\"\n >\n <slot name=\"label\" />\n </c-box>\n\n <svg\n v-bind=\"svgAttrs.rest\"\n :class=\"svgAttrs.className\"\n :style=\"svgAttrs.style\"\n :width=\"props.size\"\n :height=\"props.size! / 2\"\n :viewBox=\"`0 0 ${props.size} ${props.size! / 2}`\"\n >\n <circle\n fill=\"none\"\n stroke=\"var(--scp-empty-segment-color)\"\n v-bind=\"emptySegmentAttrs.rest\"\n :class=\"emptySegmentAttrs.className\"\n :style=\"emptySegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n\n <circle\n fill=\"none\"\n stroke=\"var(--scp-filled-segment-color)\"\n v-bind=\"filledSegmentAttrs.rest\"\n :class=\"filledSegmentAttrs.className\"\n :style=\"filledSegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n </svg>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SemiCircleProgressFactory, SemiCircleProgressProps } from './semi-circle-progress.types'\nimport classes from './semi-circle-progress.module.css'\nimport { varsResolver } from './semi-circle-progress.utils'\nimport { clamp } from 'es-toolkit'\n\ndefineOptions({\n name: 'CSemiCircleProgress',\n})\n\nconst rawProps = defineProps<SemiCircleProgressProps>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst defaultProps = {\n size: 200,\n thickness: 12,\n orientation: 'up',\n fillDirection: 'left-to-right',\n labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>\n\nconst props = useComponentProps({\n component: 'CSemiCircleProgress',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'size',\n 'thickness',\n 'value',\n 'orientation',\n 'fillDirection',\n 'filledSegmentColor',\n 'emptySegmentColor',\n 'transitionDuration',\n 'label',\n 'labelPosition',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SemiCircleProgressFactory>({\n name: 'SemiCircleProgress',\n props: styleProps,\n classes,\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 coordinateForCircle = computed(() => props.value.size! / 2)\nconst radius = computed(() => (props.value.size! - 2 * props.value.thickness!) / 2)\nconst circumference = computed(() => Math.PI * radius.value)\nconst semiCirclePercentage = computed(\n () => clamp(props.value.value, 0, 100) * (circumference.value / 100)\n)\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst labelAttrs = computed(() => getStyles('label'))\n\nconst svgAttrs = computed(() => {\n const attrsResult = getStyles('svg')\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst emptySegmentAttrs = computed(() => {\n const attrsResult = getStyles('emptySegment', {\n style: { strokeDashoffset: circumference.value },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\nconst filledSegmentAttrs = computed(() => {\n const attrsResult = getStyles('filledSegment', {\n style: {\n strokeDashoffset: semiCirclePercentage.value,\n ...(semiCirclePercentage.value === 0 ? { strokeOpacity: 0 } : null),\n },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst mergedRootAttrs = 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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/simple-grid/simple-grid.cjs CHANGED Viewed

@@ -357,15 +357,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"autoRows",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "SimpleGrid",
 			classes: require_simple_grid_module.default,
-			props: {
-				...props.value,
-				...attrs
-			},
-			className: props.value.className,
-			style: props.value.style,
+			props: styleProps,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -417,6 +419,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			responsiveClassname,
 			autoColsAttr,

package/cjs/components/simple-grid/simple-grid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-grid.cjs","names":[],"sources":["../../../src/components/simple-grid/simple-grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container'\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport type { SimpleGridFactory, SimpleGridProps } from './simple-grid.types'\nimport classes from './simple-grid.module.css'\nimport { useSimpleGridStyle } from './simple-grid-custom'\n\ndefineOptions({\n name: 'CSimpleGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SimpleGridProps>()\n\nconst props = useComponentProps({\n component: 'CSimpleGrid',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'cols',\n 'verticalSpacing',\n 'spacing',\n 'type',\n 'minColWidth',\n 'autoFlow',\n 'autoRows',\n 'attributes',\n]\n\nconst getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props: ~~{ ...props.value, ...attrs } as SimpleGridProps~~,\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})\n\nconst responsiveClassname = useRandomClassName()\n\nconst autoColsAttr =\n props.value.minColWidth !== undefined ? props.value.autoFlow \|\| 'auto-fill' : undefined\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\nconst mergedRootAttrs = 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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, ...rootAttrs.value }\n})\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useSimpleGridStyle({\n selector: responsiveClassname,\n ...props.value,\n})\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n const cssText = gridStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n container: computed(() => _container.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EA8BA~~,MAAM,cAAA,GAAA,IAAA,IAAA,CAAmD,IAAI;EAC7D,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAA6B;GAC7C,MAAM;GACN,SAAA,2BAAA;GACA,OAAO;~~IAAE~~,~~GAAG~~,MAAM~~;IAAO~~,~~GAAG;GAAM;GAClC,WAAW,~~MAAM~~,MAAM~~;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;EACpB,CAAC;EAED,MAAM,sBAAsB,6BAAA,mBAAmB;EAE/C,MAAM,eACJ,MAAM,MAAM,gBAAgB,KAAA,IAAY,MAAM,MAAM,YAAY,cAAc,KAAA;EAEhF,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,oBAAoB,CAAC,CAAC;EACtF,MAAM,mBAAA,GAAA,IAAA,SAAA,OAAiC;GACrC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GACV,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,MAAM,kBAAA,GAAA,IAAA,SAAA,OAAgC,UAAU,WAAW,CAAC;EAE5D,MAAM,YAAY,2BAAA,mBAAmB;GACnC,UAAU;GACV,GAAG,MAAM;EACX,CAAC;EAED,MAAM,mBAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAC/C,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,MAAM,UAAU,UAAU,MAAM;GAChC,IAAI,SAAS;IACX,MAAM,SAAS,iCAAA,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,IAAI,gBAAgB,OAClB,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;EAED,SAAa;GACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;GAC9C,YAAA,GAAA,IAAA,SAAA,OAA0B,WAAW,OAAO,QAAQ,IAAI;EAC1D,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAzH~~+B,OAAA,SAAI,gBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAI1B,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;;EAJD,KAAI;IAAiD,OAAA,cAAc,GAAA;kCAGhE,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,kBAAgB,OAAA,aAAY,CAAA,GAAA;mCAC/D,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA;;;;uDAMF,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;;EAFD,KAAI;IAAgB,OAAA,iBAAe,EAAG,kBAAgB,OAAA,aAAY,CAAA,GAAA;kCAC/D,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"simple-grid.cjs","names":[],"sources":["../../../src/components/simple-grid/simple-grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container'\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n CStyleProp,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport type { SimpleGridFactory, SimpleGridProps } from './simple-grid.types'\nimport classes from './simple-grid.module.css'\nimport { useSimpleGridStyle } from './simple-grid-custom'\n\ndefineOptions({\n name: 'CSimpleGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SimpleGridProps>()\n\nconst props = useComponentProps({\n component: 'CSimpleGrid',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'cols',\n 'verticalSpacing',\n 'spacing',\n 'type',\n 'minColWidth',\n 'autoFlow',\n 'autoRows',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props: styleProps,\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})\n\nconst responsiveClassname = useRandomClassName()\n\nconst autoColsAttr =\n props.value.minColWidth !== undefined ? props.value.autoFlow \|\| 'auto-fill' : undefined\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\nconst mergedRootAttrs = 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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, ...rootAttrs.value }\n})\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useSimpleGridStyle({\n selector: responsiveClassname,\n ...props.value,\n})\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n const cssText = gridStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n container: computed(() => _container.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/skeleton/skeleton.cjs CHANGED Viewed

@@ -333,6 +333,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		const rawProps = __props;
 		const props = require_use_component_props.useComponentProps({
 			component: "CSkeleton",
+			defaultProps: {},
 			props: rawProps
 		});
 		const knownProps = [
@@ -351,15 +352,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mod",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Skeleton",
 			classes: require_skeleton_module.default,
-			props: {
-				...props.value,
-				...attrs
-			},
-			className: props.value.className,
-			style: props.value.style,
+			props: styleProps,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -388,6 +391,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/cjs/components/skeleton/skeleton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.cjs","names":[],"sources":["../../../src/components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SkeletonFactory, SkeletonProps } from './skeleton.types'\nimport classes from './skeleton.module.css'\nimport { varsResolver } from './skeleton.utils'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'CSkeleton',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = withDefaults(defineProps<SkeletonProps>(), {\n animate: true,\n visible: true,\n})\n\nconst props = useComponentProps({\n component: 'CSkeleton',\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'width',\n 'height',\n 'circle',\n 'visible',\n 'radius',\n 'animate',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props: ~~{ ...props.value, ...attrs } as SkeletonProps~~,\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 modList = computed(() => [{ visible: props.value.visible }, { animate: props.value.animate }])\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(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAKjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAA2B;GAC3C,MAAM;GACN,SAAA,wBAAA;GACA,OAAO;~~IAAE~~,~~GAAG~~,MAAM~~;IAAO~~,~~GAAG;GAAM;GAClC,WAAW,~~MAAM~~,MAAM~~;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,uBAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EAEnG,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;mDAjFS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"skeleton.cjs","names":[],"sources":["../../../src/components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SkeletonFactory, SkeletonProps } from './skeleton.types'\nimport classes from './skeleton.module.css'\nimport { varsResolver } from './skeleton.utils'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'CSkeleton',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = withDefaults(defineProps<SkeletonProps>(), {\n animate: true,\n visible: true,\n})\n\nconst props = useComponentProps({\n component: 'CSkeleton',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'width',\n 'height',\n 'circle',\n 'visible',\n 'radius',\n 'animate',\n 'mod',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props: styleProps,\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 modList = computed(() => [{ visible: props.value.visible }, { animate: props.value.animate }])\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(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAKjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAA2B;GAC3C,MAAM;GACN,SAAA,wBAAA;GACA,OAAO;GACP,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,uBAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EAEnG,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDAxFS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/space/space.cjs CHANGED Viewed

@@ -322,15 +322,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mih",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Space",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_space_module.default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -357,6 +359,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

package/cjs/components/space/space.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"space.cjs","names":[],"sources":["../../../src/components/space/space.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :w=\"props.w\"\n :miw=\"props.miw ?? props.w\"\n :h=\"props.h\"\n :mih=\"props.mih ?? props.h\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SpaceFactory, SpaceProps } from './space.types'\nimport classes from './space.module.css'\n\ndefineOptions({\n name: 'CSpace',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SpaceProps>()\n\nconst props = useComponentProps({\n component: 'CSpace',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'w',\n 'h',\n 'miw',\n 'mih',\n 'attributes',\n]\n\nconst getStyles = useStyles<SpaceFactory>({\n name: 'Space',\n props: ~~{ ...props.value, ...attrs } as SpaceProps~~,\n classes,\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})\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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAwB~~;~~GACxC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,qBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;EACpB,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;mDArES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EARN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;EACxB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;;kCAEjB,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"space.cjs","names":[],"sources":["../../../src/components/space/space.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :w=\"props.w\"\n :miw=\"props.miw ?? props.w\"\n :h=\"props.h\"\n :mih=\"props.mih ?? props.h\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SpaceFactory, SpaceProps } from './space.types'\nimport classes from './space.module.css'\n\ndefineOptions({\n name: 'CSpace',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SpaceProps>()\n\nconst props = useComponentProps({\n component: 'CSpace',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'w',\n 'h',\n 'miw',\n 'mih',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SpaceFactory>({\n name: 'Space',\n props: styleProps,\n classes,\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})\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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAwB;GACxC,MAAM;GACN,OAAO;GACP,SAAA,qBAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;EACpB,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;mDA3ES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EARN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;EACxB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;;kCAEjB,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/splitter/splitter.cjs CHANGED Viewed

@@ -402,15 +402,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"attributes"
 		];
 		const modList = (0, vue.computed)(() => [{ orientation: props.value.orientation }]);
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		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,
+			props: styleProps,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -552,6 +554,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			props,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			paneVNodes,
 			panels,

package/cjs/components/splitter/splitter.cjs.map CHANGED Viewed

	@@ -1 +1 @@
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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"}
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, CStyleProp, 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 styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SplitterFactory>({\n name: 'Splitter',\n classes,\n props: styleProps,\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/stack/stack.cjs CHANGED Viewed

@@ -340,15 +340,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"variant",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Stack",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_stack_module.default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -379,6 +381,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

package/cjs/components/stack/stack.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stack.cjs","names":[],"sources":["../../../src/components/stack/stack.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { StackFactory, StackProps } from './stack.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './stack.module.css'\nimport { varsResolver } from './stack.utils'\n\ndefineOptions({\n name: 'CStack',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<StackProps>()\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>\n\nconst props = useComponentProps({\n component: 'CStack',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'justify',\n 'gap',\n 'variant',\n 'attributes',\n]\n\nconst getStyles = useStyles<StackFactory>({\n name: 'Stack',\n props: ~~{ ...props.value, ...attrs } as StackProps~~,\n classes,\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 rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe;GACnB,KAAK;GACL,OAAO;GACP,SAAS;EACX;EAEA,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAwB~~;~~GACxC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,qBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,oBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;mDA7ES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;kCAC9C,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"stack.cjs","names":[],"sources":["../../../src/components/stack/stack.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { StackFactory, StackProps } from './stack.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './stack.module.css'\nimport { varsResolver } from './stack.utils'\n\ndefineOptions({\n name: 'CStack',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<StackProps>()\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>\n\nconst props = useComponentProps({\n component: 'CStack',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'justify',\n 'gap',\n 'variant',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<StackFactory>({\n name: 'Stack',\n props: styleProps,\n classes,\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 rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\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 = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe;GACnB,KAAK;GACL,OAAO;GACP,SAAS;EACX;EAEA,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAwB;GACxC,MAAM;GACN,OAAO;GACP,SAAA,qBAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,oBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDAnFS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;kCAC9C,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/text/text.cjs CHANGED Viewed

@@ -376,15 +376,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"data-inline": props.value.inline,
 			"data-inherit": props.value.inherit
 		}]);
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: ["Text", props.value.__staticSelector],
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_text_module.default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -414,6 +416,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			getTextTruncate,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

package/cjs/components/text/text.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text.cjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :size=\"props.size\"\n :tag=\"props.span ? 'span' : 'p'\"\n :variant=\"props.variant\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport { useStyles, CBox, useComponentProps } from '../../core'\nimport { varsResolver } from './text.utils.js'\n\ndefineOptions({\n name: 'CText',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<TextProps>()\n\nconst props = useComponentProps({\n component: 'CText',\n defaultProps: {},\n props: rawProps,\n})\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start'\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end'\n }\n\n return undefined\n}\n\nconst knownProps = [\n 'lineClamp',\n 'truncate',\n 'inline',\n 'inherit',\n 'gradient',\n 'span',\n 'textWrap',\n '__staticSelector',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'variant',\n 'mod',\n 'size',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-truncate': getTextTruncate(props.value.truncate),\n 'data-line-clamp': typeof props.value.lineClamp === 'number',\n 'data-inline': props.value.inline,\n 'data-inherit': props.value.inherit,\n },\n])\n\nconst getStyles = useStyles<TextFactory>({\n name: ['Text', props.value.__staticSelector],\n props: ~~{ ...props.value, ...attrs } as TextProps~~,\n classes,\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 rootAttrs = computed(() => getStyles('root', { focusable: true }))\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(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,MAAM,QAAQ;GACrD,mBAAmB,OAAO,MAAM,MAAM,cAAc;GACpD,eAAe,MAAM,MAAM;GAC3B,gBAAgB,MAAM,MAAM;EAC9B,CACF,CAAC;EAED,MAAM,YAAY,mBAAA,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,MAAM,gBAAgB;GAC3C,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA,oBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,mBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EAEvE,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;mDAtGS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAPN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;kCAER,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"text.cjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :size=\"props.size\"\n :tag=\"props.span ? 'span' : 'p'\"\n :variant=\"props.variant\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport { useStyles, CBox, useComponentProps, CStyleProp } from '../../core'\nimport { varsResolver } from './text.utils.js'\n\ndefineOptions({\n name: 'CText',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<TextProps>()\n\nconst props = useComponentProps({\n component: 'CText',\n defaultProps: {},\n props: rawProps,\n})\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start'\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end'\n }\n\n return undefined\n}\n\nconst knownProps = [\n 'lineClamp',\n 'truncate',\n 'inline',\n 'inherit',\n 'gradient',\n 'span',\n 'textWrap',\n '__staticSelector',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'variant',\n 'mod',\n 'size',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-truncate': getTextTruncate(props.value.truncate),\n 'data-line-clamp': typeof props.value.lineClamp === 'number',\n 'data-inline': props.value.inline,\n 'data-inherit': props.value.inherit,\n },\n])\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<TextFactory>({\n name: ['Text', props.value.__staticSelector],\n props: styleProps,\n classes,\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 rootAttrs = computed(() => getStyles('root', { focusable: true }))\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(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,MAAM,QAAQ;GACrD,mBAAmB,OAAO,MAAM,MAAM,cAAc;GACpD,eAAe,MAAM,MAAM;GAC3B,gBAAgB,MAAM,MAAM;EAC9B,CACF,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,MAAM,gBAAgB;GAC3C,OAAO;GACP,SAAA,oBAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,mBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EAEvE,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;mDA5GS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAPN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;kCAER,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/unstyled-button/unstyled-button.cjs CHANGED Viewed

@@ -332,15 +332,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"style",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: props.value.__staticSelector,
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_unstyled_button_module.default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -364,6 +366,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			tag,
 			_root,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

package/cjs/components/unstyled-button/unstyled-button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"unstyled-button.cjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :tag=\"tag\"\n :type=\"tag === 'button' ? 'button' : undefined\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n name: 'UnstyledButton',\n})\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n component: 'UnstyledButton',\n defaultProps: {\n __staticSelector: 'UnstyledButton',\n },\n props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst knownProps = [\n 'className',\n 'tag',\n '__staticSelector',\n 'unstyled',\n 'classNames',\n 'styles',\n 'style',\n 'attributes',\n]\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n name: props.value.__staticSelector!,\n props: ~~{ ...props.value, ...attrs } as UnstyledButtonProps~~,\n classes,\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})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\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 return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA,+BAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;EAC1B,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;mDAlES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;kCAE7B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"unstyled-button.cjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :tag=\"tag\"\n :type=\"tag === 'button' ? 'button' : undefined\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n name: 'UnstyledButton',\n})\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n component: 'UnstyledButton',\n defaultProps: {\n __staticSelector: 'UnstyledButton',\n },\n props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst knownProps = [\n 'className',\n 'tag',\n '__staticSelector',\n 'unstyled',\n 'classNames',\n 'styles',\n 'style',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n name: props.value.__staticSelector!,\n props: styleProps,\n classes,\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})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\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 return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,OAAO;GACP,SAAA,+BAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;EAC1B,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDAxES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;kCAE7B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}