@cck-ui/core 0.2.0

package/cjs/components/loader/loader.cjs

@@ -0,0 +1,407 @@
+"use client";
+const require_get_size = require("../../core/utils/get-size/get-size.cjs");
+const require_export_helper = require("../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_get_theme_color = require("../../core/config-provider/color-functions/get-theme-color/get-theme-color.cjs");
+const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_use_loader = require("./use-loader.cjs");
+const require_loader_module = require("./loader.module.cjs");
+const require_index = require("./index.cjs");
+let vue = require("vue");
+//#region packages/@cck-ui/core/src/components/loader/loader.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	name: "CLoader",
+	__name: "loader",
+	props: {
+		color: {
+			type: null,
+			required: false
+		},
+		loaders: {
+			type: Object,
+			required: false,
+			default: () => require_index.CDefaultLoaders
+		},
+		size: {
+			type: [
+				String,
+				Object,
+				Number
+			],
+			required: false
+		},
+		type: {
+			type: [String, Object],
+			required: false,
+			default: "oval"
+		},
+		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
+		},
+		unstyled: {
+			type: Boolean,
+			required: false
+		},
+		variant: {
+			type: null,
+			required: false
+		},
+		classNames: {
+			type: null,
+			required: false
+		},
+		styles: {
+			type: null,
+			required: false
+		},
+		vars: {
+			type: Function,
+			required: false
+		},
+		attributes: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { size, color, type, vars, className, style, classNames, styles, unstyled, loaders, variant, attributes, ...others } = props;
+		const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { size, color }) => ({ root: {
+			"--loader-size": require_get_size.getSize(size, "loader-size"),
+			"--loader-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0
+		} }));
+		const getStyles = require_use_styles.useStyles({
+			name: "Loader",
+			props,
+			classes: require_loader_module.default,
+			className,
+			style,
+			classNames,
+			styles,
+			unstyled,
+			attributes,
+			vars,
+			varsResolver
+		});
+		const rootAttrs = (0, vue.computed)(() => getStyles("root"));
+		const mergedAttrs = (0, vue.computed)(() => ({
+			...others,
+			...rootAttrs.value
+		}));
+		const { _ref } = require_use_loader.useLoader();
+		__expose({
+			/** @description loader html element */
+			ref: _ref,
+			/** @description loader size */
+			size: props.size
+		});
+		const __returned__ = {
+			props,
+			size,
+			color,
+			type,
+			vars,
+			className,
+			style,
+			classNames,
+			styles,
+			unstyled,
+			loaders,
+			variant,
+			attributes,
+			others,
+			varsResolver,
+			getStyles,
+			rootAttrs,
+			mergedAttrs,
+			_ref
+		};
+		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 _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_c_box, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, $setup.mergedAttrs)), {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+		_: 3
+	}, 16)) : ((0, vue.openBlock)(), (0, vue.createBlock)(_component_c_box, (0, vue.mergeProps)({ key: 1 }, $setup.mergedAttrs, {
+		tag: $setup.loaders[$setup.type],
+		variant: $setup.variant,
+		size: $setup.size
+	}), null, 16, [
+		"tag",
+		"variant",
+		"size"
+	]));
+}
+var loader_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\components\\loader\\loader.vue"]]);
+//#endregion
+exports.default = loader_default;
+
+//# sourceMappingURL=loader.cjs.map

package/cjs/components/loader/loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs","names":[],"sources":["../../../src/components/loader/loader.vue","../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n  <c-box v-if=\"$slots.default\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n  <c-box v-else v-bind=\"mergedAttrs\" :tag=\"loaders[type]\" :variant=\"variant\" :size=\"size\"></c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { createVarsResolver, getSize, getThemeColor, useStyles } from '../../core'\nimport type { LoaderProps } from './loader.types'\nimport { useLoader } from './use-loader'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\n\ndefineOptions({\n  name: 'CLoader',\n})\n\nconst props = withDefaults(defineProps<LoaderProps>(), {\n  loaders: () => CDefaultLoaders,\n  type: 'oval',\n})\n\nconst {\n  size,\n  color,\n  type,\n  vars,\n  className,\n  style,\n  classNames,\n  styles,\n  unstyled,\n  loaders,\n  variant,\n  attributes,\n  ...others\n} = props\n\nconst varsResolver = createVarsResolver<LoaderFactory>((theme, { size, color }) => ({\n  root: {\n    '--loader-size': getSize(size, 'loader-size'),\n    '--loader-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}))\n\nconst getStyles = useStyles<LoaderFactory>({\n  name: 'Loader',\n  props,\n  classes,\n  className,\n  style,\n  classNames,\n  styles,\n  unstyled,\n  attributes,\n  vars,\n  varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => ({ ...others, ...rootAttrs.value }))\n\nconst { _ref } = useLoader()\n\ndefineExpose({\n  /** @description loader html element */\n  ref: _ref,\n  /** @description loader size */\n  size: props.size,\n})\n</script>\n",null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAKd,MAAM,EACJ,MACA,OACA,MACA,MACA,WACA,OACA,YACA,QACA,UACA,SACA,SACA,YACA,GAAG,WACD;EAEJ,MAAM,eAAe,6BAAA,oBAAmC,OAAO,EAAE,MAAM,aAAa,EAClF,MAAM;GACJ,iBAAiB,iBAAA,QAAQ,MAAM,aAAa;GAC5C,kBAAkB,QAAQ,wBAAA,cAAc,OAAO,KAAK,IAAI,KAAA;EAC1D,EACF,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAyB;GACzC,MAAM;GACN;GACA,SAAA,sBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,QAA8B;GAAE,GAAG;GAAQ,GAAG,UAAU;EAAM,EAAE;EAEtE,MAAM,EAAE,SAAS,mBAAA,UAAU;EAE3B,SAAa;;GAEX,KAAK;;GAEL,MAAM,MAAM;EACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QCvEc,KAAA,OAAO,YAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAEZ,mBAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAF6B,OAAA,WAAW,CAAA,GAAA;kCACtC,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA;;uDAEsF,mBAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAA1E,OAAA,aAAW;EAAG,KAAK,OAAA,QAAQ,OAAA;EAAQ,SAAS,OAAA;EAAU,MAAM,OAAA"}

package/cjs/components/loader/loader.module.cjs

@@ -0,0 +1,17 @@
+"use client";
+//#region packages/@cck-ui/core/src/components/loader/loader.module.css
+var loader_module_default = {
+	"root": "m_a244865c",
+	"barsLoader": "m_8f6794ed",
+	"bar": "m_919edf59",
+	"bars-loader-animation": "m_774c277d",
+	"dotsLoader": "m_637ae2f7",
+	"dot": "m_919ee88f",
+	"loader-dots-animation": "m_24cd2081",
+	"ovalLoader": "m_c87fd4ff",
+	"oval-loader-animation": "m_1309882b"
+};
+//#endregion
+exports.default = loader_module_default;
+
+//# sourceMappingURL=loader.module.cjs.map

package/cjs/components/loader/loader.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.module.cjs","names":[],"sources":["../../../src/components/loader/loader.module.css"],"sourcesContent":[".root {\n  --loader-size-xs: 18px;\n  --loader-size-sm: 22px;\n  --loader-size-md: 36px;\n  --loader-size-lg: 44px;\n  --loader-size-xl: 58px;\n  --loader-size: var(--loader-size-md);\n  --loader-color: var(--c-primary-color-filled);\n}\n\n.root,\n.root *,\n.root::before,\n.root::after {\n  box-sizing: border-box;\n}\n\n@keyframes bars-loader-animation {\n  0% {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  50%,\n  100% {\n    transform: scale(1);\n  }\n}\n\n.barsLoader {\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n  display: flex;\n  gap: calc(var(--loader-size) / 5);\n}\n\n.bar {\n  flex: 1;\n  background: var(--loader-color);\n  animation: bars-loader-animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;\n  border-radius: 2px;\n\n  &:nth-of-type(1) {\n    animation-delay: -240ms;\n  }\n\n  &:nth-of-type(2) {\n    animation-delay: -120ms;\n  }\n\n  &:nth-of-type(3) {\n    animation-delay: 0;\n  }\n}\n\n@keyframes loader-dots-animation {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  50% {\n    transform: scale(0.6);\n    opacity: 0.5;\n  }\n}\n\n.dotsLoader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: calc(var(--loader-size) / 10);\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n}\n\n.dot {\n  width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  border-radius: 50%;\n  background: var(--loader-color);\n  animation: loader-dots-animation 0.8s infinite linear;\n\n  &:nth-child(2) {\n    animation-delay: 0.4s;\n  }\n}\n\n@keyframes oval-loader-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ovalLoader {\n  display: inline-block;\n  width: var(--loader-size);\n  height: var(--loader-size);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--loader-size);\n    height: var(--loader-size);\n    border-radius: 10000px;\n    border-width: calc(var(--loader-size) / 8);\n    border-style: solid;\n    border-color: var(--loader-color) var(--loader-color) var(--loader-color)\n      transparent;\n    animation: oval-loader-animation 1.2s linear infinite;\n  }\n}\n"],"mappings":";;AAAA,IAAA,wBAAe;CAAC,QAAO;CAAa,cAAa;CAAa,OAAM;CAAa,yBAAwB;CAAa,cAAa;CAAa,OAAM;CAAa,yBAAwB;CAAa,cAAa;CAAa,yBAAwB;AAAY"}