@cck-ui/core 0.2.0

package/esm/components/grid/col/col.mjs

@@ -0,0 +1,393 @@
+"use client";
+import export_helper_default from "../../../_virtual/_/plugin-vue/export-helper.mjs";
+import { responsiveStyleManager } from "../../../core/responsive-style-manager/responsive-style-manager.mjs";
+import { normalizeNumberLikeStringProp } from "../../../core/responsive-style-manager/normalize-number-like-string-prop/normalize-number-like-string-prop.mjs";
+import { useRandomClassName } from "../../../core/box/use-random-classname/use-random-classname.mjs";
+import { GRID_CONTEXT_KEY } from "../grid.constants.mjs";
+import { useColCustomStyle } from "./col-custom.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, inject, normalizeProps, onUnmounted, openBlock, ref, renderSlot, resolveComponent, watchEffect, withCtx } from "vue";
+import cx from "clsx";
+//#region packages/@cck-ui/core/src/components/grid/col/col.vue
+const _sfc_main = /*@__PURE__*/ 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 = inject(GRID_CONTEXT_KEY);
+		const responsiveClassname = useRandomClassName();
+		const rootAttrs = computed(() => gridContext.getStyles("col", {
+			className: cx(className, responsiveClassname),
+			style,
+			classNames,
+			styles
+		}));
+		const mergedAttrs = computed(() => ({
+			...others,
+			...rootAttrs.value
+		}));
+		const _offset = normalizeNumberLikeStringProp(props.offset);
+		const _order = normalizeNumberLikeStringProp(props.order);
+		const colStyle = useColCustomStyle({
+			selector: responsiveClassname,
+			align: props.align,
+			offset: _offset,
+			order: _order,
+			span: props.span
+		}, gridContext);
+		const currentStyleKey = ref(null);
+		watchEffect(() => {
+			const cssText = colStyle.value.queryStylesString;
+			if (cssText) {
+				const newKey = responsiveStyleManager.register(cssText);
+				if (currentStyleKey.value && currentStyleKey.value !== newKey) responsiveStyleManager.unregister(currentStyleKey.value);
+				currentStyleKey.value = newKey;
+			} else if (currentStyleKey.value) {
+				responsiveStyleManager.unregister(currentStyleKey.value);
+				currentStyleKey.value = null;
+			}
+		});
+		onUnmounted(() => {
+			if (currentStyleKey.value) 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 = resolveComponent("c-box");
+	return openBlock(), createBlock(_component_c_box, normalizeProps(guardReactiveProps($setup.mergedAttrs)), {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 16);
+}
+var col_default = /*#__PURE__*/ 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
+export { col_default as default };
+
+//# sourceMappingURL=col.mjs.map

package/esm/components/grid/col/col.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.mjs","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,cAAc,OAAO,gBAAgB;EAE3C,MAAM,sBAAsB,mBAAmB;EAE/C,MAAM,YAAY,eAChB,YAAY,UAAU,OAAO;GAC3B,WAAW,GAAG,WAAW,mBAAmB;GAC5C;GACA;GACA;EACF,CAAC,CACH;EACA,MAAM,cAAc,gBAAgB;GAAE,GAAG;GAAQ,GAAG,UAAU;EAAM,EAAE;EAEtE,MAAM,UAAU,8BAA8B,MAAM,MAAM;EAC1D,MAAM,SAAS,8BAA8B,MAAM,KAAK;EACxD,MAAM,WAAW,kBACf;GACE,UAAU;GACV,OAAO,MAAM;GACb,QAAQ;GACR,OAAO;GACP,MAAM,MAAM;EACd,GACA,WACF;EAEA,MAAM,kBAAkB,IAAmB,IAAI;EAC/C,kBAAkB;GAChB,MAAM,UAAU,SAAS,MAAM;GAC/B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBCzEC,YAEQ,kBAAA,eAAA,mBAFO,OAAA,WAAW,CAAA,GAAA;yBAChB,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/grid/grid-custom.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { filterProps } from "../../core/utils/filter-props/filter-props.mjs";
+import { getBaseValue } from "../../core/utils/get-base-value/get-base-value.mjs";
+import { getSpacing } from "../../core/utils/get-size/get-size.mjs";
+import { getSortedBreakpoints } from "../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.mjs";
+import { keys } from "../../core/utils/keys/keys.mjs";
+import { THEME_KEY } from "../../core/config-provider/config-provider.types.mjs";
+import { DEFAULT_THEME } from "../../core/config-provider/default-theme.mjs";
+import { stylesToString } from "../../core/responsive-style-manager/styles-to-string/styles-to-string.mjs";
+import { computed, inject } from "vue";
+//#region packages/@cck-ui/core/src/components/grid/grid-custom.ts
+function useGridCustomStyle({ breakpoints, columnGap, gap, rowGap, selector, type }) {
+	return computed(() => {
+		const theme = inject(THEME_KEY, DEFAULT_THEME);
+		const _breakpoints = breakpoints || theme.breakpoints;
+		const styles = filterProps({
+			"--grid-gap": getSpacing(getBaseValue(gap)),
+			"--grid-row-gap": getSpacing(getBaseValue(rowGap)),
+			"--grid-column-gap": getSpacing(getBaseValue(columnGap))
+		});
+		const queries = keys(_breakpoints).reduce((acc, breakpoint) => {
+			if (!acc[breakpoint]) acc[breakpoint] = {};
+			if (typeof gap === "object" && gap[breakpoint] !== void 0) acc[breakpoint]["--grid-gap"] = getSpacing(gap[breakpoint]);
+			return acc;
+		}, {});
+		const values = getSortedBreakpoints(keys(queries), _breakpoints).filter((breakpoint) => 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: stylesToString({
+			styles,
+			media: type === "container" ? void 0 : values,
+			container: type === "container" ? values : void 0,
+			selector
+		}) };
+	});
+}
+//#endregion
+export { useGridCustomStyle };
+
+//# sourceMappingURL=grid-custom.mjs.map

package/esm/components/grid/grid-custom.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-custom.mjs","names":[],"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,OAAO,eAAe;EACpB,MAAM,QAAQ,OAAO,WAAW,aAAa;EAE7C,MAAM,eAAe,eAAe,MAAM;EAE1C,MAAM,SAA6C,YAAY;GAC7D,cAAc,WAAW,aAAa,GAAG,CAAC;GAC1C,kBAAkB,WAAW,aAAa,MAAM,CAAC;GACjD,qBAAqB,WAAW,aAAa,SAAS,CAAC;EACzD,CAAC;EAED,MAAM,UAAU,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,gBAAgB,WAAW,IAAI,WAAqB;GAGhF,OAAO;EACT,GACA,CAAC,CACH;EAMA,MAAM,SAJoB,qBAAqB,KAAK,OAAO,GAAG,YAAY,CAAC,CAAC,QACzE,eAAe,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,mBAFiB,eAAe;GANvC;GACA,OAAO,SAAS,cAAc,KAAA,IAAY;GAC1C,WAAW,SAAS,cAAc,SAAS,KAAA;GAC3C;EAGiD,CAE1B,EAAE;CAC7B,CAAC;AACH"}

package/esm/components/grid/grid.constants.mjs

@@ -0,0 +1,7 @@
+"use client";
+//#region packages/@cck-ui/core/src/components/grid/grid.constants.ts
+const GRID_CONTEXT_KEY = Symbol("GridContext");
+//#endregion
+export { GRID_CONTEXT_KEY };
+
+//# sourceMappingURL=grid.constants.mjs.map

package/esm/components/grid/grid.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.constants.mjs","names":[],"sources":["../../../src/components/grid/grid.constants.ts"],"sourcesContent":["import { InjectionKey } from 'vue'\nimport { GridContextValue } from './grid.context'\n\nexport const GRID_CONTEXT_KEY: InjectionKey<GridContextValue> =\n  Symbol('GridContext')\n\nexport const DEFAULT_COLUMNS = 12\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,aAAa"}