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/close-button/close-button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"close-button.cjs","names":[],"sources":["../../../src/components/close-button/close-button.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :disabled=\"props.disabled \|\| props.dataDisabled\"\n :unstyled=\"props.unstyled\"\n :variant=\"props.variant\"\n >\n <slot name=\"icon\">\n <close-icon></close-icon>\n </slot>\n <slot />\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CloseButtonFactory, CloseButtonProps } from './close-button.types'\nimport UnstyledButton from '../unstyled-button'\nimport CloseIcon from './close-icon.vue'\nimport classes from './close-button.module.css'\nimport { useComponentProps, useStyles } from '../../core'\nimport { varsResolver } from './close-button.utils'\n\ndefineOptions({\n name: 'CCloseButton',\n})\n\ndefineSlots<{\n icon: any\n default: any\n}>()\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<CloseButtonProps>()\n\nconst defaultProps = {\n variant: 'subtle',\n} satisfies Partial<CloseButtonProps>\n\nconst props = useComponentProps({\n component: 'CCloseButton',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'iconSize',\n 'vars',\n 'radius',\n 'className',\n 'classNames',\n 'style',\n 'styles',\n 'unstyled',\n 'dataDisabled',\n 'disabled',\n 'variant',\n 'mod',\n 'attributes',\n '__staticSelector',\n]\n\nconst getStyles = useStyles<CloseButtonFactory>({\n name: props.value.__staticSelector \|\| 'CloseButton',\n props: ~~{ ...props.value, ...attrs } as CloseButtonProps~~,\n classes,\n className: props.value.className,\n classNames: props.value.classNames,\n style: props.value.style,\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(() => [\n {\n disabled: props.value.disabled \|\| props.value.dataDisabled,\n },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n variant: props.value.variant,\n active: !props.value.disabled && !props.value.dataDisabled,\n })\n)\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,SAAA,GAAA,IAAA,IAAA,CAAwD,IAAI;EAElE,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,SAAS,SACX;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;EACF;EAEA,MAAM,YAAY,mBAAA,UAA8B;GAC9C,MAAM,MAAM,MAAM,oBAAoB;GACtC,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA,4BAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,YAAY,MAAM,MAAM;GACxB,~~OAAO~~,MAAM,MAAM;~~GACnB~~,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,2BAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAChD,CACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OACJ,UAAU,QAAQ;GAChB,SAAS,MAAM,MAAM;GACrB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;EAChD,CAAC,CACH;EAEA,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~~;;;;;;;;;;;;;;;;;;;;;;;;;mDAnGmB~~,OAAA,oBAAA,GAAA,IAAA,WAAA,CAAA,EAVhB,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,UAAU,OAAA,MAAM,YAAY,OAAA,MAAM;EAClC,UAAU,OAAA,MAAM;EAChB,SAAS,OAAA,MAAM;;kCAIT,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,QAAA,CAAA,SAAA,EAAA,GAAA,IAAA,YAAA,CADoB,OAAA,YAAA,CAAA,CAAA,IAAA,GAAA,IAAA,WAAA,CAEnB,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"close-button.cjs","names":[],"sources":["../../../src/components/close-button/close-button.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :disabled=\"props.disabled \|\| props.dataDisabled\"\n :unstyled=\"props.unstyled\"\n :variant=\"props.variant\"\n >\n <slot name=\"icon\">\n <close-icon></close-icon>\n </slot>\n <slot />\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CloseButtonFactory, CloseButtonProps } from './close-button.types'\nimport UnstyledButton from '../unstyled-button'\nimport CloseIcon from './close-icon.vue'\nimport classes from './close-button.module.css'\nimport { CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { varsResolver } from './close-button.utils'\n\ndefineOptions({\n name: 'CCloseButton',\n})\n\ndefineSlots<{\n icon: any\n default: any\n}>()\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<CloseButtonProps>()\n\nconst defaultProps = {\n variant: 'subtle',\n} satisfies Partial<CloseButtonProps>\n\nconst props = useComponentProps({\n component: 'CCloseButton',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'iconSize',\n 'vars',\n 'radius',\n 'className',\n 'classNames',\n 'style',\n 'styles',\n 'unstyled',\n 'dataDisabled',\n 'disabled',\n 'variant',\n 'mod',\n 'attributes',\n '__staticSelector',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<CloseButtonFactory>({\n name: props.value.__staticSelector \|\| 'CloseButton',\n props: styleProps,\n classes,\n className: () => props.value.className,\n classNames: props.value.classNames,\n style: () => props.value.style,\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(() => [\n {\n disabled: props.value.disabled \|\| props.value.dataDisabled,\n },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n variant: props.value.variant,\n active: !props.value.disabled && !props.value.dataDisabled,\n })\n)\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,SAAA,GAAA,IAAA,IAAA,CAAwD,IAAI;EAElE,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,SAAS,SACX;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;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,UAA8B;GAC9C,MAAM,MAAM,MAAM,oBAAoB;GACtC,OAAO;GACP,SAAA,4BAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,YAAY,MAAM,MAAM;GACxB,aAAa,MAAM,MAAM;GACzB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,2BAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAChD,CACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OACJ,UAAU,QAAQ;GAChB,SAAS,MAAM,MAAM;GACrB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;EAChD,CAAC,CACH;EAEA,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;;;;;;;;;;;;;;;;;;;;;;;;;;mDAzGmB,OAAA,oBAAA,GAAA,IAAA,WAAA,CAAA,EAVhB,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,UAAU,OAAA,MAAM,YAAY,OAAA,MAAM;EAClC,UAAU,OAAA,MAAM;EAChB,SAAS,OAAA,MAAM;;kCAIT,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,QAAA,CAAA,SAAA,EAAA,GAAA,IAAA,YAAA,CADoB,OAAA,YAAA,CAAA,CAAA,IAAA,GAAA,IAAA,WAAA,CAEnB,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/container/container.cjs CHANGED Viewed

@@ -339,19 +339,21 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"attributes",
 			"strategy"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const modList = (0, vue.computed)(() => [{
 			fluid: props.value.fluid,
 			strategy: props.value.strategy
 		}]);
 		const getStyles = require_use_styles.useStyles({
 			name: "Container",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_container_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,
@@ -380,6 +382,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			modList,
 			getStyles,
 			rootAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"container.cjs","names":[],"sources":["../../../src/components/container/container.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\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 { ContainerFactory, ContainerProps } from './container.types'\nimport { varsResolver } from './container.utils'\nimport classes from './container.module.css'\n\ndefineOptions({\n name: 'CContainer',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ContainerProps>()\n\nconst defaultProps = {\n strategy: 'block',\n} satisfies Partial<ContainerProps>\n\nconst props = useComponentProps({\n component: 'CContainer',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'fluid',\n 'mod',\n 'attributes',\n 'strategy',\n]\n\nconst modList = computed(() => [{ fluid: props.value.fluid, strategy: props.value.strategy }])\n\nconst getStyles = useStyles<ContainerFactory>({\n name: 'Container',\n props: ~~{ ...props.value, ...attrs } as ContainerProps~~,\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 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 = [\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;EAEjB,MAAM,eAAe,EACnB,UAAU,QACZ;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;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC;GAAE,OAAO,MAAM,MAAM;GAAO,UAAU,MAAM,MAAM;EAAS,CAAC,CAAC;EAE7F,MAAM,YAAY,mBAAA,UAA4B;GAC5C,MAAM;GACN,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA,yBAAA;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,wBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,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,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~~;;;;;;;;;;;;;;;;;;;;;;;;mDA/ES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,eAAe,GAAA;kCAChC,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"container.cjs","names":[],"sources":["../../../src/components/container/container.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\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 { ContainerFactory, ContainerProps } from './container.types'\nimport { varsResolver } from './container.utils'\nimport classes from './container.module.css'\n\ndefineOptions({\n name: 'CContainer',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ContainerProps>()\n\nconst defaultProps = {\n strategy: 'block',\n} satisfies Partial<ContainerProps>\n\nconst props = useComponentProps({\n component: 'CContainer',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'fluid',\n 'mod',\n 'attributes',\n 'strategy',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst modList = computed(() => [{ fluid: props.value.fluid, strategy: props.value.strategy }])\n\nconst getStyles = useStyles<ContainerFactory>({\n name: 'Container',\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 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 = [\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;EAEjB,MAAM,eAAe,EACnB,UAAU,QACZ;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;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC;GAAE,OAAO,MAAM,MAAM;GAAO,UAAU,MAAM,MAAM;EAAS,CAAC,CAAC;EAE7F,MAAM,YAAY,mBAAA,UAA4B;GAC5C,MAAM;GACN,OAAO;GACP,SAAA,yBAAA;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,wBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,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,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;;;;;;;;;;;;;;;;;;;;;;;;;mDArFS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,eAAe,GAAA;kCAChC,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/empty-state/empty-state.cjs CHANGED Viewed

@@ -356,15 +356,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"attributes"
 		];
 		const modList = (0, vue.computed)(() => [{ align: props.value.align }]);
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "EmptyState",
 			classes: require_empty_state_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,
@@ -404,6 +406,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			props,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			withIndicatorBackground,
 			hasBodyContent,

package/cjs/components/empty-state/empty-state.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../src/components/empty-state/empty-state.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :variant=\"props.variant\">\n <empty-state-indicator v-if=\"$slots.icon\">\n <slot name=\"icon\" />\n </empty-state-indicator>\n <c-box v-if=\"hasBodyContent\" v-bind=\"bodyAttrs\">\n <empty-state-title v-if=\"$slots.title\" :order=\"props.order\">\n <slot name=\"title\" />\n </empty-state-title>\n <empty-state-description v-if=\"$slots.description\">\n <slot name=\"description\" />\n </empty-state-description>\n <slot />\n <empty-state-actions v-if=\"$slots.actions\">\n <slot name=\"actions\" />\n </empty-state-actions>\n </c-box>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { EmptyStateFactory, EmptyStateProps } from './empty-state.types'\nimport classes from './empty-state.module.css'\nimport { varsResolver } from './empty-state.utils'\nimport { provideEmptyStateContext } from './empty-state.context'\nimport EmptyStateActions from './empty-state-actions/empty-state-actions.vue'\nimport EmptyStateDescription from './empty-state-description/empty-state-description.vue'\nimport EmptyStateIndicator from './empty-state-indicator/empty-state-indicator.vue'\nimport EmptyStateTitle from './empty-state-title/empty-state-title.vue'\n\ndefineOptions({\n name: 'CEmptyState',\n})\n\ndefineSlots<{\n actions: any\n default: any\n description: any\n icon: any\n title: any\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<EmptyStateProps>()\n\nconst defaultProps = {\n size: 'md',\n align: 'center',\n} satisfies Partial<EmptyStateProps>\n\nconst props = useComponentProps({\n component: 'CEmptyState',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'variant',\n 'color',\n 'order',\n 'withIndicatorBackground',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n align: props.value.align,\n },\n])\n\nconst getStyles = useStyles<EmptyStateFactory>({\n name: 'EmptyState',\n classes,\n props: ~~{ ...props.value, ...attrs } as EmptyStateProps~~,\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 withIndicatorBackground = computed(\n () => props.value.withIndicatorBackground \|\| !!props.value.variant\n)\n\nprovideEmptyStateContext({\n getStyles,\n withIndicatorBackground,\n})\n\nconst hasBodyContent = computed(() => {\n return !!(slots.actions \|\| slots.default \|\| slots.description \|\| slots.title)\n})\n\nconst rootAttrs = computed(() => getStyles('root', { variant: props.value.variant }))\nconst bodyAttrs = computed(() => getStyles('body'))\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 = [\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EACvB,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe;GACnB,MAAM;GACN,OAAO;EACT;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;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,OAAO,MAAM,MAAM,MACrB,CACF,CAAC;EAED,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;GAClB,cAAA,0BAAA;EACF,CAAC;EAED,MAAM,2BAAA,GAAA,IAAA,SAAA,OACE,MAAM,MAAM,2BAA2B,CAAC,CAAC,MAAM,MAAM,OAC7D;EAEA,4BAAA,yBAAyB;GACvB;GACA;EACF,CAAC;EAED,MAAM,kBAAA,GAAA,IAAA,SAAA,OAAgC;GACpC,OAAO,CAAC,EAAE,MAAM,WAAW,MAAM,WAAW,MAAM,eAAe,MAAM;EACzE,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EACpF,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,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,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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAnHS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAhBD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;kCAGlC,CAFK,KAAA,OAAO,SAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAEZ,OAAA,wBAAA,EAAA,KAAA,EAAA,GAAA;mCADF,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,MAAA,CAAA,CAAA;;mDAET,OAAA,mBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAWL,OAAA,UAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAX6B,OAAA,SAAS,CAAA,GAAA;mCAGxB;IAFK,KAAA,OAAO,UAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAEZ,OAAA,oBAAA;;KAFoB,OAAO,OAAA,MAAM;;qCAC9B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,OAAA,CAAA,CAAA;;;IAEQ,KAAA,OAAO,gBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAEZ,OAAA,0BAAA,EAAA,KAAA,EAAA,GAAA;qCADG,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,aAAA,CAAA,CAAA;;;wBAErB,KAAA,QAAA,SAAA;IACmB,KAAA,OAAO,YAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAEZ,OAAA,sBAAA,EAAA,KAAA,EAAA,GAAA;qCADG,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../src/components/empty-state/empty-state.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :variant=\"props.variant\">\n <empty-state-indicator v-if=\"$slots.icon\">\n <slot name=\"icon\" />\n </empty-state-indicator>\n <c-box v-if=\"hasBodyContent\" v-bind=\"bodyAttrs\">\n <empty-state-title v-if=\"$slots.title\" :order=\"props.order\">\n <slot name=\"title\" />\n </empty-state-title>\n <empty-state-description v-if=\"$slots.description\">\n <slot name=\"description\" />\n </empty-state-description>\n <slot />\n <empty-state-actions v-if=\"$slots.actions\">\n <slot name=\"actions\" />\n </empty-state-actions>\n </c-box>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { EmptyStateFactory, EmptyStateProps } from './empty-state.types'\nimport classes from './empty-state.module.css'\nimport { varsResolver } from './empty-state.utils'\nimport { provideEmptyStateContext } from './empty-state.context'\nimport EmptyStateActions from './empty-state-actions/empty-state-actions.vue'\nimport EmptyStateDescription from './empty-state-description/empty-state-description.vue'\nimport EmptyStateIndicator from './empty-state-indicator/empty-state-indicator.vue'\nimport EmptyStateTitle from './empty-state-title/empty-state-title.vue'\n\ndefineOptions({\n name: 'CEmptyState',\n})\n\ndefineSlots<{\n actions: any\n default: any\n description: any\n icon: any\n title: any\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<EmptyStateProps>()\n\nconst defaultProps = {\n size: 'md',\n align: 'center',\n} satisfies Partial<EmptyStateProps>\n\nconst props = useComponentProps({\n component: 'CEmptyState',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'variant',\n 'color',\n 'order',\n 'withIndicatorBackground',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n align: props.value.align,\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<EmptyStateFactory>({\n name: 'EmptyState',\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 withIndicatorBackground = computed(\n () => props.value.withIndicatorBackground \|\| !!props.value.variant\n)\n\nprovideEmptyStateContext({\n getStyles,\n withIndicatorBackground,\n})\n\nconst hasBodyContent = computed(() => {\n return !!(slots.actions \|\| slots.default \|\| slots.description \|\| slots.title)\n})\n\nconst rootAttrs = computed(() => getStyles('root', { variant: props.value.variant }))\nconst bodyAttrs = computed(() => getStyles('body'))\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 = [\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":"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"}

package/cjs/components/flex/flex.cjs CHANGED Viewed

@@ -361,15 +361,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"direction",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Flex",
 			classes: require_flex_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,
@@ -443,6 +445,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			theme,
 			randomClassName,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"flex.cjs","names":[],"sources":["../../../src/components/flex/flex.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 { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n filterProps,\n hashStyleProps,\n parseStyleProps,\n responsiveStyleManager,\n stylesToString,\n useCckTheme,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport classes from './flex.module.css'\nimport { FlexFactory, FlexProps } from './flex.types'\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props'\n\ndefineOptions({\n name: 'CFlex',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<FlexProps>()\n\nconst props = useComponentProps({\n component: 'CFlex',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'gap',\n 'rowGap',\n 'columnGap',\n 'align',\n 'justify',\n 'wrap',\n 'direction',\n 'attributes',\n]\n\nconst getStyles = useStyles<FlexFactory>({\n name: 'Flex',\n classes,\n props: ~~{ ...props.value, ...attrs } as FlexProps~~,\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 theme = useCckTheme()\nconst randomClassName = useRandomClassName()\n\nconst parsedStyleProps = parseStyleProps({\n styleProps: {\n gap: props.value.gap,\n rowGap: props.value.rowGap,\n columnGap: props.value.columnGap,\n align: props.value.align,\n justify: props.value.justify,\n wrap: props.value.wrap,\n direction: props.value.direction,\n },\n theme: theme.value,\n data: FLEX_STYLE_PROPS_DATA,\n})\n\nconst responsiveClassName = parsedStyleProps.hasResponsiveStyles\n ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n : randomClassName\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassName }))\n\nconst mergedStyle = computed(() => {\n const rootStyle = rootAttrs.value.style \|\| {}\n const inlineStyles = filterProps(parsedStyleProps.inlineStyles)\n return { ...rootStyle, ...inlineStyles }\n})\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 {\n ...others,\n mod: mergedMod,\n ...rootAttrs.value,\n style: mergedStyle.value,\n }\n})\n\nconst queryStyles = {\n styles: parsedStyleProps.styles,\n media: parsedStyleProps.media,\n selector: responsiveClassName,\n}\n\nconst queryStylesString = stylesToString(queryStyles)\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n if (queryStylesString) {\n const newKey = responsiveStyleManager.register(queryStylesString)\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})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EA4BA~~,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,UAAuB;GACvC,MAAM;GACN,SAAA,oBAAA;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,QAAQ,gCAAA,YAAY;EAC1B,MAAM,kBAAkB,6BAAA,mBAAmB;EAE3C,MAAM,mBAAmB,0BAAA,gBAAgB;GACvC,YAAY;IACV,KAAK,MAAM,MAAM;IACjB,QAAQ,MAAM,MAAM;IACpB,WAAW,MAAM,MAAM;IACvB,OAAO,MAAM,MAAM;IACnB,SAAS,MAAM,MAAM;IACrB,MAAM,MAAM,MAAM;IAClB,WAAW,MAAM,MAAM;GACzB;GACA,OAAO,MAAM;GACb,MAAM,mBAAA;EACR,CAAC;EAED,MAAM,sBAAsB,iBAAiB,sBACzC,oBAAA,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;EAEJ,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,oBAAoB,CAAC,CAAC;EAEtF,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,YAAY,UAAU,MAAM,SAAS,CAAC;GAC5C,MAAM,eAAe,qBAAA,YAAY,iBAAiB,YAAY;GAC9D,OAAO;IAAE,GAAG;IAAW,GAAG;GAAa;EACzC,CAAC;EAED,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;IACL,GAAG;IACH,KAAK;IACL,GAAG,UAAU;IACb,OAAO,YAAY;GACrB;EACF,CAAC;EAED,MAAM,cAAc;GAClB,QAAQ,iBAAiB;GACzB,OAAO,iBAAiB;GACxB,UAAU;EACZ;EAEA,MAAM,oBAAoB,yBAAA,eAAe,WAAW;EAEpD,MAAM,mBAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAC/C,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,IAAI,mBAAmB;IACrB,MAAM,SAAS,iCAAA,uBAAuB,SAAS,iBAAiB;IAChE,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,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA/IS~~,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":"flex.cjs","names":[],"sources":["../../../src/components/flex/flex.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 { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n CStyleProp,\n filterProps,\n hashStyleProps,\n parseStyleProps,\n responsiveStyleManager,\n stylesToString,\n useCckTheme,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport classes from './flex.module.css'\nimport { FlexFactory, FlexProps } from './flex.types'\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props'\n\ndefineOptions({\n name: 'CFlex',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<FlexProps>()\n\nconst props = useComponentProps({\n component: 'CFlex',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'gap',\n 'rowGap',\n 'columnGap',\n 'align',\n 'justify',\n 'wrap',\n 'direction',\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<FlexFactory>({\n name: 'Flex',\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 theme = useCckTheme()\nconst randomClassName = useRandomClassName()\n\nconst parsedStyleProps = parseStyleProps({\n styleProps: {\n gap: props.value.gap,\n rowGap: props.value.rowGap,\n columnGap: props.value.columnGap,\n align: props.value.align,\n justify: props.value.justify,\n wrap: props.value.wrap,\n direction: props.value.direction,\n },\n theme: theme.value,\n data: FLEX_STYLE_PROPS_DATA,\n})\n\nconst responsiveClassName = parsedStyleProps.hasResponsiveStyles\n ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n : randomClassName\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassName }))\n\nconst mergedStyle = computed(() => {\n const rootStyle = rootAttrs.value.style \|\| {}\n const inlineStyles = filterProps(parsedStyleProps.inlineStyles)\n return { ...rootStyle, ...inlineStyles }\n})\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 {\n ...others,\n mod: mergedMod,\n ...rootAttrs.value,\n style: mergedStyle.value,\n }\n})\n\nconst queryStyles = {\n styles: parsedStyleProps.styles,\n media: parsedStyleProps.media,\n selector: responsiveClassName,\n}\n\nconst queryStylesString = stylesToString(queryStyles)\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n if (queryStylesString) {\n const newKey = responsiveStyleManager.register(queryStylesString)\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})\n</script>\n"],"mappings":"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"}

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

@@ -378,15 +378,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"type",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Grid",
 			classes: require_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,
@@ -470,6 +472,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			responsiveClassname,
 			rootAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.cjs","names":[],"sources":["../../../src/components/grid/grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container' && breakpoints\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\n <c-box ref=\"_inner\" v-bind=\"innerAttrs\">\n <slot />\n </c-box>\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\n <c-box ref=\"_inner\" v-bind=\"innerAttrs\">\n <slot />\n </c-box>\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, provide, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n isNumberLike,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport { useGridCustomStyle } from './grid-custom'\nimport { DEFAULT_COLUMNS, GRID_CONTEXT_KEY } from './grid.constants'\nimport { GridContextValue } from './grid.context'\nimport type { GridFactory, GridProps } from './grid.types'\nimport classes from './grid.module.css'\nimport { varsResolver } from './grid.utils'\n\ndefineOptions({\n name: 'CGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\nconst _inner = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<GridProps>()\n\nconst props = useComponentProps({\n component: 'CGrid',\n defaultProps: {\n columns: DEFAULT_COLUMNS,\n gap: 'md',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'grow',\n 'gap',\n 'rowGap',\n 'columnGap',\n 'columns',\n 'align',\n 'justify',\n 'breakpoints',\n 'type',\n 'attributes',\n]\n\nconst getStyles = useStyles<GridFactory>({\n name: 'Grid',\n classes,\n props: ~~{ ...props.value, ...attrs } as GridProps~~,\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 responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\n\nconst mergedRootAttrs = 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\nconst innerAttrs = computed(() => getStyles('inner'))\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useGridCustomStyle({\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\nconst _breakpoints = computed(() => props.value.breakpoints)\nconst _columns = computed(() => {\n if (!isNumberLike(props.value.columns)) {\n console.warn(\n `[C-Grid] columns should be number or number-like string, got ${props.value.columns}. Fallback to default columns ${DEFAULT_COLUMNS}.`\n )\n return DEFAULT_COLUMNS\n }\n\n return Number(props.value.columns)\n})\nconst _grow = computed(() => props.value.grow)\nconst _type = computed(() => props.value.type)\n\nconst context: GridContextValue = {\n getStyles,\n get breakpoints() {\n return _breakpoints.value\n },\n get columns() {\n return _columns.value\n },\n get grow() {\n return _grow.value\n },\n get type() {\n return _type.value\n },\n}\n\nprovide(GRID_CONTEXT_KEY, context)\n\ndefineExpose({\n container: computed(() => _container.value?.root ?? null),\n root: computed(() => _root.value?.root ?? null),\n inner: computed(() => _inner.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAsCA~~,MAAM,cAAA,GAAA,IAAA,IAAA,CAAmD,IAAI;EAC7D,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EACxD,MAAM,UAAA,GAAA,IAAA,IAAA,CAA+C,IAAI;EAEzD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,SAAA;IACA,KAAK;GACP;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAAuB;GACvC,MAAM;GACN,SAAA,oBAAA;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,mBAAA;EACF,CAAC;EAED,MAAM,sBAAsB,6BAAA,mBAAmB;EAE/C,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,oBAAoB,CAAC,CAAC;EAEtF,MAAM,mBAAA,GAAA,IAAA,SAAA,OAAiC;GACrC,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,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EAEpD,MAAM,kBAAA,GAAA,IAAA,SAAA,OAAgC,UAAU,WAAW,CAAC;EAE5D,MAAM,YAAY,oBAAA,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,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,MAAM,MAAM,WAAW;EAC3D,MAAM,YAAA,GAAA,IAAA,SAAA,OAA0B;GAC9B,IAAI,CAAC,uBAAA,aAAa,MAAM,MAAM,OAAO,GAAG;IACtC,QAAQ,KACN,gEAAgE,MAAM,MAAM,QAAQ,kCACtF;IACA,OAAA;GACF;GAEA,OAAO,OAAO,MAAM,MAAM,OAAO;EACnC,CAAC;EACD,MAAM,SAAA,GAAA,IAAA,SAAA,OAAuB,MAAM,MAAM,IAAI;EAC7C,MAAM,SAAA,GAAA,IAAA,SAAA,OAAuB,MAAM,MAAM,IAAI;EAE7C,MAAM,UAA4B;GAChC;GACA,IAAI,cAAc;IAChB,OAAO,aAAa;GACtB;GACA,IAAI,UAAU;IACZ,OAAO,SAAS;GAClB;GACA,IAAI,OAAO;IACT,OAAO,MAAM;GACf;GACA,IAAI,OAAO;IACT,OAAO,MAAM;GACf;EACF;EAEA,CAAA,GAAA,IAAA,QAAA,CAAQ,uBAAA,kBAAkB,OAAO;EAEjC,SAAa;GACX,YAAA,GAAA,IAAA,SAAA,OAA0B,WAAW,OAAO,QAAQ,IAAI;GACxD,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;GAC9C,QAAA,GAAA,IAAA,SAAA,OAAsB,OAAO,OAAO,QAAQ,IAAI;EAClD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAzK~~+B,OAAA,SAAI,eAAoB,OAAA,gBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAM9C,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;;EAND,KAAI;IAAgE,OAAA,cAAc,GAAA;kCAK/E,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAJD,KAAI,QAAO,GAAS,OAAA,eAAe,GAAA;mCAGhC,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,SAAQ,GAAS,OAAA,UAAU,GAAA;oCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA;;;;;;uDASJ,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;;EAJD,KAAI;IAAgB,OAAA,eAAe,GAAA;kCAGhC,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,SAAQ,GAAS,OAAA,UAAU,GAAA;mCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"grid.cjs","names":[],"sources":["../../../src/components/grid/grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container' && breakpoints\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\n <c-box ref=\"_inner\" v-bind=\"innerAttrs\">\n <slot />\n </c-box>\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\n <c-box ref=\"_inner\" v-bind=\"innerAttrs\">\n <slot />\n </c-box>\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, provide, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n CStyleProp,\n isNumberLike,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport { useGridCustomStyle } from './grid-custom'\nimport { DEFAULT_COLUMNS, GRID_CONTEXT_KEY } from './grid.constants'\nimport { GridContextValue } from './grid.context'\nimport type { GridFactory, GridProps } from './grid.types'\nimport classes from './grid.module.css'\nimport { varsResolver } from './grid.utils'\n\ndefineOptions({\n name: 'CGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\nconst _inner = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<GridProps>()\n\nconst props = useComponentProps({\n component: 'CGrid',\n defaultProps: {\n columns: DEFAULT_COLUMNS,\n gap: 'md',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'grow',\n 'gap',\n 'rowGap',\n 'columnGap',\n 'columns',\n 'align',\n 'justify',\n 'breakpoints',\n 'type',\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<GridFactory>({\n name: 'Grid',\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 responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\n\nconst mergedRootAttrs = 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\nconst innerAttrs = computed(() => getStyles('inner'))\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useGridCustomStyle({\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\nconst _breakpoints = computed(() => props.value.breakpoints)\nconst _columns = computed(() => {\n if (!isNumberLike(props.value.columns)) {\n console.warn(\n `[C-Grid] columns should be number or number-like string, got ${props.value.columns}. Fallback to default columns ${DEFAULT_COLUMNS}.`\n )\n return DEFAULT_COLUMNS\n }\n\n return Number(props.value.columns)\n})\nconst _grow = computed(() => props.value.grow)\nconst _type = computed(() => props.value.type)\n\nconst context: GridContextValue = {\n getStyles,\n get breakpoints() {\n return _breakpoints.value\n },\n get columns() {\n return _columns.value\n },\n get grow() {\n return _grow.value\n },\n get type() {\n return _type.value\n },\n}\n\nprovide(GRID_CONTEXT_KEY, context)\n\ndefineExpose({\n container: computed(() => _container.value?.root ?? null),\n root: computed(() => _root.value?.root ?? null),\n inner: computed(() => _inner.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/group/group.cjs CHANGED Viewed

@@ -366,15 +366,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		const resolvedGap = require_get_size.getSpacing(props.value.gap);
 		const childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;
 		const stylesCtx = { childWidth };
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Group",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			stylesCtx,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classes: require_group_module.default,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
@@ -412,6 +414,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			resolvedGap,
 			childWidth,
 			stylesCtx,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"group.cjs","names":[],"sources":["../../../src/components/group/group.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :size=\"__size\" :variant=\"variant\">\n <!-- TODO: filter falsy children -->\n <!-- <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key \|\| index\" :is=\"node\" /> -->\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport type { GroupFactory, GroupProps, GroupStylesCtx } from './group.types'\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children'\nimport { getSpacing, useStyles, CBox, useComponentProps } from '../../core'\nimport classes from './group.module.css'\nimport { varsResolver } from './group.utils'\n\ndefineOptions({\n name: 'CGroup',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<GroupProps>()\n\nconst props = useComponentProps({\n component: 'CGroup',\n defaultProps: {\n preventGrowOverflow: true,\n gap: 'md',\n align: 'center',\n justify: 'flex-start',\n wrap: 'wrap',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'gap',\n 'align',\n 'justify',\n 'wrap',\n 'grow',\n 'preventGrowOverflow',\n 'vars',\n 'variant',\n '__size',\n 'mod',\n 'attributes',\n]\n\nconst filteredChildren = filterFalsyChildren(slots.default?.())\nconst childrenCount = filteredChildren.length\nconst resolvedGap = getSpacing(props.value.gap)\nconst childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`\n\nconst stylesCtx: GroupStylesCtx = { childWidth }\n\nconst getStyles = useStyles<GroupFactory>({\n name: 'Group',\n props: ~~{ ...props.value, ...attrs } as GroupProps~~,\n stylesCtx,\n className: props.value.className,\n style: props.value.style,\n classes,\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(() => [{ grow: props.value.grow }])\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 = [\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EACvB,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,qBAAqB;IACrB,KAAK;IACL,OAAO;IACP,SAAS;IACT,MAAM;GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,mBAAmB,8BAAA,oBAAoB,MAAM,UAAU,CAAC;EAC9D,MAAM,gBAAgB,iBAAiB;EACvC,MAAM,cAAc,iBAAA,WAAW,MAAM,MAAM,GAAG;EAC9C,MAAM,aAAa,QAAQ,MAAM,cAAc,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc;EAEtG,MAAM,YAA4B,EAAE,WAAW;EAE/C,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAwB~~;~~GACxC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,SAAA,qBAAA;GACA,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,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC;EAE3D,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,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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAjGS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAJD,KAAI,QAAO,GAAS,OAAA,aAAW;EAAG,MAAM,OAAA;EAAS,SAAS,OAAA;;kCAC3B;+BAApC,+BAAA;+BACA,qGAAA;uBACQ,KAAA,QAAA,SAAA"}
1	+ {"version":3,"file":"group.cjs","names":[],"sources":["../../../src/components/group/group.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :size=\"__size\" :variant=\"variant\">\n <!-- TODO: filter falsy children -->\n <!-- <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key \|\| index\" :is=\"node\" /> -->\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport type { GroupFactory, GroupProps, GroupStylesCtx } from './group.types'\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children'\nimport { getSpacing, useStyles, CBox, useComponentProps, CStyleProp } from '../../core'\nimport classes from './group.module.css'\nimport { varsResolver } from './group.utils'\n\ndefineOptions({\n name: 'CGroup',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<GroupProps>()\n\nconst props = useComponentProps({\n component: 'CGroup',\n defaultProps: {\n preventGrowOverflow: true,\n gap: 'md',\n align: 'center',\n justify: 'flex-start',\n wrap: 'wrap',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'gap',\n 'align',\n 'justify',\n 'wrap',\n 'grow',\n 'preventGrowOverflow',\n 'vars',\n 'variant',\n '__size',\n 'mod',\n 'attributes',\n]\n\nconst filteredChildren = filterFalsyChildren(slots.default?.())\nconst childrenCount = filteredChildren.length\nconst resolvedGap = getSpacing(props.value.gap)\nconst childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`\n\nconst stylesCtx: GroupStylesCtx = { childWidth }\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<GroupFactory>({\n name: 'Group',\n props: styleProps,\n stylesCtx,\n className: () => props.value.className,\n style: () => props.value.style,\n classes,\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(() => [{ grow: props.value.grow }])\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 = [\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":"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"}

package/cjs/components/image/image.cjs CHANGED Viewed

@@ -342,16 +342,18 @@ 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: "Image",
 			classes: require_image_module.default,
-			props: {
-				...props.value,
-				...attrs
-			},
-			className: props.value.className,
+			props: styleProps,
+			className: () => props.value.className,
 			classNames: props.value.classNames,
-			style: props.value.style,
+			style: () => props.value.style,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
 			attributes: props.value.attributes,
@@ -395,6 +397,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			hasError,
 			currentSrc,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"image.cjs","names":[],"sources":["../../../src/components/image/image.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" tag=\"img\" v-bind=\"mergedAttrs\" :src=\"currentSrc\" @error=\"handleError\"></c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, watch } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { ImageFactory, ImageProps } from './image.types'\nimport { varsResolver } from './image.utils'\nimport classes from './image.module.css'\n\ndefineOptions({\n name: 'CImage',\n})\n\nconst emits = defineEmits<{\n error: [event: Event]\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ImageProps>()\n\nconst props = useComponentProps({\n component: 'CImage',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'src',\n 'radius',\n 'fit',\n 'fallbackSrc',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<ImageFactory>({\n name: 'Image',\n classes,\n props: ~~{ ...props.value, ...attrs } as ImageProps~~,\n className: props.value.className,\n classNames: props.value.classNames,\n style: props.value.style,\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 hasError = ref(!props.value.src)\n\nwatch(\n () => props.value.src,\n (newSrc) => {\n hasError.value = !newSrc\n }\n)\n\nconst currentSrc = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return props.value.fallbackSrc\n }\n return props.value.src\n})\n\nconst handleError = (event: Event) => {\n emits('error', event)\n hasError.value = true\n}\n\nconst modList = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return ['fallback']\n }\n return []\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(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAId,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;EACF;EAEA,MAAM,YAAY,mBAAA,UAAwB;GACxC,MAAM;GACN,SAAA,qBAAA;GACA,OAAO;~~IAAE~~,~~GAAG~~,MAAM~~;IAAO~~,~~GAAG;GAAM;GAClC,WAAW,~~MAAM~~,MAAM~~;~~GACvB~~,YAAY,MAAM,MAAM;GACxB,~~OAAO~~,MAAM,MAAM;~~GACnB~~,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,oBAAA;EACF,CAAC;EAED,MAAM,YAAA,GAAA,IAAA,IAAA,CAAe,CAAC,MAAM,MAAM,GAAG;EAErC,CAAA,GAAA,IAAA,MAAA,OACQ,MAAM,MAAM,MACjB,WAAW;GACV,SAAS,QAAQ,CAAC;EACpB,CACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B;GAChC,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,MAAM,MAAM;GAErB,OAAO,MAAM,MAAM;EACrB,CAAC;EAED,MAAM,eAAe,UAAiB;GACpC,MAAM,SAAS,KAAK;GACpB,SAAS,QAAQ;EACnB;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB;GAC7B,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,CAAC,UAAU;GAEpB,OAAO,CAAC;EACV,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,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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA3GkG~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;EAA1F,KAAI;EAAQ,KAAI;IAAc,OAAA,aAAW;EAAG,KAAK,OAAA;EAAa,SAAO,OAAA"}
1	+ {"version":3,"file":"image.cjs","names":[],"sources":["../../../src/components/image/image.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" tag=\"img\" v-bind=\"mergedAttrs\" :src=\"currentSrc\" @error=\"handleError\"></c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, watch } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { ImageFactory, ImageProps } from './image.types'\nimport { varsResolver } from './image.utils'\nimport classes from './image.module.css'\n\ndefineOptions({\n name: 'CImage',\n})\n\nconst emits = defineEmits<{\n error: [event: Event]\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ImageProps>()\n\nconst props = useComponentProps({\n component: 'CImage',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'src',\n 'radius',\n 'fit',\n 'fallbackSrc',\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<ImageFactory>({\n name: 'Image',\n classes,\n props: styleProps,\n className: () => props.value.className,\n classNames: props.value.classNames,\n style: () => props.value.style,\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 hasError = ref(!props.value.src)\n\nwatch(\n () => props.value.src,\n (newSrc) => {\n hasError.value = !newSrc\n }\n)\n\nconst currentSrc = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return props.value.fallbackSrc\n }\n return props.value.src\n})\n\nconst handleError = (event: Event) => {\n emits('error', event)\n hasError.value = true\n}\n\nconst modList = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return ['fallback']\n }\n return []\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(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAId,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;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,SAAA,qBAAA;GACA,OAAO;GACP,iBAAiB,MAAM,MAAM;GAC7B,YAAY,MAAM,MAAM;GACxB,aAAa,MAAM,MAAM;GACzB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,oBAAA;EACF,CAAC;EAED,MAAM,YAAA,GAAA,IAAA,IAAA,CAAe,CAAC,MAAM,MAAM,GAAG;EAErC,CAAA,GAAA,IAAA,MAAA,OACQ,MAAM,MAAM,MACjB,WAAW;GACV,SAAS,QAAQ,CAAC;EACpB,CACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B;GAChC,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,MAAM,MAAM;GAErB,OAAO,MAAM,MAAM;EACrB,CAAC;EAED,MAAM,eAAe,UAAiB;GACpC,MAAM,SAAS,KAAK;GACpB,SAAS,QAAQ;EACnB;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB;GAC7B,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,CAAC,UAAU;GAEpB,OAAO,CAAC;EACV,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAjHkG,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;EAA1F,KAAI;EAAQ,KAAI;IAAc,OAAA,aAAW;EAAG,KAAK,OAAA;EAAa,SAAO,OAAA"}

package/cjs/components/loader/loader.cjs CHANGED Viewed

@@ -346,15 +346,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"loaders",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Loader",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_loader_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,
@@ -393,6 +395,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"loader.cjs","names":[],"sources":["../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot v-if=\"$slots.default\" />\n <component\n v-else\n v-bind=\"componentAttrs\"\n :is=\"props.loaders![props.type!]\"\n :variant=\"variant\"\n :size=\"size\"\n ></component>\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 { LoaderProps } from './loader.types'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\nimport { varsResolver } from './loader.utils'\n\ndefineOptions({\n name: 'CLoader',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<LoaderProps>()\n\nconst props = useComponentProps({\n component: 'CLoader',\n defaultProps: {\n loaders: CDefaultLoaders,\n type: 'oval',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'color',\n 'type',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'loaders',\n 'attributes',\n]\n\nconst getStyles = useStyles<LoaderFactory>({\n name: 'Loader',\n props: ~~{ ...props.value, ...attrs } as LoaderProps~~,\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\nconst componentAttrs = computed(() => {\n const { className, mod, ...rest } = mergedAttrs.value\n return rest\n})\n\ndefineExpose({\n /** @description loader html element /\n root: computed(() => _root.value?.root ?? null),\n /* @description loader size */\n size: props.value.size,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,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;IACZ,SAAS,gBAAA;IACT,MAAM;GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAyB~~;~~GACzC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,sBAAA;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,qBAAA;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,MAAM,kBAAA,GAAA,IAAA,SAAA,OAAgC;GACpC,MAAM,EAAE,WAAW,KAAK,GAAG,SAAS,YAAY;GAChD,OAAO;EACT,CAAC;EAED,SAAa;;GAEX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;;GAE9C,MAAM,MAAM,MAAM;EACpB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;mDAlFS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EATD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCACN,CAAlB,KAAA,OAAO,WAAA,GAAA,IAAA,WAAA,CAAW,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,MAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,EAAA,GAAA,IAAA,wBAAA,CAIvB,OAAA,MAAM,QAAS,OAAA,MAAM,KAAI,IAAA,GAAA,IAAA,WAAA,CAGnB,EAAA,KAAA,EAAA,GAJH,OAAA,gBAAc;GAErB,SAAS,OAAA;GACT,MAAM,OAAA"}
1	+ {"version":3,"file":"loader.cjs","names":[],"sources":["../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot v-if=\"$slots.default\" />\n <component\n v-else\n v-bind=\"componentAttrs\"\n :is=\"props.loaders![props.type!]\"\n :variant=\"variant\"\n :size=\"size\"\n ></component>\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 { LoaderProps } from './loader.types'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\nimport { varsResolver } from './loader.utils'\n\ndefineOptions({\n name: 'CLoader',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<LoaderProps>()\n\nconst props = useComponentProps({\n component: 'CLoader',\n defaultProps: {\n loaders: CDefaultLoaders,\n type: 'oval',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'color',\n 'type',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'loaders',\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<LoaderFactory>({\n name: 'Loader',\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\nconst componentAttrs = computed(() => {\n const { className, mod, ...rest } = mergedAttrs.value\n return rest\n})\n\ndefineExpose({\n /** @description loader html element /\n root: computed(() => _root.value?.root ?? null),\n /* @description loader size */\n size: props.value.size,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,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;IACZ,SAAS,gBAAA;IACT,MAAM;GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;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,UAAyB;GACzC,MAAM;GACN,OAAO;GACP,SAAA,sBAAA;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,qBAAA;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,MAAM,kBAAA,GAAA,IAAA,SAAA,OAAgC;GACpC,MAAM,EAAE,WAAW,KAAK,GAAG,SAAS,YAAY;GAChD,OAAO;EACT,CAAC;EAED,SAAa;;GAEX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;;GAE9C,MAAM,MAAM,MAAM;EACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDAxFS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EATD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCACN,CAAlB,KAAA,OAAO,WAAA,GAAA,IAAA,WAAA,CAAW,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,MAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,EAAA,GAAA,IAAA,wBAAA,CAIvB,OAAA,MAAM,QAAS,OAAA,MAAM,KAAI,IAAA,GAAA,IAAA,WAAA,CAGnB,EAAA,KAAA,EAAA,GAJH,OAAA,gBAAc;GAErB,SAAS,OAAA;GACT,MAAM,OAAA"}

package/cjs/components/paper/paper.cjs CHANGED Viewed

@@ -337,15 +337,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"attributes"
 		];
 		const modList = (0, vue.computed)(() => [{ "data-with-border": props.value.withBorder }]);
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Paper",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_paper_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,
@@ -374,6 +376,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			props,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"paper.cjs","names":[],"sources":["../../../src/components/paper/paper.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 classes from './paper.module.css'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { PaperFactory, PaperProps } from './paper.types'\nimport { varsResolver } from './paper.utils'\n\ndefineOptions({\n name: 'CPaper',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<PaperProps>()\n\nconst props = useComponentProps({\n component: 'CPaper',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'withBorder',\n 'vars',\n 'radius',\n 'shadow',\n 'variant',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-with-border': props.value.withBorder,\n },\n])\n\nconst getStyles = useStyles<PaperFactory>({\n name: 'Paper',\n props: ~~{ ...props.value, ...attrs } as PaperProps~~,\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 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;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;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,oBAAoB,MAAM,MAAM,WAClC,CACF,CAAC;EAED,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,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,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;kCAC9C,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"paper.cjs","names":[],"sources":["../../../src/components/paper/paper.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 classes from './paper.module.css'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { PaperFactory, PaperProps } from './paper.types'\nimport { varsResolver } from './paper.utils'\n\ndefineOptions({\n name: 'CPaper',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<PaperProps>()\n\nconst props = useComponentProps({\n component: 'CPaper',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'withBorder',\n 'vars',\n 'radius',\n 'shadow',\n 'variant',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-with-border': props.value.withBorder,\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<PaperFactory>({\n name: 'Paper',\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 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;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;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,oBAAoB,MAAM,MAAM,WAClC,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,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,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;;;;;;;;;;;;;;;;;;;;;;;;mDAvFS,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/semi-circle-progress/semi-circle-progress.cjs CHANGED Viewed

@@ -373,15 +373,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"labelPosition",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "SemiCircleProgress",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_semi_circle_progress_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,
@@ -442,6 +444,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			coordinateForCircle,
 			radius,