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/image/image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.mjs","names":[],"sources":["../../../src/components/image/image.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" tag=\"img\" v-bind=\"mergedAttrs\" :src=\"currentSrc\" @error=\"handleError\"></c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, watch } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { ImageFactory, ImageProps } from './image.types'\nimport { varsResolver } from './image.utils'\nimport classes from './image.module.css'\n\ndefineOptions({\n name: 'CImage',\n})\n\nconst emits = defineEmits<{\n error: [event: Event]\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ImageProps>()\n\nconst props = useComponentProps({\n component: 'CImage',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'src',\n 'radius',\n 'fit',\n 'fallbackSrc',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<ImageFactory>({\n name: 'Image',\n classes,\n props: ~~{ ...props.value, ...attrs } as ImageProps~~,\n className: props.value.className,\n classNames: props.value.classNames,\n style: props.value.style,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst hasError = ref(!props.value.src)\n\nwatch(\n () => props.value.src,\n (newSrc) => {\n hasError.value = !newSrc\n }\n)\n\nconst currentSrc = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return props.value.fallbackSrc\n }\n return props.value.src\n})\n\nconst handleError = (event: Event) => {\n emits('error', event)\n hasError.value = true\n}\n\nconst modList = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return ['fallback']\n }\n return []\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAId,MAAM,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;EACF;EAEA,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN,SAAA;GACA,OAAO;~~IAAE~~,~~GAAG~~,MAAM~~;IAAO~~,~~GAAG;GAAM;GAClC,WAAW,~~MAAM~~,MAAM~~;~~GACvB~~,YAAY,MAAM,MAAM;GACxB,~~OAAO~~,MAAM,MAAM;~~GACnB~~,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,WAAW,IAAI,CAAC,MAAM,MAAM,GAAG;EAErC,YACQ,MAAM,MAAM,MACjB,WAAW;GACV,SAAS,QAAQ,CAAC;EACpB,CACF;EAEA,MAAM,aAAa,eAAe;GAChC,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,MAAM,MAAM;GAErB,OAAO,MAAM,MAAM;EACrB,CAAC;EAED,MAAM,eAAe,UAAiB;GACpC,MAAM,SAAS,KAAK;GACpB,SAAS,QAAQ;EACnB;EAEA,MAAM,UAAU,eAAe;GAC7B,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,CAAC,UAAU;GAEpB,OAAO,CAAC;EACV,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA3GC~~,YAAiG,OAAA,SAAjG,WAAiG;EAA1F,KAAI;EAAQ,KAAI;IAAc,OAAA,aAAW;EAAG,KAAK,OAAA;EAAa,SAAO,OAAA"}
1	+ {"version":3,"file":"image.mjs","names":[],"sources":["../../../src/components/image/image.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" tag=\"img\" v-bind=\"mergedAttrs\" :src=\"currentSrc\" @error=\"handleError\"></c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, watch } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { ImageFactory, ImageProps } from './image.types'\nimport { varsResolver } from './image.utils'\nimport classes from './image.module.css'\n\ndefineOptions({\n name: 'CImage',\n})\n\nconst emits = defineEmits<{\n error: [event: Event]\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ImageProps>()\n\nconst props = useComponentProps({\n component: 'CImage',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'src',\n 'radius',\n 'fit',\n 'fallbackSrc',\n 'mod',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<ImageFactory>({\n name: 'Image',\n classes,\n props: styleProps,\n className: () => props.value.className,\n classNames: props.value.classNames,\n style: () => props.value.style,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst hasError = ref(!props.value.src)\n\nwatch(\n () => props.value.src,\n (newSrc) => {\n hasError.value = !newSrc\n }\n)\n\nconst currentSrc = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return props.value.fallbackSrc\n }\n return props.value.src\n})\n\nconst handleError = (event: Event) => {\n emits('error', event)\n hasError.value = true\n}\n\nconst modList = computed(() => {\n if (hasError.value && props.value.fallbackSrc) {\n return ['fallback']\n }\n return []\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAId,MAAM,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;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN,SAAA;GACA,OAAO;GACP,iBAAiB,MAAM,MAAM;GAC7B,YAAY,MAAM,MAAM;GACxB,aAAa,MAAM,MAAM;GACzB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,WAAW,IAAI,CAAC,MAAM,MAAM,GAAG;EAErC,YACQ,MAAM,MAAM,MACjB,WAAW;GACV,SAAS,QAAQ,CAAC;EACpB,CACF;EAEA,MAAM,aAAa,eAAe;GAChC,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,MAAM,MAAM;GAErB,OAAO,MAAM,MAAM;EACrB,CAAC;EAED,MAAM,eAAe,UAAiB;GACpC,MAAM,SAAS,KAAK;GACpB,SAAS,QAAQ;EACnB;EAEA,MAAM,UAAU,eAAe;GAC7B,IAAI,SAAS,SAAS,MAAM,MAAM,aAChC,OAAO,CAAC,UAAU;GAEpB,OAAO,CAAC;EACV,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAjHC,YAAiG,OAAA,SAAjG,WAAiG;EAA1F,KAAI;EAAQ,KAAI;IAAc,OAAA,aAAW;EAAG,KAAK,OAAA;EAAa,SAAO,OAAA"}

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

@@ -346,15 +346,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"loaders",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Loader",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: loader_module_default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -393,6 +395,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"loader.mjs","names":[],"sources":["../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot v-if=\"$slots.default\" />\n <component\n v-else\n v-bind=\"componentAttrs\"\n :is=\"props.loaders![props.type!]\"\n :variant=\"variant\"\n :size=\"size\"\n ></component>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport type { LoaderProps } from './loader.types'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\nimport { varsResolver } from './loader.utils'\n\ndefineOptions({\n name: 'CLoader',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<LoaderProps>()\n\nconst props = useComponentProps({\n component: 'CLoader',\n defaultProps: {\n loaders: CDefaultLoaders,\n type: 'oval',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'color',\n 'type',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'loaders',\n 'attributes',\n]\n\nconst getStyles = useStyles<LoaderFactory>({\n name: 'Loader',\n props: ~~{ ...props.value, ...attrs } as LoaderProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst componentAttrs = computed(() => {\n const { className, mod, ...rest } = mergedAttrs.value\n return rest\n})\n\ndefineExpose({\n /** @description loader html element /\n root: computed(() => _root.value?.root ?? null),\n /* @description loader size */\n size: props.value.size,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,SAAS;IACT,MAAM;GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;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,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,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,iBAAiB,eAAe;GACpC,MAAM,EAAE,WAAW,KAAK,GAAG,SAAS,YAAY;GAChD,OAAO;EACT,CAAC;EAED,SAAa;;GAEX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI;;GAE9C,MAAM,MAAM,MAAM;EACpB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;qBA3FC~~,YASQ,OAAA,SATR,WASQ,EATD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBACN,CAAlB,KAAA,OAAO,UAAnB,WAA8B,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,KAAA,UAAA,GAC9B,YAMa,wBAHN,OAAA,MAAM,QAAS,OAAA,MAAM,KAAI,GAHhC,WAMa,EAAA,KAAA,EAAA,GAJH,OAAA,gBAAc;GAErB,SAAS,OAAA;GACT,MAAM,OAAA"}
1	+ {"version":3,"file":"loader.mjs","names":[],"sources":["../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot v-if=\"$slots.default\" />\n <component\n v-else\n v-bind=\"componentAttrs\"\n :is=\"props.loaders![props.type!]\"\n :variant=\"variant\"\n :size=\"size\"\n ></component>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport type { LoaderProps } from './loader.types'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\nimport { varsResolver } from './loader.utils'\n\ndefineOptions({\n name: 'CLoader',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<LoaderProps>()\n\nconst props = useComponentProps({\n component: 'CLoader',\n defaultProps: {\n loaders: CDefaultLoaders,\n type: 'oval',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'color',\n 'type',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'loaders',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<LoaderFactory>({\n name: 'Loader',\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst componentAttrs = computed(() => {\n const { className, mod, ...rest } = mergedAttrs.value\n return rest\n})\n\ndefineExpose({\n /** @description loader html element /\n root: computed(() => _root.value?.root ?? null),\n /* @description loader size */\n size: props.value.size,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,SAAS;IACT,MAAM;GACR;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,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;GAClB;EACF,CAAC;EAED,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,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,iBAAiB,eAAe;GACpC,MAAM,EAAE,WAAW,KAAK,GAAG,SAAS,YAAY;GAChD,OAAO;EACT,CAAC;EAED,SAAa;;GAEX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI;;GAE9C,MAAM,MAAM,MAAM;EACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBAjGC,YASQ,OAAA,SATR,WASQ,EATD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBACN,CAAlB,KAAA,OAAO,UAAnB,WAA8B,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,KAAA,UAAA,GAC9B,YAMa,wBAHN,OAAA,MAAM,QAAS,OAAA,MAAM,KAAI,GAHhC,WAMa,EAAA,KAAA,EAAA,GAJH,OAAA,gBAAc;GAErB,SAAS,OAAA;GACT,MAAM,OAAA"}

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

@@ -337,15 +337,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"attributes"
 		];
 		const modList = computed(() => [{ "data-with-border": props.value.withBorder }]);
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Paper",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: paper_module_default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -374,6 +376,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			props,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"paper.mjs","names":[],"sources":["../../../src/components/paper/paper.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport classes from './paper.module.css'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { PaperFactory, PaperProps } from './paper.types'\nimport { varsResolver } from './paper.utils'\n\ndefineOptions({\n name: 'CPaper',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<PaperProps>()\n\nconst props = useComponentProps({\n component: 'CPaper',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'withBorder',\n 'vars',\n 'radius',\n 'shadow',\n 'variant',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-with-border': props.value.withBorder,\n },\n])\n\nconst getStyles = useStyles<PaperFactory>({\n name: 'Paper',\n props: ~~{ ...props.value, ...attrs } as PaperProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,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;EACF;EAEA,MAAM,UAAU,eAAe,CAC7B,EACE,oBAAoB,MAAM,MAAM,WAClC,CACF,CAAC;EAED,MAAM,~~YAAY~~,~~UAAwB~~;~~GACxC~~,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,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~~;;;;;;;;;;;;;;;;;;;;;;;qBAnFC~~,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;yBAC9C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"paper.mjs","names":[],"sources":["../../../src/components/paper/paper.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport classes from './paper.module.css'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { PaperFactory, PaperProps } from './paper.types'\nimport { varsResolver } from './paper.utils'\n\ndefineOptions({\n name: 'CPaper',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<PaperProps>()\n\nconst props = useComponentProps({\n component: 'CPaper',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'withBorder',\n 'vars',\n 'radius',\n 'shadow',\n 'variant',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-with-border': props.value.withBorder,\n },\n])\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<PaperFactory>({\n name: 'Paper',\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,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;EACF;EAEA,MAAM,UAAU,eAAe,CAC7B,EACE,oBAAoB,MAAM,MAAM,WAClC,CACF,CAAC;EAED,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,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,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;;;;;;;;;;;;;;;;;;;;;;;;qBAzFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;yBAC9C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/semi-circle-progress/semi-circle-progress.mjs CHANGED Viewed

@@ -373,15 +373,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"labelPosition",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "SemiCircleProgress",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: semi_circle_progress_module_default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -442,6 +444,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			coordinateForCircle,
 			radius,

package/esm/components/semi-circle-progress/semi-circle-progress.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"semi-circle-progress.mjs","names":[],"sources":["../../../src/components/semi-circle-progress/semi-circle-progress.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :size=\"props.size\">\n <c-box\n v-bind=\"labelAttrs\"\n v-if=\"$slots.label\"\n :data-position=\"props.labelPosition\"\n :data-orientation=\"props.orientation\"\n >\n <slot name=\"label\" />\n </c-box>\n\n <svg\n v-bind=\"svgAttrs.rest\"\n :class=\"svgAttrs.className\"\n :style=\"svgAttrs.style\"\n :width=\"props.size\"\n :height=\"props.size! / 2\"\n :viewBox=\"`0 0 ${props.size} ${props.size! / 2}`\"\n >\n <circle\n fill=\"none\"\n stroke=\"var(--scp-empty-segment-color)\"\n v-bind=\"emptySegmentAttrs.rest\"\n :class=\"emptySegmentAttrs.className\"\n :style=\"emptySegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n\n <circle\n fill=\"none\"\n stroke=\"var(--scp-filled-segment-color)\"\n v-bind=\"filledSegmentAttrs.rest\"\n :class=\"filledSegmentAttrs.className\"\n :style=\"filledSegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n </svg>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SemiCircleProgressFactory, SemiCircleProgressProps } from './semi-circle-progress.types'\nimport classes from './semi-circle-progress.module.css'\nimport { varsResolver } from './semi-circle-progress.utils'\nimport { clamp } from 'es-toolkit'\n\ndefineOptions({\n name: 'CSemiCircleProgress',\n})\n\nconst rawProps = defineProps<SemiCircleProgressProps>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst defaultProps = {\n size: 200,\n thickness: 12,\n orientation: 'up',\n fillDirection: 'left-to-right',\n labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>\n\nconst props = useComponentProps({\n component: 'CSemiCircleProgress',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'size',\n 'thickness',\n 'value',\n 'orientation',\n 'fillDirection',\n 'filledSegmentColor',\n 'emptySegmentColor',\n 'transitionDuration',\n 'label',\n 'labelPosition',\n 'attributes',\n]\n\nconst getStyles = useStyles<SemiCircleProgressFactory>({\n name: 'SemiCircleProgress',\n props: ~~{ ...props.value, ...attrs } as SemiCircleProgressProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst coordinateForCircle = computed(() => props.value.size! / 2)\nconst radius = computed(() => (props.value.size! - 2 * props.value.thickness!) / 2)\nconst circumference = computed(() => Math.PI * radius.value)\nconst semiCirclePercentage = computed(\n () => clamp(props.value.value, 0, 100) * (circumference.value / 100)\n)\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst labelAttrs = computed(() => getStyles('label'))\n\nconst svgAttrs = computed(() => {\n const attrsResult = getStyles('svg')\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst emptySegmentAttrs = computed(() => {\n const attrsResult = getStyles('emptySegment', {\n style: { strokeDashoffset: circumference.value },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\nconst filledSegmentAttrs = computed(() => {\n const attrsResult = getStyles('filledSegment', {\n style: {\n strokeDashoffset: semiCirclePercentage.value,\n ...(semiCirclePercentage.value === 0 ? { strokeOpacity: 0 } : null),\n },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,WAAW;EAEjB,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,eAAe;GACnB,MAAM;GACN,WAAW;GACX,aAAa;GACb,eAAe;GACf,eAAe;EACjB;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;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;EACF,CAAC;EAED,MAAM,sBAAsB,eAAe,MAAM,MAAM,OAAQ,CAAC;EAChE,MAAM,SAAS,gBAAgB,MAAM,MAAM,OAAQ,IAAI,MAAM,MAAM,aAAc,CAAC;EAClF,MAAM,gBAAgB,eAAe,KAAK,KAAK,OAAO,KAAK;EAC3D,MAAM,uBAAuB,eACrB,MAAM,MAAM,MAAM,OAAO,GAAG,GAAG,KAAK,cAAc,QAAQ,IAClE;EAEA,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAClD,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EAEpD,MAAM,WAAW,eAAe;GAE9B,MAAM,EAAE,WAAW,OAAO,GAAG,SADT,UAAU,KACQ;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EAED,MAAM,oBAAoB,eAAe;GAIvC,MAAM,EAAE,WAAW,OAAO,GAAG,SAHT,UAAU,gBAAgB,EAC5C,OAAO,EAAE,kBAAkB,cAAc,MAAM,EACjD,CACsC;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EACD,MAAM,qBAAqB,eAAe;GAOxC,MAAM,EAAE,WAAW,OAAO,GAAG,SANT,UAAU,iBAAiB,EAC7C,OAAO;IACL,kBAAkB,qBAAqB;IACvC,GAAI,qBAAqB,UAAU,IAAI,EAAE,eAAe,EAAE,IAAI;GAChE,EACF,CACsC;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EAED,MAAM,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,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAlKC~~,YA4CQ,OAAA,SA5CR,WA4CQ,EA5CD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,MAAM,OAAA,MAAM,KAAA,CAAA,GAAA;yBAQ/C,CALA,KAAA,OAAO,SAAA,UAAA,GAFf,YAOQ,OAAA,SAPR,WAOQ,EAAA,KAAA,EAAA,GANE,OAAA,YAAU;GAEjB,iBAAe,OAAA,MAAM;GACrB,oBAAkB,OAAA,MAAM;;0BAEJ,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;mGAGvB,mBAiCM,OAjCN,WAiCM,OAhCI,SAAS,MAAI;GACpB,OAAO,OAAA,SAAS;GAChB,OAAO,OAAA,SAAS;GAChB,OAAO,OAAA,MAAM;GACb,QAAQ,OAAA,MAAM,OAAI;GAClB,SAAO,OAAS,OAAA,MAAM,KAAI,GAAI,OAAA,MAAM,OAAI;OAEzC,mBAWE,UAXF,WAWE;GAVA,MAAK;GACL,QAAO;KACC,OAAA,kBAAkB,MAAI;GAC7B,OAAO,OAAA,kBAAkB;GACzB,OAAO,OAAA,kBAAkB;GACzB,IAAI,OAAA;GACJ,IAAI,OAAA;GACJ,GAAG,OAAA;GACH,gBAAc,OAAA,MAAM;GACpB,oBAAkB,OAAA;6BAGrB,mBAWE,UAXF,WAWE;GAVA,MAAK;GACL,QAAO;KACC,OAAA,mBAAmB,MAAI;GAC9B,OAAO,OAAA,mBAAmB;GAC1B,OAAO,OAAA,mBAAmB;GAC1B,IAAI,OAAA;GACJ,IAAI,OAAA;GACJ,GAAG,OAAA;GACH,gBAAc,OAAA,MAAM;GACpB,oBAAkB,OAAA"}
1	+ {"version":3,"file":"semi-circle-progress.mjs","names":[],"sources":["../../../src/components/semi-circle-progress/semi-circle-progress.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :size=\"props.size\">\n <c-box\n v-bind=\"labelAttrs\"\n v-if=\"$slots.label\"\n :data-position=\"props.labelPosition\"\n :data-orientation=\"props.orientation\"\n >\n <slot name=\"label\" />\n </c-box>\n\n <svg\n v-bind=\"svgAttrs.rest\"\n :class=\"svgAttrs.className\"\n :style=\"svgAttrs.style\"\n :width=\"props.size\"\n :height=\"props.size! / 2\"\n :viewBox=\"`0 0 ${props.size} ${props.size! / 2}`\"\n >\n <circle\n fill=\"none\"\n stroke=\"var(--scp-empty-segment-color)\"\n v-bind=\"emptySegmentAttrs.rest\"\n :class=\"emptySegmentAttrs.className\"\n :style=\"emptySegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n\n <circle\n fill=\"none\"\n stroke=\"var(--scp-filled-segment-color)\"\n v-bind=\"filledSegmentAttrs.rest\"\n :class=\"filledSegmentAttrs.className\"\n :style=\"filledSegmentAttrs.style\"\n :cx=\"coordinateForCircle\"\n :cy=\"coordinateForCircle\"\n :r=\"radius\"\n :stroke-width=\"props.thickness\"\n :stroke-dasharray=\"circumference\"\n />\n </svg>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SemiCircleProgressFactory, SemiCircleProgressProps } from './semi-circle-progress.types'\nimport classes from './semi-circle-progress.module.css'\nimport { varsResolver } from './semi-circle-progress.utils'\nimport { clamp } from 'es-toolkit'\n\ndefineOptions({\n name: 'CSemiCircleProgress',\n})\n\nconst rawProps = defineProps<SemiCircleProgressProps>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst defaultProps = {\n size: 200,\n thickness: 12,\n orientation: 'up',\n fillDirection: 'left-to-right',\n labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>\n\nconst props = useComponentProps({\n component: 'CSemiCircleProgress',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'size',\n 'thickness',\n 'value',\n 'orientation',\n 'fillDirection',\n 'filledSegmentColor',\n 'emptySegmentColor',\n 'transitionDuration',\n 'label',\n 'labelPosition',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SemiCircleProgressFactory>({\n name: 'SemiCircleProgress',\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst coordinateForCircle = computed(() => props.value.size! / 2)\nconst radius = computed(() => (props.value.size! - 2 * props.value.thickness!) / 2)\nconst circumference = computed(() => Math.PI * radius.value)\nconst semiCirclePercentage = computed(\n () => clamp(props.value.value, 0, 100) * (circumference.value / 100)\n)\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst labelAttrs = computed(() => getStyles('label'))\n\nconst svgAttrs = computed(() => {\n const attrsResult = getStyles('svg')\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst emptySegmentAttrs = computed(() => {\n const attrsResult = getStyles('emptySegment', {\n style: { strokeDashoffset: circumference.value },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\nconst filledSegmentAttrs = computed(() => {\n const attrsResult = getStyles('filledSegment', {\n style: {\n strokeDashoffset: semiCirclePercentage.value,\n ...(semiCirclePercentage.value === 0 ? { strokeOpacity: 0 } : null),\n },\n })\n const { className, style, ...rest } = attrsResult\n return { className, style: style as any, rest }\n})\n\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,WAAW;EAEjB,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,eAAe;GACnB,MAAM;GACN,WAAW;GACX,aAAa;GACb,eAAe;GACf,eAAe;EACjB;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;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;EACF,CAAC;EAED,MAAM,sBAAsB,eAAe,MAAM,MAAM,OAAQ,CAAC;EAChE,MAAM,SAAS,gBAAgB,MAAM,MAAM,OAAQ,IAAI,MAAM,MAAM,aAAc,CAAC;EAClF,MAAM,gBAAgB,eAAe,KAAK,KAAK,OAAO,KAAK;EAC3D,MAAM,uBAAuB,eACrB,MAAM,MAAM,MAAM,OAAO,GAAG,GAAG,KAAK,cAAc,QAAQ,IAClE;EAEA,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAClD,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EAEpD,MAAM,WAAW,eAAe;GAE9B,MAAM,EAAE,WAAW,OAAO,GAAG,SADT,UAAU,KACQ;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EAED,MAAM,oBAAoB,eAAe;GAIvC,MAAM,EAAE,WAAW,OAAO,GAAG,SAHT,UAAU,gBAAgB,EAC5C,OAAO,EAAE,kBAAkB,cAAc,MAAM,EACjD,CACsC;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EACD,MAAM,qBAAqB,eAAe;GAOxC,MAAM,EAAE,WAAW,OAAO,GAAG,SANT,UAAU,iBAAiB,EAC7C,OAAO;IACL,kBAAkB,qBAAqB;IACvC,GAAI,qBAAqB,UAAU,IAAI,EAAE,eAAe,EAAE,IAAI;GAChE,EACF,CACsC;GACtC,OAAO;IAAE;IAAkB;IAAc;GAAK;EAChD,CAAC;EAED,MAAM,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,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAxKC,YA4CQ,OAAA,SA5CR,WA4CQ,EA5CD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,MAAM,OAAA,MAAM,KAAA,CAAA,GAAA;yBAQ/C,CALA,KAAA,OAAO,SAAA,UAAA,GAFf,YAOQ,OAAA,SAPR,WAOQ,EAAA,KAAA,EAAA,GANE,OAAA,YAAU;GAEjB,iBAAe,OAAA,MAAM;GACrB,oBAAkB,OAAA,MAAM;;0BAEJ,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;mGAGvB,mBAiCM,OAjCN,WAiCM,OAhCI,SAAS,MAAI;GACpB,OAAO,OAAA,SAAS;GAChB,OAAO,OAAA,SAAS;GAChB,OAAO,OAAA,MAAM;GACb,QAAQ,OAAA,MAAM,OAAI;GAClB,SAAO,OAAS,OAAA,MAAM,KAAI,GAAI,OAAA,MAAM,OAAI;OAEzC,mBAWE,UAXF,WAWE;GAVA,MAAK;GACL,QAAO;KACC,OAAA,kBAAkB,MAAI;GAC7B,OAAO,OAAA,kBAAkB;GACzB,OAAO,OAAA,kBAAkB;GACzB,IAAI,OAAA;GACJ,IAAI,OAAA;GACJ,GAAG,OAAA;GACH,gBAAc,OAAA,MAAM;GACpB,oBAAkB,OAAA;6BAGrB,mBAWE,UAXF,WAWE;GAVA,MAAK;GACL,QAAO;KACC,OAAA,mBAAmB,MAAI;GAC9B,OAAO,OAAA,mBAAmB;GAC1B,OAAO,OAAA,mBAAmB;GAC1B,IAAI,OAAA;GACJ,IAAI,OAAA;GACJ,GAAG,OAAA;GACH,gBAAc,OAAA,MAAM;GACpB,oBAAkB,OAAA"}

package/esm/components/simple-grid/simple-grid.mjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-grid.mjs","names":[],"sources":["../../../src/components/simple-grid/simple-grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container'\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport type { SimpleGridFactory, SimpleGridProps } from './simple-grid.types'\nimport classes from './simple-grid.module.css'\nimport { useSimpleGridStyle } from './simple-grid-custom'\n\ndefineOptions({\n name: 'CSimpleGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SimpleGridProps>()\n\nconst props = useComponentProps({\n component: 'CSimpleGrid',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'cols',\n 'verticalSpacing',\n 'spacing',\n 'type',\n 'minColWidth',\n 'autoFlow',\n 'autoRows',\n 'attributes',\n]\n\nconst getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props: ~~{ ...props.value, ...attrs } as SimpleGridProps~~,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n})\n\nconst responsiveClassname = useRandomClassName()\n\nconst autoColsAttr =\n props.value.minColWidth !== undefined ? props.value.autoFlow \|\| 'auto-fill' : undefined\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, ...rootAttrs.value }\n})\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useSimpleGridStyle({\n selector: responsiveClassname,\n ...props.value,\n})\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n const cssText = gridStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n container: computed(() => _container.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EA8BA~~,MAAM,aAAa,IAAsC,IAAI;EAC7D,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,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;EACpB,CAAC;EAED,MAAM,sBAAsB,mBAAmB;EAE/C,MAAM,eACJ,MAAM,MAAM,gBAAgB,KAAA,IAAY,MAAM,MAAM,YAAY,cAAc,KAAA;EAEhF,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,WAAW,oBAAoB,CAAC,CAAC;EACtF,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;GACV,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,MAAM,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,SAAa;GACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI;GAC9C,WAAW,eAAe,WAAW,OAAO,QAAQ,IAAI;EAC1D,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAzH~~+B,OAAA,SAAI,eAAA,UAAA,GAAlC,YAIQ,OAAA,SAJR,WAIQ;;EAJD,KAAI;IAAiD,OAAA,cAAc,GAAA;yBAGhE,CAFR,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,kBAAgB,OAAA,aAAY,CAAA,GAAA;0BAC/D,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;;;yBAIV,YAEQ,OAAA,SAFR,WAEQ;;EAFD,KAAI;IAAgB,OAAA,iBAAe,EAAG,kBAAgB,OAAA,aAAY,CAAA,GAAA;yBAC/D,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"simple-grid.mjs","names":[],"sources":["../../../src/components/simple-grid/simple-grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container'\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n CStyleProp,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport type { SimpleGridFactory, SimpleGridProps } from './simple-grid.types'\nimport classes from './simple-grid.module.css'\nimport { useSimpleGridStyle } from './simple-grid-custom'\n\ndefineOptions({\n name: 'CSimpleGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SimpleGridProps>()\n\nconst props = useComponentProps({\n component: 'CSimpleGrid',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'cols',\n 'verticalSpacing',\n 'spacing',\n 'type',\n 'minColWidth',\n 'autoFlow',\n 'autoRows',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props: styleProps,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n})\n\nconst responsiveClassname = useRandomClassName()\n\nconst autoColsAttr =\n props.value.minColWidth !== undefined ? props.value.autoFlow \|\| 'auto-fill' : undefined\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, ...rootAttrs.value }\n})\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useSimpleGridStyle({\n selector: responsiveClassname,\n ...props.value,\n})\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n const cssText = gridStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n container: computed(() => _container.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.mjs","names":[],"sources":["../../../src/components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SkeletonFactory, SkeletonProps } from './skeleton.types'\nimport classes from './skeleton.module.css'\nimport { varsResolver } from './skeleton.utils'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'CSkeleton',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = withDefaults(defineProps<SkeletonProps>(), {\n animate: true,\n visible: true,\n})\n\nconst props = useComponentProps({\n component: 'CSkeleton',\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'width',\n 'height',\n 'circle',\n 'visible',\n 'radius',\n 'animate',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props: ~~{ ...props.value, ...attrs } as SkeletonProps~~,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst modList = computed(() => [{ visible: props.value.visible }, { animate: props.value.animate }])\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAKjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAA2B;GAC3C,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,UAAU,eAAe,CAAC,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EAEnG,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,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~~;;;;;;;;;;;;;;;;;;;;;;;qBAnFC~~,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"skeleton.mjs","names":[],"sources":["../../../src/components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SkeletonFactory, SkeletonProps } from './skeleton.types'\nimport classes from './skeleton.module.css'\nimport { varsResolver } from './skeleton.utils'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'CSkeleton',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = withDefaults(defineProps<SkeletonProps>(), {\n animate: true,\n visible: true,\n})\n\nconst props = useComponentProps({\n component: 'CSkeleton',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'width',\n 'height',\n 'circle',\n 'visible',\n 'radius',\n 'animate',\n 'mod',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props: styleProps,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst modList = computed(() => [{ visible: props.value.visible }, { animate: props.value.animate }])\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAKjB,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,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAA2B;GAC3C,MAAM;GACN,SAAA;GACA,OAAO;GACP,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EAEnG,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,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;;;;;;;;;;;;;;;;;;;;;;;;qBA1FC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"space.mjs","names":[],"sources":["../../../src/components/space/space.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :w=\"props.w\"\n :miw=\"props.miw ?? props.w\"\n :h=\"props.h\"\n :mih=\"props.mih ?? props.h\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SpaceFactory, SpaceProps } from './space.types'\nimport classes from './space.module.css'\n\ndefineOptions({\n name: 'CSpace',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SpaceProps>()\n\nconst props = useComponentProps({\n component: 'CSpace',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'w',\n 'h',\n 'miw',\n 'mih',\n 'attributes',\n]\n\nconst getStyles = useStyles<SpaceFactory>({\n name: 'Space',\n props: ~~{ ...props.value, ...attrs } as SpaceProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,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;EACF;EAEA,MAAM,~~YAAY~~,~~UAAwB~~;~~GACxC~~,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,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,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,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;qBA9EC~~,YASQ,OAAA,SATR,WASQ,EARN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;EACxB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;;yBAEjB,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"space.mjs","names":[],"sources":["../../../src/components/space/space.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :w=\"props.w\"\n :miw=\"props.miw ?? props.w\"\n :h=\"props.h\"\n :mih=\"props.mih ?? props.h\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SpaceFactory, SpaceProps } from './space.types'\nimport classes from './space.module.css'\n\ndefineOptions({\n name: 'CSpace',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SpaceProps>()\n\nconst props = useComponentProps({\n component: 'CSpace',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'w',\n 'h',\n 'miw',\n 'mih',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SpaceFactory>({\n name: 'Space',\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,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;EACF;EAEA,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,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,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,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,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBApFC,YASQ,OAAA,SATR,WASQ,EARN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;EACxB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;;yBAEjB,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

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

@@ -402,15 +402,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"attributes"
 		];
 		const modList = computed(() => [{ orientation: props.value.orientation }]);
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Splitter",
 			classes: splitter_module_default,
-			props: {
-				...props.value,
-				...attrs
-			},
-			className: props.value.className,
-			style: props.value.style,
+			props: styleProps,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -552,6 +554,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			props,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			paneVNodes,
 			panels,

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stack.mjs","names":[],"sources":["../../../src/components/stack/stack.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { StackFactory, StackProps } from './stack.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './stack.module.css'\nimport { varsResolver } from './stack.utils'\n\ndefineOptions({\n name: 'CStack',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<StackProps>()\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>\n\nconst props = useComponentProps({\n component: 'CStack',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'justify',\n 'gap',\n 'variant',\n 'attributes',\n]\n\nconst getStyles = useStyles<StackFactory>({\n name: 'Stack',\n props: ~~{ ...props.value, ...attrs } as StackProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe;GACnB,KAAK;GACL,OAAO;GACP,SAAS;EACX;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;EACF;EAEA,MAAM,~~YAAY~~,~~UAAwB~~;~~GACxC~~,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,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,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;qBA/EC~~,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;yBAC9C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"stack.mjs","names":[],"sources":["../../../src/components/stack/stack.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { StackFactory, StackProps } from './stack.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './stack.module.css'\nimport { varsResolver } from './stack.utils'\n\ndefineOptions({\n name: 'CStack',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<StackProps>()\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>\n\nconst props = useComponentProps({\n component: 'CStack',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'justify',\n 'gap',\n 'variant',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<StackFactory>({\n name: 'Stack',\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe;GACnB,KAAK;GACL,OAAO;GACP,SAAS;EACX;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;EACF;EAEA,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,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,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,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBArFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;yBAC9C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"text.mjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :size=\"props.size\"\n :tag=\"props.span ? 'span' : 'p'\"\n :variant=\"props.variant\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport { useStyles, CBox, useComponentProps } from '../../core'\nimport { varsResolver } from './text.utils.js'\n\ndefineOptions({\n name: 'CText',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<TextProps>()\n\nconst props = useComponentProps({\n component: 'CText',\n defaultProps: {},\n props: rawProps,\n})\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start'\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end'\n }\n\n return undefined\n}\n\nconst knownProps = [\n 'lineClamp',\n 'truncate',\n 'inline',\n 'inherit',\n 'gradient',\n 'span',\n 'textWrap',\n '__staticSelector',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'variant',\n 'mod',\n 'size',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-truncate': getTextTruncate(props.value.truncate),\n 'data-line-clamp': typeof props.value.lineClamp === 'number',\n 'data-inline': props.value.inline,\n 'data-inherit': props.value.inherit,\n },\n])\n\nconst getStyles = useStyles<TextFactory>({\n name: ['Text', props.value.__staticSelector],\n props: ~~{ ...props.value, ...attrs } as TextProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,UAAU,eAAe,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,MAAM,QAAQ;GACrD,mBAAmB,OAAO,MAAM,MAAM,cAAc;GACpD,eAAe,MAAM,MAAM;GAC3B,gBAAgB,MAAM,MAAM;EAC9B,CACF,CAAC;EAED,MAAM,YAAY,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,MAAM,gBAAgB;GAC3C,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,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EAEvE,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~~,YAQQ,OAAA,SARR,WAQQ,EAPN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;yBAER,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"text.mjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :size=\"props.size\"\n :tag=\"props.span ? 'span' : 'p'\"\n :variant=\"props.variant\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport { useStyles, CBox, useComponentProps, CStyleProp } from '../../core'\nimport { varsResolver } from './text.utils.js'\n\ndefineOptions({\n name: 'CText',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<TextProps>()\n\nconst props = useComponentProps({\n component: 'CText',\n defaultProps: {},\n props: rawProps,\n})\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start'\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end'\n }\n\n return undefined\n}\n\nconst knownProps = [\n 'lineClamp',\n 'truncate',\n 'inline',\n 'inherit',\n 'gradient',\n 'span',\n 'textWrap',\n '__staticSelector',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'variant',\n 'mod',\n 'size',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-truncate': getTextTruncate(props.value.truncate),\n 'data-line-clamp': typeof props.value.lineClamp === 'number',\n 'data-inline': props.value.inline,\n 'data-inherit': props.value.inherit,\n },\n])\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<TextFactory>({\n name: ['Text', props.value.__staticSelector],\n props: styleProps,\n classes,\n className: () => props.value.className,\n style: () => props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,UAAU,eAAe,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,MAAM,QAAQ;GACrD,mBAAmB,OAAO,MAAM,MAAM,cAAc;GACpD,eAAe,MAAM,MAAM;GAC3B,gBAAgB,MAAM,MAAM;EAC9B,CACF,CAAC;EAED,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,MAAM,gBAAgB;GAC3C,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,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EAEvE,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,YAQQ,OAAA,SARR,WAQQ,EAPN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;yBAER,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}