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/esm/components/button/button-group-section/button-group-section.mjs CHANGED Viewed

@@ -338,15 +338,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"autoContrast",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "ButtonGroupSection",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: button_module_default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -377,6 +379,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			sectionAttrs,
 			mergedAttrs,

package/esm/components/button/button-group-section/button-group-section.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-group-section.mjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../../core'\nimport type {\n ButtonGroupSectionFactory,\n ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\nimport { varsResolver } from './button-group-section.utils'\n\ndefineOptions({\n name: 'CButtonGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ButtonGroupSectionProps>()\n\nconst props = useComponentProps({\n component: 'CButtonGroupSection',\n defaultProps: {\n variant: 'default',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'vars',\n 'gradient',\n 'radius',\n 'autoContrast',\n 'attributes',\n]\n\nconst getStyles = useStyles<ButtonGroupSectionFactory>({\n name: 'ButtonGroupSection',\n props: ~~{ ...props.value, ...attrs } as ButtonGroupSectionProps~~,\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 rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\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, ...sectionAttrs.value }\n})\n\ndefineExpose({\n section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,WAAW,IAAsC,IAAI;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,SAAS,UACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~UAAqC~~;~~GACrD~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA;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;GACA,cAAc;EAChB,CAAC;EAED,MAAM,eAAe,eAAe,UAAU,cAAc,CAAC;EAC7D,MAAM,cAAc,eAAe;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,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,SAAS,eAAe,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;qBA7EC~~,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;yBAC/B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"button-group-section.mjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../../core'\nimport type {\n ButtonGroupSectionFactory,\n ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\nimport { varsResolver } from './button-group-section.utils'\n\ndefineOptions({\n name: 'CButtonGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ButtonGroupSectionProps>()\n\nconst props = useComponentProps({\n component: 'CButtonGroupSection',\n defaultProps: {\n variant: 'default',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'vars',\n 'gradient',\n 'radius',\n 'autoContrast',\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<ButtonGroupSectionFactory>({\n name: 'ButtonGroupSection',\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 rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\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, ...sectionAttrs.value }\n})\n\ndefineExpose({\n section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,WAAW,IAAsC,IAAI;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,SAAS,UACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAqC;GACrD,MAAM;GACN,OAAO;GACP,SAAA;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;GACA,cAAc;EAChB,CAAC;EAED,MAAM,eAAe,eAAe,UAAU,cAAc,CAAC;EAC7D,MAAM,cAAc,eAAe;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,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,SAAS,eAAe,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAnFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;yBAC/B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/button/button.mjs CHANGED Viewed

@@ -404,15 +404,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Button",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: button_module_default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -462,6 +464,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/esm/components/button/button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.mjs","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :disabled=\"disabled \|\| loading\"\n :unstyled=\"unstyled\"\n >\n <c-transition\n v-if=\"typeof props.loading === 'boolean'\"\n :mounted=\"props.loading\"\n :transition=\"loaderTransition\"\n :duration=\"150\"\n >\n <template #default=\"{ styles }\">\n <c-box\n ref=\"_inner\"\n tag=\"span\"\n v-bind=\"getStyles('loader', { style: styles })\"\n aria-hidden=\"true\"\n >\n <c-loader\n color=\"var(--button-color)\"\n size=\"calc(var(--button-height) / 1.8)\"\n v-bind=\"props.loaderProps\"\n ></c-loader>\n </c-box>\n </template>\n </c-transition>\n\n <c-box tag=\"span\" v-bind=\"innerAttrs\">\n <c-box\n v-if=\"$slots['left-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'left' }\"\n >\n <slot name=\"left-section\"></slot>\n </c-box>\n <c-box v-else-if=\"leftSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'left' }\">\n <!-- TODO -->\n <component :is=\"leftSection\" />\n </c-box>\n <c-box ref=\"_label\" v-bind=\"labelAttrs\" tag=\"span\" :mod=\"{ loading }\">\n <slot />\n </c-box>\n <c-box\n v-if=\"$slots['right-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'right' }\"\n >\n <slot name=\"right-section\"></slot>\n </c-box>\n <c-box v-else-if=\"rightSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'right' }\">\n <!-- TODO -->\n <component :is=\"rightSection\" />\n </c-box>\n </c-box>\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, rem, useComponentProps, useStyles } from '../../core'\nimport { UnstyledButton } from '../unstyled-button'\nimport { ButtonFactory, type ButtonProps } from './button.types'\nimport { varsResolver } from './button.utils'\nimport classes from './button.module.css'\nimport { CLoader } from '../loader'\nimport { CTransition, CckTransition } from '../transition'\n\ndefineOptions({\n name: 'CButton',\n})\n\ndefineSlots<{\n 'left-section': any\n 'right-section': any\n default: any\n}>()\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\nconst _inner = ref<HTMLSpanElement \| null>(null)\nconst _label = ref<HTMLSpanElement \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst hasLeftSlot = computed(() => !!slots['left-section'])\nconst hasRightSlot = computed(() => !!slots['right-section'])\n\nconst loaderTransition: CckTransition = {\n in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n common: { transformOrigin: 'center' },\n transitionProperty: 'transform, opacity',\n}\n\nconst rawProps = defineProps<ButtonProps>()\n\nconst props = useComponentProps({\n component: 'CButton',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'style',\n 'vars',\n 'className',\n 'color',\n 'disabled',\n 'leftSection',\n 'rightSection',\n 'fullWidth',\n 'radius',\n 'loading',\n 'loaderProps',\n 'gradient',\n 'classNames',\n 'styles',\n 'unstyled',\n 'dataDisabled',\n 'autoContrast',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<ButtonFactory>({\n name: 'Button',\n props: ~~{ ...props.value, ...attrs } as ButtonProps~~,\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 modList = computed(() => [\n {\n disabled: props.value.disabled \|\| props.value.dataDisabled,\n },\n { loading: props.value.loading },\n { block: props.value.fullWidth },\n { 'with-left-section': hasLeftSlot.value \|\| !!props.value.leftSection },\n { 'with-right-section': hasRightSlot.value \|\| !!props.value.rightSection },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n })\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 = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst innerAttrs = computed(() => getStyles('inner'))\nconst sectionAttrs = computed(() => getStyles('section'))\nconst labelAttrs = computed(() => getStyles('label'))\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n inner: _inner.value,\n label: _label.value,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFA,MAAM,QAAQ,IAAgD,IAAI;EAClE,MAAM,SAAS,IAA4B,IAAI;EAC/C,MAAM,SAAS,IAA4B,IAAI;EAE/C,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,cAAc,eAAe,CAAC,CAAC,MAAM,eAAe;EAC1D,MAAM,eAAe,eAAe,CAAC,CAAC,MAAM,gBAAgB;EAE5D,MAAM,mBAAkC;GACtC,IAAI;IAAE,SAAS;IAAG,WAAW,+BAA+B,IAAI,CAAC,EAAE;GAAI;GACvE,KAAK;IAAE,SAAS;IAAG,WAAW;GAAyB;GACvD,QAAQ,EAAE,iBAAiB,SAAS;GACpC,oBAAoB;EACtB;EAEA,MAAM,WAAW;EAEjB,MAAM,QAAQ,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;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~UAAyB~~;~~GACzC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA;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;EACF,CAAC;EAED,MAAM,UAAU,eAAe;GAC7B,EACE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAChD;GACA,EAAE,SAAS,MAAM,MAAM,QAAQ;GAC/B,EAAE,OAAO,MAAM,MAAM,UAAU;GAC/B,EAAE,qBAAqB,YAAY,SAAS,CAAC,CAAC,MAAM,MAAM,YAAY;GACtE,EAAE,sBAAsB,aAAa,SAAS,CAAC,CAAC,MAAM,MAAM,aAAa;EAC3E,CAAC;EAED,MAAM,YAAY,eAChB,UAAU,QAAQ,EAChB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAAW,CAAC,MAAM,MAAM,aACxE,CAAC,CACH;EACA,MAAM,kBAAkB,eAAe;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,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,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EACpD,MAAM,eAAe,eAAe,UAAU,SAAS,CAAC;EACxD,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EAEpD,SAAa;GACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI;GAC9C,OAAO,OAAO;GACd,OAAO,OAAO;EAChB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBApLC~~,YAyDkB,OAAA,mBAzDlB,WAyDkB,EAxDhB,KAAI,QAAO,GACH,OAAA,iBAAe;EACtB,UAAU,OAAA,YAAY,OAAA;EACtB,UAAU,OAAA;;yBAsBI,CAAA,OAnBA,OAAA,MAAM,YAAO,aAAA,UAAA,GAD5B,YAoBe,OAAA,gBAAA;;GAlBZ,SAAS,OAAA,MAAM;GACf,YAAY,OAAA;GACZ,UAAU;;GAEA,SAAO,SAYR,EAZY,aAAM,CAC1B,YAWQ,OAAA,SAXR,WAWQ;IAVN,KAAI;IACJ,KAAI;MACI,OAAA,UAAS,UAAA,EAAA,OAAoB,OAAM,CAAA,GAAA,EAC3C,eAAY,OAAM,CAAA,GAAA;2BAMN,CAJZ,YAIY,OAAA,YAJZ,WAIY;KAHV,OAAM;KACN,MAAK;OACG,OAAA,MAAM,WAAW,GAAA,MAAA,EAAA,CAAA,CAAA;;;;0DAMjC,YA4BQ,OAAA,SA5BR,WA4BQ,EA5BD,KAAI,OAAM,GAAS,OAAA,UAAU,GAAA;0BAQ1B;IANA,KAAA,OAAM,mBAAA,UAAA,GADd,YAOQ,OAAA,SAPR,WAOQ,EAAA,KAAA,EAAA,GALE,OAAA,cAAY;KACpB,KAAI;KACH,KAAK,EAAA,UAAA,OAAA;;4BAE2B,CAAjC,WAAiC,KAAA,QAAA,cAAA,CAAA,CAAA;;cAEjB,OAAA,eAAA,UAAA,GAAlB,YAGQ,OAAA,SAHR,WAGQ,EAAA,KAAA,EAAA,GAH+B,OAAA,cAAY;KAAE,KAAI;KAAQ,KAAK,EAAA,UAAA,OAAA;;4BACvD,CAAb,mBAAA,QAAA,IAAA,UAAA,GACA,YAA+B,wBAAf,OAAA,WAAW,CAAA,EAAA,CAAA;;;IAE7B,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,SAAQ,GAAS,OAAA,YAAU;KAAE,KAAI;KAAQ,KAAG,EAAA,SAAI,OAAA,QAAO;;4BACxD,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;;IAGF,KAAA,OAAM,oBAAA,UAAA,GADd,YAOQ,OAAA,SAPR,WAOQ,EAAA,KAAA,EAAA,GALE,OAAA,cAAY;KACpB,KAAI;KACH,KAAK,EAAA,UAAA,QAAA;;4BAE4B,CAAlC,WAAkC,KAAA,QAAA,eAAA,CAAA,CAAA;;cAElB,OAAA,gBAAA,UAAA,GAAlB,YAGQ,OAAA,SAHR,WAGQ,EAAA,KAAA,EAAA,GAHgC,OAAA,cAAY;KAAE,KAAI;KAAQ,KAAK,EAAA,UAAA,QAAA;;4BACxD,CAAb,mBAAA,QAAA,IAAA,UAAA,GACA,YAAgC,wBAAhB,OAAA,YAAY,CAAA,EAAA,CAAA"}
1	+ {"version":3,"file":"button.mjs","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :disabled=\"disabled \|\| loading\"\n :unstyled=\"unstyled\"\n >\n <c-transition\n v-if=\"typeof props.loading === 'boolean'\"\n :mounted=\"props.loading\"\n :transition=\"loaderTransition\"\n :duration=\"150\"\n >\n <template #default=\"{ styles }\">\n <c-box\n ref=\"_inner\"\n tag=\"span\"\n v-bind=\"getStyles('loader', { style: styles })\"\n aria-hidden=\"true\"\n >\n <c-loader\n color=\"var(--button-color)\"\n size=\"calc(var(--button-height) / 1.8)\"\n v-bind=\"props.loaderProps\"\n ></c-loader>\n </c-box>\n </template>\n </c-transition>\n\n <c-box tag=\"span\" v-bind=\"innerAttrs\">\n <c-box\n v-if=\"$slots['left-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'left' }\"\n >\n <slot name=\"left-section\"></slot>\n </c-box>\n <c-box v-else-if=\"leftSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'left' }\">\n <!-- TODO -->\n <component :is=\"leftSection\" />\n </c-box>\n <c-box ref=\"_label\" v-bind=\"labelAttrs\" tag=\"span\" :mod=\"{ loading }\">\n <slot />\n </c-box>\n <c-box\n v-if=\"$slots['right-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'right' }\"\n >\n <slot name=\"right-section\"></slot>\n </c-box>\n <c-box v-else-if=\"rightSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'right' }\">\n <!-- TODO -->\n <component :is=\"rightSection\" />\n </c-box>\n </c-box>\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, CStyleProp, rem, useComponentProps, useStyles } from '../../core'\nimport { UnstyledButton } from '../unstyled-button'\nimport { ButtonFactory, type ButtonProps } from './button.types'\nimport { varsResolver } from './button.utils'\nimport classes from './button.module.css'\nimport { CLoader } from '../loader'\nimport { CTransition, CckTransition } from '../transition'\n\ndefineOptions({\n name: 'CButton',\n})\n\ndefineSlots<{\n 'left-section': any\n 'right-section': any\n default: any\n}>()\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\nconst _inner = ref<HTMLSpanElement \| null>(null)\nconst _label = ref<HTMLSpanElement \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst hasLeftSlot = computed(() => !!slots['left-section'])\nconst hasRightSlot = computed(() => !!slots['right-section'])\n\nconst loaderTransition: CckTransition = {\n in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n common: { transformOrigin: 'center' },\n transitionProperty: 'transform, opacity',\n}\n\nconst rawProps = defineProps<ButtonProps>()\n\nconst props = useComponentProps({\n component: 'CButton',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'style',\n 'vars',\n 'className',\n 'color',\n 'disabled',\n 'leftSection',\n 'rightSection',\n 'fullWidth',\n 'radius',\n 'loading',\n 'loaderProps',\n 'gradient',\n 'classNames',\n 'styles',\n 'unstyled',\n 'dataDisabled',\n 'autoContrast',\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<ButtonFactory>({\n name: 'Button',\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 modList = computed(() => [\n {\n disabled: props.value.disabled \|\| props.value.dataDisabled,\n },\n { loading: props.value.loading },\n { block: props.value.fullWidth },\n { 'with-left-section': hasLeftSlot.value \|\| !!props.value.leftSection },\n { 'with-right-section': hasRightSlot.value \|\| !!props.value.rightSection },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n })\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 = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst innerAttrs = computed(() => getStyles('inner'))\nconst sectionAttrs = computed(() => getStyles('section'))\nconst labelAttrs = computed(() => getStyles('label'))\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n inner: _inner.value,\n label: _label.value,\n})\n</script>\n"],"mappings":"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"}

package/esm/components/center/center.mjs CHANGED Viewed

@@ -324,15 +324,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Center",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: center_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,
@@ -362,6 +364,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/esm/components/center/center.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"center.mjs","names":[],"sources":["../../../src/components/center/center.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, ref, useAttrs } from 'vue'\nimport { CenterFactory, CenterProps } from './center.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './center.module.css'\n\ndefineOptions({\n name: 'CCenter',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<CenterProps>()\n\nconst props = useComponentProps({\n component: 'CCenter',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'inline',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<CenterFactory>({\n name: 'Center',\n props: ~~{ ...props.value, ...attrs } as CenterProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n})\n\nconst modList = computed(() => [{ inline: props.value.inline }])\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~UAAyB~~;~~GACzC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;EACpB,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC;EAE/D,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;qBA1EC~~,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"center.mjs","names":[],"sources":["../../../src/components/center/center.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, ref, useAttrs } from 'vue'\nimport { CenterFactory, CenterProps } from './center.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './center.module.css'\n\ndefineOptions({\n name: 'CCenter',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<CenterProps>()\n\nconst props = useComponentProps({\n component: 'CCenter',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'inline',\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<CenterFactory>({\n name: 'Center',\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n})\n\nconst modList = computed(() => [{ inline: props.value.inline }])\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAyB;GACzC,MAAM;GACN,OAAO;GACP,SAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;EACpB,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC;EAE/D,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBAhFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/close-button/close-button.mjs CHANGED Viewed

@@ -356,16 +356,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"attributes",
 			"__staticSelector"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: props.value.__staticSelector || "CloseButton",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: close_button_module_default,
-			className: props.value.className,
+			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,
@@ -397,6 +399,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/esm/components/close-button/close-button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"close-button.mjs","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,QAAQ,IAAgD,IAAI;EAElE,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,SAAS,SACX;EAEA,MAAM,QAAQ,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,UAA8B;GAC9C,MAAM,MAAM,MAAM,oBAAoB;GACtC,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA;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;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAC7B,EACE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAChD,CACF,CAAC;EAED,MAAM,YAAY,eAChB,UAAU,QAAQ;GAChB,SAAS,MAAM,MAAM;GACrB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;EAChD,CAAC,CACH;EAEA,MAAM,cAAc,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;qBA9GC~~,YAWkB,OAAA,mBAXlB,WAWkB,EAVhB,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,UAAU,OAAA,MAAM,YAAY,OAAA,MAAM;EAClC,UAAU,OAAA,MAAM;EAChB,SAAS,OAAA,MAAM;;yBAIT,CAFP,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,CADL,YAAyB,OAAA,YAAA,CAAA,CAAA,GAE3B,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"close-button.mjs","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,QAAQ,IAAgD,IAAI;EAElE,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,SAAS,SACX;EAEA,MAAM,QAAQ,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,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAA8B;GAC9C,MAAM,MAAM,MAAM,oBAAoB;GACtC,OAAO;GACP,SAAA;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;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAC7B,EACE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAChD,CACF,CAAC;EAED,MAAM,YAAY,eAChB,UAAU,QAAQ;GAChB,SAAS,MAAM,MAAM;GACrB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;EAChD,CAAC,CACH;EAEA,MAAM,cAAc,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;qBApHC,YAWkB,OAAA,mBAXlB,WAWkB,EAVhB,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,UAAU,OAAA,MAAM,YAAY,OAAA,MAAM;EAClC,UAAU,OAAA,MAAM;EAChB,SAAS,OAAA,MAAM;;yBAIT,CAFP,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,CADL,YAAyB,OAAA,YAAA,CAAA,CAAA,GAE3B,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/container/container.mjs CHANGED Viewed

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

package/esm/components/container/container.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"container.mjs","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,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,UAAU,QACZ;EAEA,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,UAAU,eAAe,CAAC;GAAE,OAAO,MAAM,MAAM;GAAO,UAAU,MAAM,MAAM;EAAS,CAAC,CAAC;EAE7F,MAAM,YAAY,UAA4B;GAC5C,MAAM;GACN,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA;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;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,kBAAkB,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;qBAjFC~~,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,eAAe,GAAA;yBAChC,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"container.mjs","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,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,UAAU,QACZ;EAEA,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,UAAU,eAAe,CAAC;GAAE,OAAO,MAAM,MAAM;GAAO,UAAU,MAAM,MAAM;EAAS,CAAC,CAAC;EAE7F,MAAM,YAAY,UAA4B;GAC5C,MAAM;GACN,OAAO;GACP,SAAA;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;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,kBAAkB,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;qBAvFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,eAAe,GAAA;yBAChC,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/empty-state/empty-state.mjs CHANGED Viewed

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

package/esm/components/empty-state/empty-state.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.mjs","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,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe;GACnB,MAAM;GACN,OAAO;EACT;EAEA,MAAM,QAAQ,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,UAAU,eAAe,CAC7B,EACE,OAAO,MAAM,MAAM,MACrB,CACF,CAAC;EAED,MAAM,YAAY,UAA6B;GAC7C,MAAM;GACN,SAAA;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;EACF,CAAC;EAED,MAAM,0BAA0B,eACxB,MAAM,MAAM,2BAA2B,CAAC,CAAC,MAAM,MAAM,OAC7D;EAEA,yBAAyB;GACvB;GACA;EACF,CAAC;EAED,MAAM,iBAAiB,eAAe;GACpC,OAAO,CAAC,EAAE,MAAM,WAAW,MAAM,WAAW,MAAM,eAAe,MAAM;EACzE,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EACpF,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,kBAAkB,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAnIC~~,YAgBQ,OAAA,SAhBR,WAgBQ,EAhBD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;yBAGlC,CAFK,KAAA,OAAO,QAAA,UAAA,GAApC,YAEwB,OAAA,wBAAA,EAAA,KAAA,EAAA,GAAA;0BADF,CAApB,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA;;0CAET,OAAA,kBAAA,UAAA,GAAb,YAWQ,OAAA,SAAA,eAAA,WAAA,EAAA,KAAA,EAAA,GAX6B,OAAA,SAAS,CAAA,GAAA;0BAGxB;IAFK,KAAA,OAAO,SAAA,UAAA,GAAhC,YAEoB,OAAA,oBAAA;;KAFoB,OAAO,OAAA,MAAM;;4BAC9B,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;;IAEQ,KAAA,OAAO,eAAA,UAAA,GAAtC,YAE0B,OAAA,0BAAA,EAAA,KAAA,EAAA,GAAA;4BADG,CAA3B,WAA2B,KAAA,QAAA,aAAA,CAAA,CAAA;;;IAE7B,WAAQ,KAAA,QAAA,SAAA;IACmB,KAAA,OAAO,WAAA,UAAA,GAAlC,YAEsB,OAAA,sBAAA,EAAA,KAAA,EAAA,GAAA;4BADG,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"empty-state.mjs","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/esm/components/flex/flex.mjs CHANGED Viewed

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

package/esm/components/flex/flex.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"flex.mjs","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,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,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,UAAuB;GACvC,MAAM;GACN,SAAA;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,YAAY;EAC1B,MAAM,kBAAkB,mBAAmB;EAE3C,MAAM,mBAAmB,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;EACR,CAAC;EAED,MAAM,sBAAsB,iBAAiB,sBACzC,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;EAEJ,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,WAAW,oBAAoB,CAAC,CAAC;EAEtF,MAAM,cAAc,eAAe;GACjC,MAAM,YAAY,UAAU,MAAM,SAAS,CAAC;GAC5C,MAAM,eAAe,YAAY,iBAAiB,YAAY;GAC9D,OAAO;IAAE,GAAG;IAAW,GAAG;GAAa;EACzC,CAAC;EAED,MAAM,cAAc,eAAe;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,eAAe,WAAW;EAEpD,MAAM,kBAAkB,IAAmB,IAAI;EAC/C,kBAAkB;GAChB,IAAI,mBAAmB;IACrB,MAAM,SAAS,uBAAuB,SAAS,iBAAiB;IAChE,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,kBAAkB;GAChB,IAAI,gBAAgB,OAClB,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAjJC~~,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"flex.mjs","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/esm/components/grid/grid.mjs CHANGED Viewed

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

package/esm/components/grid/grid.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.mjs","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,aAAa,IAAsC,IAAI;EAC7D,MAAM,QAAQ,IAAsC,IAAI;EACxD,MAAM,SAAS,IAAsC,IAAI;EAEzD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,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,UAAuB;GACvC,MAAM;GACN,SAAA;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;EACF,CAAC;EAED,MAAM,sBAAsB,mBAAmB;EAE/C,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,WAAW,oBAAoB,CAAC,CAAC;EAEtF,MAAM,kBAAkB,eAAe;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,aAAa,eAAe,UAAU,OAAO,CAAC;EAEpD,MAAM,iBAAiB,eAAe,UAAU,WAAW,CAAC;EAE5D,MAAM,YAAY,mBAAmB;GACnC,UAAU;GACV,GAAG,MAAM;EACX,CAAC;EAED,MAAM,kBAAkB,IAAmB,IAAI;EAC/C,kBAAkB;GAChB,MAAM,UAAU,UAAU,MAAM;GAChC,IAAI,SAAS;IACX,MAAM,SAAS,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,kBAAkB;GAChB,IAAI,gBAAgB,OAClB,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;EAED,MAAM,eAAe,eAAe,MAAM,MAAM,WAAW;EAC3D,MAAM,WAAW,eAAe;GAC9B,IAAI,CAAC,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,QAAQ,eAAe,MAAM,MAAM,IAAI;EAC7C,MAAM,QAAQ,eAAe,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,QAAQ,kBAAkB,OAAO;EAEjC,SAAa;GACX,WAAW,eAAe,WAAW,OAAO,QAAQ,IAAI;GACxD,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI;GAC9C,OAAO,eAAe,OAAO,OAAO,QAAQ,IAAI;EAClD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAzK~~+B,OAAA,SAAI,eAAoB,OAAA,eAAA,UAAA,GAAtD,YAMQ,OAAA,SANR,WAMQ;;EAND,KAAI;IAAgE,OAAA,cAAc,GAAA;yBAK/E,CAJR,YAIQ,OAAA,SAJR,WAIQ,EAJD,KAAI,QAAO,GAAS,OAAA,eAAe,GAAA;0BAGhC,CAFR,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,SAAQ,GAAS,OAAA,UAAU,GAAA;2BAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;;;;;yBAKZ,YAIQ,OAAA,SAJR,WAIQ;;EAJD,KAAI;IAAgB,OAAA,eAAe,GAAA;yBAGhC,CAFR,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,SAAQ,GAAS,OAAA,UAAU,GAAA;0BAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"grid.mjs","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/esm/components/group/group.mjs CHANGED Viewed

@@ -366,15 +366,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const resolvedGap = getSpacing(props.value.gap);
 		const childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;
 		const stylesCtx = { childWidth };
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = 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: group_module_default,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
@@ -412,6 +414,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			resolvedGap,
 			childWidth,
 			stylesCtx,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/esm/components/group/group.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"group.mjs","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,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,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,oBAAoB,MAAM,UAAU,CAAC;EAC9D,MAAM,gBAAgB,iBAAiB;EACvC,MAAM,cAAc,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~~,~~UAAwB~~;~~GACxC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,SAAA;GACA,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC;EAE3D,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBArGC~~,YAIQ,OAAA,SAJR,WAIQ,EAJD,KAAI,QAAO,GAAS,OAAA,aAAW;EAAG,MAAM,OAAA;EAAS,SAAS,OAAA;;yBAC3B;GAApC,mBAAA,+BAAA;GACA,mBAAA,qGAAA;GACA,WAAQ,KAAA,QAAA,SAAA"}
1	+ {"version":3,"file":"group.mjs","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,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,oBAAoB,MAAM,UAAU,CAAC;EAC9D,MAAM,gBAAgB,iBAAiB;EACvC,MAAM,cAAc,WAAW,MAAM,MAAM,GAAG;EAC9C,MAAM,aAAa,QAAQ,MAAM,cAAc,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc;EAEtG,MAAM,YAA4B,EAAE,WAAW;EAE/C,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN,OAAO;GACP;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,SAAA;GACA,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC;EAE3D,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA3GC,YAIQ,OAAA,SAJR,WAIQ,EAJD,KAAI,QAAO,GAAS,OAAA,aAAW;EAAG,MAAM,OAAA;EAAS,SAAS,OAAA;;yBAC3B;GAApC,mBAAA,+BAAA;GACA,mBAAA,qGAAA;GACA,WAAQ,KAAA,QAAA,SAAA"}

package/esm/components/image/image.mjs CHANGED Viewed

@@ -342,16 +342,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Image",
 			classes: 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__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			hasError,
 			currentSrc,