@cck-ui/core 0.2.0

package/cjs/components/grid/col/col.cjs

@@ -0,0 +1,395 @@
+"use client";
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_export_helper = require("../../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_responsive_style_manager = require("../../../core/responsive-style-manager/responsive-style-manager.cjs");
+const require_normalize_number_like_string_prop = require("../../../core/responsive-style-manager/normalize-number-like-string-prop/normalize-number-like-string-prop.cjs");
+const require_use_random_classname = require("../../../core/box/use-random-classname/use-random-classname.cjs");
+const require_grid_constants = require("../grid.constants.cjs");
+const require_col_custom = require("./col-custom.cjs");
+let vue = require("vue");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+//#region packages/@cck-ui/core/src/components/grid/col/col.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	name: "CCol",
+	__name: "col",
+	props: {
+		span: {
+			type: null,
+			required: false,
+			default: 12
+		},
+		order: {
+			type: null,
+			required: false
+		},
+		offset: {
+			type: null,
+			required: false
+		},
+		align: {
+			type: null,
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: [
+				Object,
+				Function,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		__vars: {
+			type: null,
+			required: false
+		},
+		__size: {
+			type: String,
+			required: false
+		},
+		hiddenFrom: {
+			type: null,
+			required: false
+		},
+		visibleFrom: {
+			type: null,
+			required: false
+		},
+		lightHidden: {
+			type: Boolean,
+			required: false
+		},
+		darkHidden: {
+			type: Boolean,
+			required: false
+		},
+		mod: {
+			type: [
+				Object,
+				String,
+				Array
+			],
+			required: false
+		},
+		m: {
+			type: null,
+			required: false
+		},
+		my: {
+			type: null,
+			required: false
+		},
+		mx: {
+			type: null,
+			required: false
+		},
+		mt: {
+			type: null,
+			required: false
+		},
+		mb: {
+			type: null,
+			required: false
+		},
+		ms: {
+			type: null,
+			required: false
+		},
+		me: {
+			type: null,
+			required: false
+		},
+		mis: {
+			type: null,
+			required: false
+		},
+		mie: {
+			type: null,
+			required: false
+		},
+		ml: {
+			type: null,
+			required: false
+		},
+		mr: {
+			type: null,
+			required: false
+		},
+		p: {
+			type: null,
+			required: false
+		},
+		py: {
+			type: null,
+			required: false
+		},
+		px: {
+			type: null,
+			required: false
+		},
+		pt: {
+			type: null,
+			required: false
+		},
+		pb: {
+			type: null,
+			required: false
+		},
+		ps: {
+			type: null,
+			required: false
+		},
+		pe: {
+			type: null,
+			required: false
+		},
+		pis: {
+			type: null,
+			required: false
+		},
+		pie: {
+			type: null,
+			required: false
+		},
+		pl: {
+			type: null,
+			required: false
+		},
+		pr: {
+			type: null,
+			required: false
+		},
+		bd: {
+			type: null,
+			required: false
+		},
+		bdrs: {
+			type: null,
+			required: false
+		},
+		bg: {
+			type: null,
+			required: false
+		},
+		c: {
+			type: null,
+			required: false
+		},
+		opacity: {
+			type: [
+				String,
+				Object,
+				Number
+			],
+			required: false
+		},
+		ff: {
+			type: [String, Object],
+			required: false
+		},
+		fz: {
+			type: null,
+			required: false
+		},
+		fw: {
+			type: null,
+			required: false
+		},
+		lts: {
+			type: null,
+			required: false
+		},
+		ta: {
+			type: [String, Object],
+			required: false
+		},
+		lh: {
+			type: null,
+			required: false
+		},
+		fs: {
+			type: null,
+			required: false
+		},
+		tt: {
+			type: [String, Object],
+			required: false
+		},
+		td: {
+			type: null,
+			required: false
+		},
+		w: {
+			type: null,
+			required: false
+		},
+		miw: {
+			type: null,
+			required: false
+		},
+		maw: {
+			type: null,
+			required: false
+		},
+		h: {
+			type: null,
+			required: false
+		},
+		mih: {
+			type: null,
+			required: false
+		},
+		mah: {
+			type: null,
+			required: false
+		},
+		bgsz: {
+			type: null,
+			required: false
+		},
+		bgp: {
+			type: null,
+			required: false
+		},
+		bgr: {
+			type: null,
+			required: false
+		},
+		bga: {
+			type: null,
+			required: false
+		},
+		pos: {
+			type: [String, Object],
+			required: false
+		},
+		top: {
+			type: null,
+			required: false
+		},
+		left: {
+			type: null,
+			required: false
+		},
+		bottom: {
+			type: null,
+			required: false
+		},
+		right: {
+			type: null,
+			required: false
+		},
+		inset: {
+			type: null,
+			required: false
+		},
+		display: {
+			type: null,
+			required: false
+		},
+		flex: {
+			type: null,
+			required: false
+		},
+		variant: {
+			type: null,
+			required: false
+		},
+		classNames: {
+			type: null,
+			required: false
+		},
+		styles: {
+			type: null,
+			required: false
+		},
+		vars: {
+			type: Function,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const { classNames, className, style, styles, vars, span, order, offset, align, ...others } = props;
+		const gridContext = (0, vue.inject)(require_grid_constants.GRID_CONTEXT_KEY);
+		const responsiveClassname = require_use_random_classname.useRandomClassName();
+		const rootAttrs = (0, vue.computed)(() => gridContext.getStyles("col", {
+			className: (0, clsx.default)(className, responsiveClassname),
+			style,
+			classNames,
+			styles
+		}));
+		const mergedAttrs = (0, vue.computed)(() => ({
+			...others,
+			...rootAttrs.value
+		}));
+		const _offset = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.offset);
+		const _order = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.order);
+		const colStyle = require_col_custom.useColCustomStyle({
+			selector: responsiveClassname,
+			align: props.align,
+			offset: _offset,
+			order: _order,
+			span: props.span
+		}, gridContext);
+		const currentStyleKey = (0, vue.ref)(null);
+		(0, vue.watchEffect)(() => {
+			const cssText = colStyle.value.queryStylesString;
+			if (cssText) {
+				const newKey = require_responsive_style_manager.responsiveStyleManager.register(cssText);
+				if (currentStyleKey.value && currentStyleKey.value !== newKey) require_responsive_style_manager.responsiveStyleManager.unregister(currentStyleKey.value);
+				currentStyleKey.value = newKey;
+			} else if (currentStyleKey.value) {
+				require_responsive_style_manager.responsiveStyleManager.unregister(currentStyleKey.value);
+				currentStyleKey.value = null;
+			}
+		});
+		(0, vue.onUnmounted)(() => {
+			if (currentStyleKey.value) require_responsive_style_manager.responsiveStyleManager.unregister(currentStyleKey.value);
+		});
+		const __returned__ = {
+			props,
+			classNames,
+			className,
+			style,
+			styles,
+			vars,
+			span,
+			order,
+			offset,
+			align,
+			others,
+			gridContext,
+			responsiveClassname,
+			rootAttrs,
+			mergedAttrs,
+			_offset,
+			_order,
+			colStyle,
+			currentStyleKey
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	const _component_c_box = (0, vue.resolveComponent)("c-box");
+	return (0, vue.openBlock)(), (0, vue.createBlock)(_component_c_box, (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.mergedAttrs)), {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+		_: 3
+	}, 16);
+}
+var col_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\components\\grid\\col\\col.vue"]]);
+//#endregion
+exports.default = col_default;
+
+//# sourceMappingURL=col.cjs.map

package/cjs/components/grid/col/col.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.cjs","names":[],"sources":["../../../../src/components/grid/col/col.vue","../../../../src/components/grid/col/col.vue"],"sourcesContent":["<template>\n  <c-box v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, inject, onUnmounted, ref, watchEffect } from 'vue'\nimport {\n  normalizeNumberLikeStringProp,\n  responsiveStyleManager,\n  useRandomClassName,\n} from '../../../core'\nimport type { ColProps } from './col.types'\nimport { useColCustomStyle } from './col-custom'\nimport { GridContextValue } from '../grid.context'\nimport { GRID_CONTEXT_KEY } from '../grid.constants'\n\ndefineOptions({\n  name: 'CCol',\n})\n\nconst props = withDefaults(defineProps<ColProps>(), {\n  span: 12,\n})\n\nconst { classNames, className, style, styles, vars, span, order, offset, align, ...others } = props\n\nconst gridContext = inject(GRID_CONTEXT_KEY) as GridContextValue\n\nconst responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() =>\n  gridContext.getStyles('col', {\n    className: cx(className, responsiveClassname),\n    style,\n    classNames,\n    styles,\n  })\n)\nconst mergedAttrs = computed(() => ({ ...others, ...rootAttrs.value }))\n\nconst _offset = normalizeNumberLikeStringProp(props.offset)\nconst _order = normalizeNumberLikeStringProp(props.order)\nconst colStyle = useColCustomStyle(\n  {\n    selector: responsiveClassname,\n    align: props.align,\n    offset: _offset,\n    order: _order,\n    span: props.span,\n  },\n  gridContext\n)\n\nconst currentStyleKey = ref<string | null>(null)\nwatchEffect(() => {\n  const cssText = colStyle.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</script>\n",null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAId,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ,OAAO,GAAG,WAAW;EAE9F,MAAM,eAAA,GAAA,IAAA,OAAA,CAAqB,uBAAA,gBAAgB;EAE3C,MAAM,sBAAsB,6BAAA,mBAAmB;EAE/C,MAAM,aAAA,GAAA,IAAA,SAAA,OACJ,YAAY,UAAU,OAAO;GAC3B,YAAA,GAAA,KAAA,QAAA,CAAc,WAAW,mBAAmB;GAC5C;GACA;GACA;EACF,CAAC,CACH;EACA,MAAM,eAAA,GAAA,IAAA,SAAA,QAA8B;GAAE,GAAG;GAAQ,GAAG,UAAU;EAAM,EAAE;EAEtE,MAAM,UAAU,0CAAA,8BAA8B,MAAM,MAAM;EAC1D,MAAM,SAAS,0CAAA,8BAA8B,MAAM,KAAK;EACxD,MAAM,WAAW,mBAAA,kBACf;GACE,UAAU;GACV,OAAO,MAAM;GACb,QAAQ;GACR,OAAO;GACP,MAAM,MAAM;EACd,GACA,WACF;EAEA,MAAM,mBAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAC/C,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,MAAM,UAAU,SAAS,MAAM;GAC/B,IAAI,SAAS;IACX,MAAM,SAAS,iCAAA,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,IAAI,gBAAgB,OAClB,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDCvES,mBAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,mBAAA,CAFO,OAAA,WAAW,CAAA,GAAA;kCAChB,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/grid/grid-custom.cjs

@@ -0,0 +1,41 @@
+"use client";
+const require_filter_props = require("../../core/utils/filter-props/filter-props.cjs");
+const require_get_base_value = require("../../core/utils/get-base-value/get-base-value.cjs");
+const require_get_size = require("../../core/utils/get-size/get-size.cjs");
+const require_get_sorted_breakpoints = require("../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.cjs");
+const require_keys = require("../../core/utils/keys/keys.cjs");
+const require_config_provider_types = require("../../core/config-provider/config-provider.types.cjs");
+const require_default_theme = require("../../core/config-provider/default-theme.cjs");
+const require_styles_to_string = require("../../core/responsive-style-manager/styles-to-string/styles-to-string.cjs");
+let vue = require("vue");
+//#region packages/@cck-ui/core/src/components/grid/grid-custom.ts
+function useGridCustomStyle({ breakpoints, columnGap, gap, rowGap, selector, type }) {
+	return (0, vue.computed)(() => {
+		const theme = (0, vue.inject)(require_config_provider_types.THEME_KEY, require_default_theme.DEFAULT_THEME);
+		const _breakpoints = breakpoints || theme.breakpoints;
+		const styles = require_filter_props.filterProps({
+			"--grid-gap": require_get_size.getSpacing(require_get_base_value.getBaseValue(gap)),
+			"--grid-row-gap": require_get_size.getSpacing(require_get_base_value.getBaseValue(rowGap)),
+			"--grid-column-gap": require_get_size.getSpacing(require_get_base_value.getBaseValue(columnGap))
+		});
+		const queries = require_keys.keys(_breakpoints).reduce((acc, breakpoint) => {
+			if (!acc[breakpoint]) acc[breakpoint] = {};
+			if (typeof gap === "object" && gap[breakpoint] !== void 0) acc[breakpoint]["--grid-gap"] = require_get_size.getSpacing(gap[breakpoint]);
+			return acc;
+		}, {});
+		const values = require_get_sorted_breakpoints.getSortedBreakpoints(require_keys.keys(queries), _breakpoints).filter((breakpoint) => require_keys.keys(queries[breakpoint.value]).length > 0).map((breakpoint) => ({
+			query: type === "container" ? `c-grid (min-width: ${_breakpoints[breakpoint.value]})` : `(min-width: ${_breakpoints[breakpoint.value]})`,
+			styles: queries[breakpoint.value]
+		}));
+		return { queryStylesString: require_styles_to_string.stylesToString({
+			styles,
+			media: type === "container" ? void 0 : values,
+			container: type === "container" ? values : void 0,
+			selector
+		}) };
+	});
+}
+//#endregion
+exports.useGridCustomStyle = useGridCustomStyle;
+
+//# sourceMappingURL=grid-custom.cjs.map

package/cjs/components/grid/grid-custom.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-custom.cjs","names":["THEME_KEY","DEFAULT_THEME","filterProps","getSpacing","getBaseValue","keys","getSortedBreakpoints","stylesToString"],"sources":["../../../src/components/grid/grid-custom.ts"],"sourcesContent":["import {\n  DEFAULT_THEME,\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  getSpacing,\n  keys,\n  stylesToString,\n  THEME_KEY,\n} from '../../core'\nimport { GridBreakpoints, GridProps } from './grid.types'\nimport { computed, inject } from 'vue'\n\ninterface GridVariablesProps extends GridProps {\n  selector: string\n}\n\nexport function useGridCustomStyle({\n  breakpoints,\n  columnGap,\n  gap,\n  rowGap,\n  selector,\n  type,\n}: GridVariablesProps) {\n  return computed(() => {\n    const theme = inject(THEME_KEY, DEFAULT_THEME)\n\n    const _breakpoints = breakpoints || theme.breakpoints\n\n    const styles: Record<string, string | undefined> = filterProps({\n      '--grid-gap': getSpacing(getBaseValue(gap)),\n      '--grid-row-gap': getSpacing(getBaseValue(rowGap)),\n      '--grid-column-gap': getSpacing(getBaseValue(columnGap)),\n    })\n\n    const queries = keys(_breakpoints).reduce<Record<string, Record<string, any>>>(\n      (acc, breakpoint) => {\n        if (!acc[breakpoint as string]) {\n          acc[breakpoint as string] = {}\n        }\n\n        if (typeof gap === 'object' && gap[breakpoint as string] !== undefined) {\n          acc[breakpoint as string]['--grid-gap'] = getSpacing(gap[breakpoint as string])\n        }\n\n        return acc\n      },\n      {}\n    )\n\n    const sortedBreakpoints = getSortedBreakpoints(keys(queries), _breakpoints).filter(\n      (breakpoint) => keys(queries[breakpoint.value]).length > 0\n    )\n\n    const values = sortedBreakpoints.map((breakpoint) => ({\n      query:\n        type === 'container'\n          ? `c-grid (min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`\n          : `(min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`,\n      styles: queries[breakpoint.value],\n    }))\n\n    const queryStyles = {\n      styles,\n      media: type === 'container' ? undefined : values,\n      container: type === 'container' ? values : undefined,\n      selector,\n    }\n\n    const queryStylesString = stylesToString(queryStyles)\n\n    return { queryStylesString }\n  })\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAgB,mBAAmB,EACjC,aACA,WACA,KACA,QACA,UACA,QACqB;CACrB,QAAA,GAAA,IAAA,SAAA,OAAsB;EACpB,MAAM,SAAA,GAAA,IAAA,OAAA,CAAeA,8BAAAA,WAAWC,sBAAAA,aAAa;EAE7C,MAAM,eAAe,eAAe,MAAM;EAE1C,MAAM,SAA6CC,qBAAAA,YAAY;GAC7D,cAAcC,iBAAAA,WAAWC,uBAAAA,aAAa,GAAG,CAAC;GAC1C,kBAAkBD,iBAAAA,WAAWC,uBAAAA,aAAa,MAAM,CAAC;GACjD,qBAAqBD,iBAAAA,WAAWC,uBAAAA,aAAa,SAAS,CAAC;EACzD,CAAC;EAED,MAAM,UAAUC,aAAAA,KAAK,YAAY,CAAC,CAAC,QAChC,KAAK,eAAe;GACnB,IAAI,CAAC,IAAI,aACP,IAAI,cAAwB,CAAC;GAG/B,IAAI,OAAO,QAAQ,YAAY,IAAI,gBAA0B,KAAA,GAC3D,IAAI,WAAqB,CAAC,gBAAgBF,iBAAAA,WAAW,IAAI,WAAqB;GAGhF,OAAO;EACT,GACA,CAAC,CACH;EAMA,MAAM,SAJoBG,+BAAAA,qBAAqBD,aAAAA,KAAK,OAAO,GAAG,YAAY,CAAC,CAAC,QACzE,eAAeA,aAAAA,KAAK,QAAQ,WAAW,MAAM,CAAC,CAAC,SAAS,CAG5B,CAAC,CAAC,KAAK,gBAAgB;GACpD,OACE,SAAS,cACL,sBAAsB,aAAa,WAAW,OAAgC,KAC9E,eAAe,aAAa,WAAW,OAAgC;GAC7E,QAAQ,QAAQ,WAAW;EAC7B,EAAE;EAWF,OAAO,EAAE,mBAFiBE,yBAAAA,eAAe;GANvC;GACA,OAAO,SAAS,cAAc,KAAA,IAAY;GAC1C,WAAW,SAAS,cAAc,SAAS,KAAA;GAC3C;EAGiD,CAE1B,EAAE;CAC7B,CAAC;AACH"}