@yaredfall/class-variants 0.0.1
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.
- package/build/chunk-3RDDXOQ3.js +17 -0
- package/build/chunk-3RDDXOQ3.js.map +1 -0
- package/build/chunk-DMATMZGE.js +39 -0
- package/build/chunk-DMATMZGE.js.map +1 -0
- package/build/index.cjs +68 -0
- package/build/index.cjs.map +1 -0
- package/build/index.d.cts +32 -0
- package/build/index.d.ts +32 -0
- package/build/index.js +8 -0
- package/build/index.js.map +1 -0
- package/build/utils.cjs +43 -0
- package/build/utils.cjs.map +1 -0
- package/build/utils.d.cts +12 -0
- package/build/utils.d.ts +12 -0
- package/build/utils.js +11 -0
- package/build/utils.js.map +1 -0
- package/build/vue.cjs +88 -0
- package/build/vue.cjs.map +1 -0
- package/build/vue.d.cts +18 -0
- package/build/vue.d.ts +18 -0
- package/build/vue.js +26 -0
- package/build/vue.js.map +1 -0
- package/package.json +57 -0
- package/src/index.ts +75 -0
- package/src/utils.ts +14 -0
- package/src/vue.ts +35 -0
- package/tsconfig.json +23 -0
- package/tsup.config.js +13 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// src/utils.ts
|
|
2
|
+
function getKeys(obj) {
|
|
3
|
+
return Object.keys(obj);
|
|
4
|
+
}
|
|
5
|
+
function getEntries(obj) {
|
|
6
|
+
return Object.entries(obj);
|
|
7
|
+
}
|
|
8
|
+
function getVariantsOptions(variants) {
|
|
9
|
+
return Object.fromEntries(getEntries(variants).map(([cvKey, cvVal]) => [cvKey, getKeys(cvVal)]));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export {
|
|
13
|
+
getKeys,
|
|
14
|
+
getEntries,
|
|
15
|
+
getVariantsOptions
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=chunk-3RDDXOQ3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import { CVVariantsSchema } from \".\";\r\n\r\nexport function getKeys<O extends Record<string, unknown>>(obj: O) {\r\n return Object.keys(obj) as (keyof O)[];\r\n}\r\n\r\ntype Entries<O extends Record<string, unknown>> = { [K in keyof O]: [K, O[K]] };\r\nexport function getEntries<O extends Record<string, unknown>>(obj: O) {\r\n return Object.entries(obj) as (Entries<O>[keyof Entries<O>])[];\r\n}\r\n\r\nexport function getVariantsOptions<V extends CVVariantsSchema>(variants: V) {\r\n return Object.fromEntries(getEntries(variants).map(([cvKey, cvVal]) => [cvKey, getKeys(cvVal)])) as { [K in keyof V]: (keyof V[K])[] };\r\n}\r\n"],"mappings":";AAEO,SAAS,QAA2C,KAAQ;AAC/D,SAAO,OAAO,KAAK,GAAG;AAC1B;AAGO,SAAS,WAA8C,KAAQ;AAClE,SAAO,OAAO,QAAQ,GAAG;AAC7B;AAEO,SAAS,mBAA+C,UAAa;AACxE,SAAO,OAAO,YAAY,WAAW,QAAQ,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,OAAO,QAAQ,KAAK,CAAC,CAAC,CAAC;AACnG;","names":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getEntries,
|
|
3
|
+
getKeys
|
|
4
|
+
} from "./chunk-3RDDXOQ3.js";
|
|
5
|
+
|
|
6
|
+
// src/index.ts
|
|
7
|
+
import { clsx } from "clsx";
|
|
8
|
+
var cv = (config, options = {}) => {
|
|
9
|
+
const { variants, defaultVariant, baseClass } = config;
|
|
10
|
+
const merge = options.merge ?? clsx;
|
|
11
|
+
if (variants == null) return (props) => merge(baseClass, props?.class);
|
|
12
|
+
const compoundVariants = typeof config.compoundVariants === "function" ? config.compoundVariants(variants) : config.compoundVariants;
|
|
13
|
+
return (props) => {
|
|
14
|
+
const variantClassNames = getKeys(variants).map((variant) => {
|
|
15
|
+
const variantProp = props?.[variant];
|
|
16
|
+
const defaultVariantProp = defaultVariant?.[variant];
|
|
17
|
+
const variantKey = variantProp || defaultVariantProp;
|
|
18
|
+
return variants[variant][variantKey];
|
|
19
|
+
});
|
|
20
|
+
const compoundVariantClassNames = compoundVariants?.reduce((acc, { class: cvClass, ...cvConfig }) => {
|
|
21
|
+
const shouldApplyCompoundVariant = getEntries(cvConfig).every(([cvKey, cvSelector]) => {
|
|
22
|
+
const defaultsSelector = defaultVariant?.[cvKey];
|
|
23
|
+
const propsSelector = props[cvKey];
|
|
24
|
+
if (cvSelector === true) return propsSelector !== void 0;
|
|
25
|
+
else if (cvSelector === false) return propsSelector === void 0;
|
|
26
|
+
const selector = propsSelector ?? defaultsSelector;
|
|
27
|
+
return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
|
|
28
|
+
});
|
|
29
|
+
if (shouldApplyCompoundVariant) acc.push(cvClass);
|
|
30
|
+
return acc;
|
|
31
|
+
}, new Array());
|
|
32
|
+
return merge(config?.baseClass, variantClassNames, compoundVariantClassNames, props?.class);
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export {
|
|
37
|
+
cv
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=chunk-DMATMZGE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { ClassValue, clsx } from \"clsx\";\r\nimport { Prettify } from \"ts-essentials\";\r\nimport { getEntries, getKeys } from \"./utils\";\r\n\r\nexport type VariantProps<Component extends CVReturn<CVVariantsSchema>> = Prettify<Omit<Parameters<Component>[0], \"class\">>;\r\n\r\nexport type CVVariantsSchema = Record<string, Record<string, ClassValue>>;\r\n\r\nexport type WithClassProp<T extends Record<string, unknown>> = T & {\r\n class?: ClassValue;\r\n};\r\n\r\nexport type CVCompoundVariantsSchema<V extends CVVariantsSchema> = WithClassProp<{\r\n [K in keyof V]?: (keyof V[K] & string) | (keyof V[K])[] | boolean\r\n}>[];\r\n\r\nexport interface CVConfig<V extends CVVariantsSchema> {\r\n baseClass?: ClassValue;\r\n variants?: V;\r\n compoundVariants?: CVCompoundVariantsSchema<NoInfer<V>> | ((variants: NoInfer<V>) => CVCompoundVariantsSchema<NoInfer<V>>);\r\n defaultVariant?: Partial<{ [K in keyof V]?: keyof V[K] }>;\r\n}\r\n\r\nexport type CVVariantProps<V extends CVVariantsSchema> = WithClassProp<{ [K in keyof V]?: keyof V[K] }>;\r\n\r\nexport type CVReturn<V extends CVVariantsSchema> = (props: CVVariantProps<V>) => string;\r\n\r\nexport interface CVOptions {\r\n merge?: (...args: ClassValue[]) => string;\r\n}\r\n\r\nexport interface CV {\r\n // eslint-disable-next-line @typescript-eslint/prefer-function-type\r\n <V extends CVVariantsSchema>(config: CVConfig<V>, options?: CVOptions): CVReturn<V>;\r\n}\r\n\r\nexport const cv: CV = (config, options = {}) => {\r\n const { variants, defaultVariant, baseClass } = config;\r\n\r\n const merge = options.merge ?? clsx;\r\n\r\n if (variants == null) return props => merge(baseClass, props?.class);\r\n\r\n const compoundVariants = typeof config.compoundVariants === \"function\" ? config.compoundVariants(variants) : config.compoundVariants;\r\n\r\n return (props) => {\r\n const variantClassNames = getKeys(variants).map((variant) => {\r\n const variantProp = props?.[variant];\r\n const defaultVariantProp = defaultVariant?.[variant];\r\n\r\n const variantKey = (variantProp || defaultVariantProp) as keyof (typeof variants)[typeof variant];\r\n\r\n return variants[variant][variantKey];\r\n });\r\n\r\n const compoundVariantClassNames = compoundVariants?.reduce((acc, { class: cvClass, ...cvConfig }) => {\r\n const shouldApplyCompoundVariant = getEntries(cvConfig).every(([cvKey, cvSelector]) => {\r\n const defaultsSelector = defaultVariant?.[cvKey as keyof typeof defaultVariant];\r\n const propsSelector = props[cvKey as keyof typeof props];\r\n\r\n if (cvSelector === true) return propsSelector !== undefined; // only when prop is defined\r\n else if (cvSelector === false) return propsSelector === undefined; // only when prop is not defined\r\n\r\n const selector = propsSelector ?? defaultsSelector;\r\n\r\n return Array.isArray(cvSelector) ? cvSelector.includes(selector as string) : selector === cvSelector;\r\n });\r\n\r\n if (shouldApplyCompoundVariant) acc.push(cvClass);\r\n return acc;\r\n }, new Array<ClassValue>());\r\n\r\n return merge(config?.baseClass, variantClassNames, compoundVariantClassNames, props?.class);\r\n };\r\n};\r\n"],"mappings":";;;;;;AAAA,SAAqB,YAAY;AAoC1B,IAAM,KAAS,CAAC,QAAQ,UAAU,CAAC,MAAM;AAC5C,QAAM,EAAE,UAAU,gBAAgB,UAAU,IAAI;AAEhD,QAAM,QAAQ,QAAQ,SAAS;AAE/B,MAAI,YAAY,KAAM,QAAO,WAAS,MAAM,WAAW,OAAO,KAAK;AAEnE,QAAM,mBAAmB,OAAO,OAAO,qBAAqB,aAAa,OAAO,iBAAiB,QAAQ,IAAI,OAAO;AAEpH,SAAO,CAAC,UAAU;AACd,UAAM,oBAAoB,QAAQ,QAAQ,EAAE,IAAI,CAAC,YAAY;AACzD,YAAM,cAAc,QAAQ,OAAO;AACnC,YAAM,qBAAqB,iBAAiB,OAAO;AAEnD,YAAM,aAAc,eAAe;AAEnC,aAAO,SAAS,OAAO,EAAE,UAAU;AAAA,IACvC,CAAC;AAED,UAAM,4BAA4B,kBAAkB,OAAO,CAAC,KAAK,EAAE,OAAO,SAAS,GAAG,SAAS,MAAM;AACjG,YAAM,6BAA6B,WAAW,QAAQ,EAAE,MAAM,CAAC,CAAC,OAAO,UAAU,MAAM;AACnF,cAAM,mBAAmB,iBAAiB,KAAoC;AAC9E,cAAM,gBAAgB,MAAM,KAA2B;AAEvD,YAAI,eAAe,KAAM,QAAO,kBAAkB;AAAA,iBACzC,eAAe,MAAO,QAAO,kBAAkB;AAExD,cAAM,WAAW,iBAAiB;AAElC,eAAO,MAAM,QAAQ,UAAU,IAAI,WAAW,SAAS,QAAkB,IAAI,aAAa;AAAA,MAC9F,CAAC;AAED,UAAI,2BAA4B,KAAI,KAAK,OAAO;AAChD,aAAO;AAAA,IACX,GAAG,IAAI,MAAkB,CAAC;AAE1B,WAAO,MAAM,QAAQ,WAAW,mBAAmB,2BAA2B,OAAO,KAAK;AAAA,EAC9F;AACJ;","names":[]}
|
package/build/index.cjs
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
cv: () => cv
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(src_exports);
|
|
26
|
+
var import_clsx = require("clsx");
|
|
27
|
+
|
|
28
|
+
// src/utils.ts
|
|
29
|
+
function getKeys(obj) {
|
|
30
|
+
return Object.keys(obj);
|
|
31
|
+
}
|
|
32
|
+
function getEntries(obj) {
|
|
33
|
+
return Object.entries(obj);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// src/index.ts
|
|
37
|
+
var cv = (config, options = {}) => {
|
|
38
|
+
const { variants, defaultVariant, baseClass } = config;
|
|
39
|
+
const merge = options.merge ?? import_clsx.clsx;
|
|
40
|
+
if (variants == null) return (props) => merge(baseClass, props?.class);
|
|
41
|
+
const compoundVariants = typeof config.compoundVariants === "function" ? config.compoundVariants(variants) : config.compoundVariants;
|
|
42
|
+
return (props) => {
|
|
43
|
+
const variantClassNames = getKeys(variants).map((variant) => {
|
|
44
|
+
const variantProp = props?.[variant];
|
|
45
|
+
const defaultVariantProp = defaultVariant?.[variant];
|
|
46
|
+
const variantKey = variantProp || defaultVariantProp;
|
|
47
|
+
return variants[variant][variantKey];
|
|
48
|
+
});
|
|
49
|
+
const compoundVariantClassNames = compoundVariants?.reduce((acc, { class: cvClass, ...cvConfig }) => {
|
|
50
|
+
const shouldApplyCompoundVariant = getEntries(cvConfig).every(([cvKey, cvSelector]) => {
|
|
51
|
+
const defaultsSelector = defaultVariant?.[cvKey];
|
|
52
|
+
const propsSelector = props[cvKey];
|
|
53
|
+
if (cvSelector === true) return propsSelector !== void 0;
|
|
54
|
+
else if (cvSelector === false) return propsSelector === void 0;
|
|
55
|
+
const selector = propsSelector ?? defaultsSelector;
|
|
56
|
+
return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
|
|
57
|
+
});
|
|
58
|
+
if (shouldApplyCompoundVariant) acc.push(cvClass);
|
|
59
|
+
return acc;
|
|
60
|
+
}, new Array());
|
|
61
|
+
return merge(config?.baseClass, variantClassNames, compoundVariantClassNames, props?.class);
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
65
|
+
0 && (module.exports = {
|
|
66
|
+
cv
|
|
67
|
+
});
|
|
68
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/utils.ts"],"sourcesContent":["import { ClassValue, clsx } from \"clsx\";\r\nimport { Prettify } from \"ts-essentials\";\r\nimport { getEntries, getKeys } from \"./utils\";\r\n\r\nexport type VariantProps<Component extends CVReturn<CVVariantsSchema>> = Prettify<Omit<Parameters<Component>[0], \"class\">>;\r\n\r\nexport type CVVariantsSchema = Record<string, Record<string, ClassValue>>;\r\n\r\nexport type WithClassProp<T extends Record<string, unknown>> = T & {\r\n class?: ClassValue;\r\n};\r\n\r\nexport type CVCompoundVariantsSchema<V extends CVVariantsSchema> = WithClassProp<{\r\n [K in keyof V]?: (keyof V[K] & string) | (keyof V[K])[] | boolean\r\n}>[];\r\n\r\nexport interface CVConfig<V extends CVVariantsSchema> {\r\n baseClass?: ClassValue;\r\n variants?: V;\r\n compoundVariants?: CVCompoundVariantsSchema<NoInfer<V>> | ((variants: NoInfer<V>) => CVCompoundVariantsSchema<NoInfer<V>>);\r\n defaultVariant?: Partial<{ [K in keyof V]?: keyof V[K] }>;\r\n}\r\n\r\nexport type CVVariantProps<V extends CVVariantsSchema> = WithClassProp<{ [K in keyof V]?: keyof V[K] }>;\r\n\r\nexport type CVReturn<V extends CVVariantsSchema> = (props: CVVariantProps<V>) => string;\r\n\r\nexport interface CVOptions {\r\n merge?: (...args: ClassValue[]) => string;\r\n}\r\n\r\nexport interface CV {\r\n // eslint-disable-next-line @typescript-eslint/prefer-function-type\r\n <V extends CVVariantsSchema>(config: CVConfig<V>, options?: CVOptions): CVReturn<V>;\r\n}\r\n\r\nexport const cv: CV = (config, options = {}) => {\r\n const { variants, defaultVariant, baseClass } = config;\r\n\r\n const merge = options.merge ?? clsx;\r\n\r\n if (variants == null) return props => merge(baseClass, props?.class);\r\n\r\n const compoundVariants = typeof config.compoundVariants === \"function\" ? config.compoundVariants(variants) : config.compoundVariants;\r\n\r\n return (props) => {\r\n const variantClassNames = getKeys(variants).map((variant) => {\r\n const variantProp = props?.[variant];\r\n const defaultVariantProp = defaultVariant?.[variant];\r\n\r\n const variantKey = (variantProp || defaultVariantProp) as keyof (typeof variants)[typeof variant];\r\n\r\n return variants[variant][variantKey];\r\n });\r\n\r\n const compoundVariantClassNames = compoundVariants?.reduce((acc, { class: cvClass, ...cvConfig }) => {\r\n const shouldApplyCompoundVariant = getEntries(cvConfig).every(([cvKey, cvSelector]) => {\r\n const defaultsSelector = defaultVariant?.[cvKey as keyof typeof defaultVariant];\r\n const propsSelector = props[cvKey as keyof typeof props];\r\n\r\n if (cvSelector === true) return propsSelector !== undefined; // only when prop is defined\r\n else if (cvSelector === false) return propsSelector === undefined; // only when prop is not defined\r\n\r\n const selector = propsSelector ?? defaultsSelector;\r\n\r\n return Array.isArray(cvSelector) ? cvSelector.includes(selector as string) : selector === cvSelector;\r\n });\r\n\r\n if (shouldApplyCompoundVariant) acc.push(cvClass);\r\n return acc;\r\n }, new Array<ClassValue>());\r\n\r\n return merge(config?.baseClass, variantClassNames, compoundVariantClassNames, props?.class);\r\n };\r\n};\r\n","import { CVVariantsSchema } from \".\";\r\n\r\nexport function getKeys<O extends Record<string, unknown>>(obj: O) {\r\n return Object.keys(obj) as (keyof O)[];\r\n}\r\n\r\ntype Entries<O extends Record<string, unknown>> = { [K in keyof O]: [K, O[K]] };\r\nexport function getEntries<O extends Record<string, unknown>>(obj: O) {\r\n return Object.entries(obj) as (Entries<O>[keyof Entries<O>])[];\r\n}\r\n\r\nexport function getVariantsOptions<V extends CVVariantsSchema>(variants: V) {\r\n return Object.fromEntries(getEntries(variants).map(([cvKey, cvVal]) => [cvKey, getKeys(cvVal)])) as { [K in keyof V]: (keyof V[K])[] };\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;;;ACE1B,SAAS,QAA2C,KAAQ;AAC/D,SAAO,OAAO,KAAK,GAAG;AAC1B;AAGO,SAAS,WAA8C,KAAQ;AAClE,SAAO,OAAO,QAAQ,GAAG;AAC7B;;;AD2BO,IAAM,KAAS,CAAC,QAAQ,UAAU,CAAC,MAAM;AAC5C,QAAM,EAAE,UAAU,gBAAgB,UAAU,IAAI;AAEhD,QAAM,QAAQ,QAAQ,SAAS;AAE/B,MAAI,YAAY,KAAM,QAAO,WAAS,MAAM,WAAW,OAAO,KAAK;AAEnE,QAAM,mBAAmB,OAAO,OAAO,qBAAqB,aAAa,OAAO,iBAAiB,QAAQ,IAAI,OAAO;AAEpH,SAAO,CAAC,UAAU;AACd,UAAM,oBAAoB,QAAQ,QAAQ,EAAE,IAAI,CAAC,YAAY;AACzD,YAAM,cAAc,QAAQ,OAAO;AACnC,YAAM,qBAAqB,iBAAiB,OAAO;AAEnD,YAAM,aAAc,eAAe;AAEnC,aAAO,SAAS,OAAO,EAAE,UAAU;AAAA,IACvC,CAAC;AAED,UAAM,4BAA4B,kBAAkB,OAAO,CAAC,KAAK,EAAE,OAAO,SAAS,GAAG,SAAS,MAAM;AACjG,YAAM,6BAA6B,WAAW,QAAQ,EAAE,MAAM,CAAC,CAAC,OAAO,UAAU,MAAM;AACnF,cAAM,mBAAmB,iBAAiB,KAAoC;AAC9E,cAAM,gBAAgB,MAAM,KAA2B;AAEvD,YAAI,eAAe,KAAM,QAAO,kBAAkB;AAAA,iBACzC,eAAe,MAAO,QAAO,kBAAkB;AAExD,cAAM,WAAW,iBAAiB;AAElC,eAAO,MAAM,QAAQ,UAAU,IAAI,WAAW,SAAS,QAAkB,IAAI,aAAa;AAAA,MAC9F,CAAC;AAED,UAAI,2BAA4B,KAAI,KAAK,OAAO;AAChD,aAAO;AAAA,IACX,GAAG,IAAI,MAAkB,CAAC;AAE1B,WAAO,MAAM,QAAQ,WAAW,mBAAmB,2BAA2B,OAAO,KAAK;AAAA,EAC9F;AACJ;","names":[]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import { Prettify } from 'ts-essentials';
|
|
3
|
+
|
|
4
|
+
type VariantProps<Component extends CVReturn<CVVariantsSchema>> = Prettify<Omit<Parameters<Component>[0], "class">>;
|
|
5
|
+
type CVVariantsSchema = Record<string, Record<string, ClassValue>>;
|
|
6
|
+
type WithClassProp<T extends Record<string, unknown>> = T & {
|
|
7
|
+
class?: ClassValue;
|
|
8
|
+
};
|
|
9
|
+
type CVCompoundVariantsSchema<V extends CVVariantsSchema> = WithClassProp<{
|
|
10
|
+
[K in keyof V]?: (keyof V[K] & string) | (keyof V[K])[] | boolean;
|
|
11
|
+
}>[];
|
|
12
|
+
interface CVConfig<V extends CVVariantsSchema> {
|
|
13
|
+
baseClass?: ClassValue;
|
|
14
|
+
variants?: V;
|
|
15
|
+
compoundVariants?: CVCompoundVariantsSchema<NoInfer<V>> | ((variants: NoInfer<V>) => CVCompoundVariantsSchema<NoInfer<V>>);
|
|
16
|
+
defaultVariant?: Partial<{
|
|
17
|
+
[K in keyof V]?: keyof V[K];
|
|
18
|
+
}>;
|
|
19
|
+
}
|
|
20
|
+
type CVVariantProps<V extends CVVariantsSchema> = WithClassProp<{
|
|
21
|
+
[K in keyof V]?: keyof V[K];
|
|
22
|
+
}>;
|
|
23
|
+
type CVReturn<V extends CVVariantsSchema> = (props: CVVariantProps<V>) => string;
|
|
24
|
+
interface CVOptions {
|
|
25
|
+
merge?: (...args: ClassValue[]) => string;
|
|
26
|
+
}
|
|
27
|
+
interface CV {
|
|
28
|
+
<V extends CVVariantsSchema>(config: CVConfig<V>, options?: CVOptions): CVReturn<V>;
|
|
29
|
+
}
|
|
30
|
+
declare const cv: CV;
|
|
31
|
+
|
|
32
|
+
export { type CV, type CVCompoundVariantsSchema, type CVConfig, type CVOptions, type CVReturn, type CVVariantProps, type CVVariantsSchema, type VariantProps, type WithClassProp, cv };
|
package/build/index.d.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import { Prettify } from 'ts-essentials';
|
|
3
|
+
|
|
4
|
+
type VariantProps<Component extends CVReturn<CVVariantsSchema>> = Prettify<Omit<Parameters<Component>[0], "class">>;
|
|
5
|
+
type CVVariantsSchema = Record<string, Record<string, ClassValue>>;
|
|
6
|
+
type WithClassProp<T extends Record<string, unknown>> = T & {
|
|
7
|
+
class?: ClassValue;
|
|
8
|
+
};
|
|
9
|
+
type CVCompoundVariantsSchema<V extends CVVariantsSchema> = WithClassProp<{
|
|
10
|
+
[K in keyof V]?: (keyof V[K] & string) | (keyof V[K])[] | boolean;
|
|
11
|
+
}>[];
|
|
12
|
+
interface CVConfig<V extends CVVariantsSchema> {
|
|
13
|
+
baseClass?: ClassValue;
|
|
14
|
+
variants?: V;
|
|
15
|
+
compoundVariants?: CVCompoundVariantsSchema<NoInfer<V>> | ((variants: NoInfer<V>) => CVCompoundVariantsSchema<NoInfer<V>>);
|
|
16
|
+
defaultVariant?: Partial<{
|
|
17
|
+
[K in keyof V]?: keyof V[K];
|
|
18
|
+
}>;
|
|
19
|
+
}
|
|
20
|
+
type CVVariantProps<V extends CVVariantsSchema> = WithClassProp<{
|
|
21
|
+
[K in keyof V]?: keyof V[K];
|
|
22
|
+
}>;
|
|
23
|
+
type CVReturn<V extends CVVariantsSchema> = (props: CVVariantProps<V>) => string;
|
|
24
|
+
interface CVOptions {
|
|
25
|
+
merge?: (...args: ClassValue[]) => string;
|
|
26
|
+
}
|
|
27
|
+
interface CV {
|
|
28
|
+
<V extends CVVariantsSchema>(config: CVConfig<V>, options?: CVOptions): CVReturn<V>;
|
|
29
|
+
}
|
|
30
|
+
declare const cv: CV;
|
|
31
|
+
|
|
32
|
+
export { type CV, type CVCompoundVariantsSchema, type CVConfig, type CVOptions, type CVReturn, type CVVariantProps, type CVVariantsSchema, type VariantProps, type WithClassProp, cv };
|
package/build/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/build/utils.cjs
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/utils.ts
|
|
21
|
+
var utils_exports = {};
|
|
22
|
+
__export(utils_exports, {
|
|
23
|
+
getEntries: () => getEntries,
|
|
24
|
+
getKeys: () => getKeys,
|
|
25
|
+
getVariantsOptions: () => getVariantsOptions
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(utils_exports);
|
|
28
|
+
function getKeys(obj) {
|
|
29
|
+
return Object.keys(obj);
|
|
30
|
+
}
|
|
31
|
+
function getEntries(obj) {
|
|
32
|
+
return Object.entries(obj);
|
|
33
|
+
}
|
|
34
|
+
function getVariantsOptions(variants) {
|
|
35
|
+
return Object.fromEntries(getEntries(variants).map(([cvKey, cvVal]) => [cvKey, getKeys(cvVal)]));
|
|
36
|
+
}
|
|
37
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
38
|
+
0 && (module.exports = {
|
|
39
|
+
getEntries,
|
|
40
|
+
getKeys,
|
|
41
|
+
getVariantsOptions
|
|
42
|
+
});
|
|
43
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import { CVVariantsSchema } from \".\";\r\n\r\nexport function getKeys<O extends Record<string, unknown>>(obj: O) {\r\n return Object.keys(obj) as (keyof O)[];\r\n}\r\n\r\ntype Entries<O extends Record<string, unknown>> = { [K in keyof O]: [K, O[K]] };\r\nexport function getEntries<O extends Record<string, unknown>>(obj: O) {\r\n return Object.entries(obj) as (Entries<O>[keyof Entries<O>])[];\r\n}\r\n\r\nexport function getVariantsOptions<V extends CVVariantsSchema>(variants: V) {\r\n return Object.fromEntries(getEntries(variants).map(([cvKey, cvVal]) => [cvKey, getKeys(cvVal)])) as { [K in keyof V]: (keyof V[K])[] };\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,QAA2C,KAAQ;AAC/D,SAAO,OAAO,KAAK,GAAG;AAC1B;AAGO,SAAS,WAA8C,KAAQ;AAClE,SAAO,OAAO,QAAQ,GAAG;AAC7B;AAEO,SAAS,mBAA+C,UAAa;AACxE,SAAO,OAAO,YAAY,WAAW,QAAQ,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,OAAO,QAAQ,KAAK,CAAC,CAAC,CAAC;AACnG;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CVVariantsSchema } from './index.cjs';
|
|
2
|
+
import 'clsx';
|
|
3
|
+
import 'ts-essentials';
|
|
4
|
+
|
|
5
|
+
declare function getKeys<O extends Record<string, unknown>>(obj: O): (keyof O)[];
|
|
6
|
+
type Entries<O extends Record<string, unknown>> = {
|
|
7
|
+
[K in keyof O]: [K, O[K]];
|
|
8
|
+
};
|
|
9
|
+
declare function getEntries<O extends Record<string, unknown>>(obj: O): (Entries<O>[keyof Entries<O>])[];
|
|
10
|
+
declare function getVariantsOptions<V extends CVVariantsSchema>(variants: V): { [K in keyof V]: (keyof V[K])[]; };
|
|
11
|
+
|
|
12
|
+
export { getEntries, getKeys, getVariantsOptions };
|
package/build/utils.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CVVariantsSchema } from './index.js';
|
|
2
|
+
import 'clsx';
|
|
3
|
+
import 'ts-essentials';
|
|
4
|
+
|
|
5
|
+
declare function getKeys<O extends Record<string, unknown>>(obj: O): (keyof O)[];
|
|
6
|
+
type Entries<O extends Record<string, unknown>> = {
|
|
7
|
+
[K in keyof O]: [K, O[K]];
|
|
8
|
+
};
|
|
9
|
+
declare function getEntries<O extends Record<string, unknown>>(obj: O): (Entries<O>[keyof Entries<O>])[];
|
|
10
|
+
declare function getVariantsOptions<V extends CVVariantsSchema>(variants: V): { [K in keyof V]: (keyof V[K])[]; };
|
|
11
|
+
|
|
12
|
+
export { getEntries, getKeys, getVariantsOptions };
|
package/build/utils.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/build/vue.cjs
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/vue.ts
|
|
21
|
+
var vue_exports = {};
|
|
22
|
+
__export(vue_exports, {
|
|
23
|
+
cvWithProps: () => cvWithProps
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(vue_exports);
|
|
26
|
+
|
|
27
|
+
// src/index.ts
|
|
28
|
+
var import_clsx = require("clsx");
|
|
29
|
+
|
|
30
|
+
// src/utils.ts
|
|
31
|
+
function getKeys(obj) {
|
|
32
|
+
return Object.keys(obj);
|
|
33
|
+
}
|
|
34
|
+
function getEntries(obj) {
|
|
35
|
+
return Object.entries(obj);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// src/index.ts
|
|
39
|
+
var cv = (config, options = {}) => {
|
|
40
|
+
const { variants, defaultVariant, baseClass } = config;
|
|
41
|
+
const merge = options.merge ?? import_clsx.clsx;
|
|
42
|
+
if (variants == null) return (props) => merge(baseClass, props?.class);
|
|
43
|
+
const compoundVariants = typeof config.compoundVariants === "function" ? config.compoundVariants(variants) : config.compoundVariants;
|
|
44
|
+
return (props) => {
|
|
45
|
+
const variantClassNames = getKeys(variants).map((variant) => {
|
|
46
|
+
const variantProp = props?.[variant];
|
|
47
|
+
const defaultVariantProp = defaultVariant?.[variant];
|
|
48
|
+
const variantKey = variantProp || defaultVariantProp;
|
|
49
|
+
return variants[variant][variantKey];
|
|
50
|
+
});
|
|
51
|
+
const compoundVariantClassNames = compoundVariants?.reduce((acc, { class: cvClass, ...cvConfig }) => {
|
|
52
|
+
const shouldApplyCompoundVariant = getEntries(cvConfig).every(([cvKey, cvSelector]) => {
|
|
53
|
+
const defaultsSelector = defaultVariant?.[cvKey];
|
|
54
|
+
const propsSelector = props[cvKey];
|
|
55
|
+
if (cvSelector === true) return propsSelector !== void 0;
|
|
56
|
+
else if (cvSelector === false) return propsSelector === void 0;
|
|
57
|
+
const selector = propsSelector ?? defaultsSelector;
|
|
58
|
+
return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
|
|
59
|
+
});
|
|
60
|
+
if (shouldApplyCompoundVariant) acc.push(cvClass);
|
|
61
|
+
return acc;
|
|
62
|
+
}, new Array());
|
|
63
|
+
return merge(config?.baseClass, variantClassNames, compoundVariantClassNames, props?.class);
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
// src/vue.ts
|
|
68
|
+
var cvWithProps = (config) => {
|
|
69
|
+
const getClass = cv(config);
|
|
70
|
+
if (typeof config === "undefined") {
|
|
71
|
+
return { getClass, props: {} };
|
|
72
|
+
}
|
|
73
|
+
const props = Object.fromEntries(
|
|
74
|
+
Object.keys(config).map((key) => [
|
|
75
|
+
key,
|
|
76
|
+
{
|
|
77
|
+
type: String,
|
|
78
|
+
default: config.defaultVariant?.[key]
|
|
79
|
+
}
|
|
80
|
+
])
|
|
81
|
+
);
|
|
82
|
+
return { getClass, props };
|
|
83
|
+
};
|
|
84
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
85
|
+
0 && (module.exports = {
|
|
86
|
+
cvWithProps
|
|
87
|
+
});
|
|
88
|
+
//# sourceMappingURL=vue.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/vue.ts","../src/index.ts","../src/utils.ts"],"sourcesContent":["import { cv, CVConfig, CVReturn, CVVariantsSchema } from \".\";\r\nimport { Prettify } from \"ts-essentials\";\r\nimport { type Prop } from \"vue\";\r\n\r\ntype PropsDeclaration<V extends CVVariantsSchema> = Prettify<{ [K in keyof V]: Prop<keyof V[K]> }>;\r\n\r\nexport interface CVWithPropsReturn<V extends CVVariantsSchema> {\r\n getClass: CVReturn<V>;\r\n props: PropsDeclaration<V>;\r\n}\r\n\r\nexport interface CVWithProps {\r\n // eslint-disable-next-line @typescript-eslint/prefer-function-type\r\n <V extends CVVariantsSchema>(config: CVConfig<V>): CVWithPropsReturn<V>;\r\n}\r\n\r\nexport const cvWithProps = ((config) => {\r\n const getClass = cv(config);\r\n\r\n if (typeof config === \"undefined\") {\r\n return { getClass, props: {} };\r\n }\r\n\r\n const props = Object.fromEntries(\r\n Object.keys(config).map(key => [\r\n key,\r\n {\r\n type: String,\r\n default: config.defaultVariant?.[key],\r\n },\r\n ]),\r\n );\r\n\r\n return { getClass, props };\r\n}) as CVWithProps;\r\n","import { ClassValue, clsx } from \"clsx\";\r\nimport { Prettify } from \"ts-essentials\";\r\nimport { getEntries, getKeys } from \"./utils\";\r\n\r\nexport type VariantProps<Component extends CVReturn<CVVariantsSchema>> = Prettify<Omit<Parameters<Component>[0], \"class\">>;\r\n\r\nexport type CVVariantsSchema = Record<string, Record<string, ClassValue>>;\r\n\r\nexport type WithClassProp<T extends Record<string, unknown>> = T & {\r\n class?: ClassValue;\r\n};\r\n\r\nexport type CVCompoundVariantsSchema<V extends CVVariantsSchema> = WithClassProp<{\r\n [K in keyof V]?: (keyof V[K] & string) | (keyof V[K])[] | boolean\r\n}>[];\r\n\r\nexport interface CVConfig<V extends CVVariantsSchema> {\r\n baseClass?: ClassValue;\r\n variants?: V;\r\n compoundVariants?: CVCompoundVariantsSchema<NoInfer<V>> | ((variants: NoInfer<V>) => CVCompoundVariantsSchema<NoInfer<V>>);\r\n defaultVariant?: Partial<{ [K in keyof V]?: keyof V[K] }>;\r\n}\r\n\r\nexport type CVVariantProps<V extends CVVariantsSchema> = WithClassProp<{ [K in keyof V]?: keyof V[K] }>;\r\n\r\nexport type CVReturn<V extends CVVariantsSchema> = (props: CVVariantProps<V>) => string;\r\n\r\nexport interface CVOptions {\r\n merge?: (...args: ClassValue[]) => string;\r\n}\r\n\r\nexport interface CV {\r\n // eslint-disable-next-line @typescript-eslint/prefer-function-type\r\n <V extends CVVariantsSchema>(config: CVConfig<V>, options?: CVOptions): CVReturn<V>;\r\n}\r\n\r\nexport const cv: CV = (config, options = {}) => {\r\n const { variants, defaultVariant, baseClass } = config;\r\n\r\n const merge = options.merge ?? clsx;\r\n\r\n if (variants == null) return props => merge(baseClass, props?.class);\r\n\r\n const compoundVariants = typeof config.compoundVariants === \"function\" ? config.compoundVariants(variants) : config.compoundVariants;\r\n\r\n return (props) => {\r\n const variantClassNames = getKeys(variants).map((variant) => {\r\n const variantProp = props?.[variant];\r\n const defaultVariantProp = defaultVariant?.[variant];\r\n\r\n const variantKey = (variantProp || defaultVariantProp) as keyof (typeof variants)[typeof variant];\r\n\r\n return variants[variant][variantKey];\r\n });\r\n\r\n const compoundVariantClassNames = compoundVariants?.reduce((acc, { class: cvClass, ...cvConfig }) => {\r\n const shouldApplyCompoundVariant = getEntries(cvConfig).every(([cvKey, cvSelector]) => {\r\n const defaultsSelector = defaultVariant?.[cvKey as keyof typeof defaultVariant];\r\n const propsSelector = props[cvKey as keyof typeof props];\r\n\r\n if (cvSelector === true) return propsSelector !== undefined; // only when prop is defined\r\n else if (cvSelector === false) return propsSelector === undefined; // only when prop is not defined\r\n\r\n const selector = propsSelector ?? defaultsSelector;\r\n\r\n return Array.isArray(cvSelector) ? cvSelector.includes(selector as string) : selector === cvSelector;\r\n });\r\n\r\n if (shouldApplyCompoundVariant) acc.push(cvClass);\r\n return acc;\r\n }, new Array<ClassValue>());\r\n\r\n return merge(config?.baseClass, variantClassNames, compoundVariantClassNames, props?.class);\r\n };\r\n};\r\n","import { CVVariantsSchema } from \".\";\r\n\r\nexport function getKeys<O extends Record<string, unknown>>(obj: O) {\r\n return Object.keys(obj) as (keyof O)[];\r\n}\r\n\r\ntype Entries<O extends Record<string, unknown>> = { [K in keyof O]: [K, O[K]] };\r\nexport function getEntries<O extends Record<string, unknown>>(obj: O) {\r\n return Object.entries(obj) as (Entries<O>[keyof Entries<O>])[];\r\n}\r\n\r\nexport function getVariantsOptions<V extends CVVariantsSchema>(variants: V) {\r\n return Object.fromEntries(getEntries(variants).map(([cvKey, cvVal]) => [cvKey, getKeys(cvVal)])) as { [K in keyof V]: (keyof V[K])[] };\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAiC;;;ACE1B,SAAS,QAA2C,KAAQ;AAC/D,SAAO,OAAO,KAAK,GAAG;AAC1B;AAGO,SAAS,WAA8C,KAAQ;AAClE,SAAO,OAAO,QAAQ,GAAG;AAC7B;;;AD2BO,IAAM,KAAS,CAAC,QAAQ,UAAU,CAAC,MAAM;AAC5C,QAAM,EAAE,UAAU,gBAAgB,UAAU,IAAI;AAEhD,QAAM,QAAQ,QAAQ,SAAS;AAE/B,MAAI,YAAY,KAAM,QAAO,WAAS,MAAM,WAAW,OAAO,KAAK;AAEnE,QAAM,mBAAmB,OAAO,OAAO,qBAAqB,aAAa,OAAO,iBAAiB,QAAQ,IAAI,OAAO;AAEpH,SAAO,CAAC,UAAU;AACd,UAAM,oBAAoB,QAAQ,QAAQ,EAAE,IAAI,CAAC,YAAY;AACzD,YAAM,cAAc,QAAQ,OAAO;AACnC,YAAM,qBAAqB,iBAAiB,OAAO;AAEnD,YAAM,aAAc,eAAe;AAEnC,aAAO,SAAS,OAAO,EAAE,UAAU;AAAA,IACvC,CAAC;AAED,UAAM,4BAA4B,kBAAkB,OAAO,CAAC,KAAK,EAAE,OAAO,SAAS,GAAG,SAAS,MAAM;AACjG,YAAM,6BAA6B,WAAW,QAAQ,EAAE,MAAM,CAAC,CAAC,OAAO,UAAU,MAAM;AACnF,cAAM,mBAAmB,iBAAiB,KAAoC;AAC9E,cAAM,gBAAgB,MAAM,KAA2B;AAEvD,YAAI,eAAe,KAAM,QAAO,kBAAkB;AAAA,iBACzC,eAAe,MAAO,QAAO,kBAAkB;AAExD,cAAM,WAAW,iBAAiB;AAElC,eAAO,MAAM,QAAQ,UAAU,IAAI,WAAW,SAAS,QAAkB,IAAI,aAAa;AAAA,MAC9F,CAAC;AAED,UAAI,2BAA4B,KAAI,KAAK,OAAO;AAChD,aAAO;AAAA,IACX,GAAG,IAAI,MAAkB,CAAC;AAE1B,WAAO,MAAM,QAAQ,WAAW,mBAAmB,2BAA2B,OAAO,KAAK;AAAA,EAC9F;AACJ;;;AD1DO,IAAM,cAAe,CAAC,WAAW;AACpC,QAAM,WAAW,GAAG,MAAM;AAE1B,MAAI,OAAO,WAAW,aAAa;AAC/B,WAAO,EAAE,UAAU,OAAO,CAAC,EAAE;AAAA,EACjC;AAEA,QAAM,QAAQ,OAAO;AAAA,IACjB,OAAO,KAAK,MAAM,EAAE,IAAI,SAAO;AAAA,MAC3B;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS,OAAO,iBAAiB,GAAG;AAAA,MACxC;AAAA,IACJ,CAAC;AAAA,EACL;AAEA,SAAO,EAAE,UAAU,MAAM;AAC7B;","names":[]}
|
package/build/vue.d.cts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { CVVariantsSchema, CVReturn, CVConfig } from './index.cjs';
|
|
2
|
+
import { Prettify } from 'ts-essentials';
|
|
3
|
+
import { Prop } from 'vue';
|
|
4
|
+
import 'clsx';
|
|
5
|
+
|
|
6
|
+
type PropsDeclaration<V extends CVVariantsSchema> = Prettify<{
|
|
7
|
+
[K in keyof V]: Prop<keyof V[K]>;
|
|
8
|
+
}>;
|
|
9
|
+
interface CVWithPropsReturn<V extends CVVariantsSchema> {
|
|
10
|
+
getClass: CVReturn<V>;
|
|
11
|
+
props: PropsDeclaration<V>;
|
|
12
|
+
}
|
|
13
|
+
interface CVWithProps {
|
|
14
|
+
<V extends CVVariantsSchema>(config: CVConfig<V>): CVWithPropsReturn<V>;
|
|
15
|
+
}
|
|
16
|
+
declare const cvWithProps: CVWithProps;
|
|
17
|
+
|
|
18
|
+
export { type CVWithProps, type CVWithPropsReturn, cvWithProps };
|
package/build/vue.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { CVVariantsSchema, CVReturn, CVConfig } from './index.js';
|
|
2
|
+
import { Prettify } from 'ts-essentials';
|
|
3
|
+
import { Prop } from 'vue';
|
|
4
|
+
import 'clsx';
|
|
5
|
+
|
|
6
|
+
type PropsDeclaration<V extends CVVariantsSchema> = Prettify<{
|
|
7
|
+
[K in keyof V]: Prop<keyof V[K]>;
|
|
8
|
+
}>;
|
|
9
|
+
interface CVWithPropsReturn<V extends CVVariantsSchema> {
|
|
10
|
+
getClass: CVReturn<V>;
|
|
11
|
+
props: PropsDeclaration<V>;
|
|
12
|
+
}
|
|
13
|
+
interface CVWithProps {
|
|
14
|
+
<V extends CVVariantsSchema>(config: CVConfig<V>): CVWithPropsReturn<V>;
|
|
15
|
+
}
|
|
16
|
+
declare const cvWithProps: CVWithProps;
|
|
17
|
+
|
|
18
|
+
export { type CVWithProps, type CVWithPropsReturn, cvWithProps };
|
package/build/vue.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cv
|
|
3
|
+
} from "./chunk-DMATMZGE.js";
|
|
4
|
+
import "./chunk-3RDDXOQ3.js";
|
|
5
|
+
|
|
6
|
+
// src/vue.ts
|
|
7
|
+
var cvWithProps = (config) => {
|
|
8
|
+
const getClass = cv(config);
|
|
9
|
+
if (typeof config === "undefined") {
|
|
10
|
+
return { getClass, props: {} };
|
|
11
|
+
}
|
|
12
|
+
const props = Object.fromEntries(
|
|
13
|
+
Object.keys(config).map((key) => [
|
|
14
|
+
key,
|
|
15
|
+
{
|
|
16
|
+
type: String,
|
|
17
|
+
default: config.defaultVariant?.[key]
|
|
18
|
+
}
|
|
19
|
+
])
|
|
20
|
+
);
|
|
21
|
+
return { getClass, props };
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
cvWithProps
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=vue.js.map
|
package/build/vue.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/vue.ts"],"sourcesContent":["import { cv, CVConfig, CVReturn, CVVariantsSchema } from \".\";\r\nimport { Prettify } from \"ts-essentials\";\r\nimport { type Prop } from \"vue\";\r\n\r\ntype PropsDeclaration<V extends CVVariantsSchema> = Prettify<{ [K in keyof V]: Prop<keyof V[K]> }>;\r\n\r\nexport interface CVWithPropsReturn<V extends CVVariantsSchema> {\r\n getClass: CVReturn<V>;\r\n props: PropsDeclaration<V>;\r\n}\r\n\r\nexport interface CVWithProps {\r\n // eslint-disable-next-line @typescript-eslint/prefer-function-type\r\n <V extends CVVariantsSchema>(config: CVConfig<V>): CVWithPropsReturn<V>;\r\n}\r\n\r\nexport const cvWithProps = ((config) => {\r\n const getClass = cv(config);\r\n\r\n if (typeof config === \"undefined\") {\r\n return { getClass, props: {} };\r\n }\r\n\r\n const props = Object.fromEntries(\r\n Object.keys(config).map(key => [\r\n key,\r\n {\r\n type: String,\r\n default: config.defaultVariant?.[key],\r\n },\r\n ]),\r\n );\r\n\r\n return { getClass, props };\r\n}) as CVWithProps;\r\n"],"mappings":";;;;;;AAgBO,IAAM,cAAe,CAAC,WAAW;AACpC,QAAM,WAAW,GAAG,MAAM;AAE1B,MAAI,OAAO,WAAW,aAAa;AAC/B,WAAO,EAAE,UAAU,OAAO,CAAC,EAAE;AAAA,EACjC;AAEA,QAAM,QAAQ,OAAO;AAAA,IACjB,OAAO,KAAK,MAAM,EAAE,IAAI,SAAO;AAAA,MAC3B;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS,OAAO,iBAAiB,GAAG;AAAA,MACxC;AAAA,IACJ,CAAC;AAAA,EACL;AAEA,SAAO,EAAE,UAAU,MAAM;AAC7B;","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@yaredfall/class-variants",
|
|
3
|
+
"author": "yaredfall",
|
|
4
|
+
"private": false,
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public"
|
|
7
|
+
},
|
|
8
|
+
"version": "0.0.1",
|
|
9
|
+
"type": "module",
|
|
10
|
+
"main": "build/index.cjs",
|
|
11
|
+
"module": "build/index.js",
|
|
12
|
+
"types": "build/index.d.ts",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"import": {
|
|
16
|
+
"types": "./build/index.d.ts",
|
|
17
|
+
"default": "./build/index.js"
|
|
18
|
+
},
|
|
19
|
+
"require": {
|
|
20
|
+
"types": "./build/index.d.cts",
|
|
21
|
+
"default": "./build/index.cjs"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"./utils": {
|
|
25
|
+
"import": {
|
|
26
|
+
"types": "./build/utils.d.ts",
|
|
27
|
+
"default": "./build/utils.js"
|
|
28
|
+
},
|
|
29
|
+
"require": {
|
|
30
|
+
"types": "./build/utils.d.cts",
|
|
31
|
+
"default": "./build/utils.cjs"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"./vue": {
|
|
35
|
+
"import": {
|
|
36
|
+
"types": "./build/vue.d.ts",
|
|
37
|
+
"default": "./build/vue.js"
|
|
38
|
+
},
|
|
39
|
+
"require": {
|
|
40
|
+
"types": "./build/vue.d.cts",
|
|
41
|
+
"default": "./build/vue.cjs"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"./package.json": "./package.json"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build": "tsc && tsup"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"tsup": "^8.1.0",
|
|
51
|
+
"typescript": "^5.2.2",
|
|
52
|
+
"vue": "^3.4.29"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"clsx": "^2.1.1"
|
|
56
|
+
}
|
|
57
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { ClassValue, clsx } from "clsx";
|
|
2
|
+
import { Prettify } from "ts-essentials";
|
|
3
|
+
import { getEntries, getKeys } from "./utils";
|
|
4
|
+
|
|
5
|
+
export type VariantProps<Component extends CVReturn<CVVariantsSchema>> = Prettify<Omit<Parameters<Component>[0], "class">>;
|
|
6
|
+
|
|
7
|
+
export type CVVariantsSchema = Record<string, Record<string, ClassValue>>;
|
|
8
|
+
|
|
9
|
+
export type WithClassProp<T extends Record<string, unknown>> = T & {
|
|
10
|
+
class?: ClassValue;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export type CVCompoundVariantsSchema<V extends CVVariantsSchema> = WithClassProp<{
|
|
14
|
+
[K in keyof V]?: (keyof V[K] & string) | (keyof V[K])[] | boolean
|
|
15
|
+
}>[];
|
|
16
|
+
|
|
17
|
+
export interface CVConfig<V extends CVVariantsSchema> {
|
|
18
|
+
baseClass?: ClassValue;
|
|
19
|
+
variants?: V;
|
|
20
|
+
compoundVariants?: CVCompoundVariantsSchema<NoInfer<V>> | ((variants: NoInfer<V>) => CVCompoundVariantsSchema<NoInfer<V>>);
|
|
21
|
+
defaultVariant?: Partial<{ [K in keyof V]?: keyof V[K] }>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export type CVVariantProps<V extends CVVariantsSchema> = WithClassProp<{ [K in keyof V]?: keyof V[K] }>;
|
|
25
|
+
|
|
26
|
+
export type CVReturn<V extends CVVariantsSchema> = (props: CVVariantProps<V>) => string;
|
|
27
|
+
|
|
28
|
+
export interface CVOptions {
|
|
29
|
+
merge?: (...args: ClassValue[]) => string;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export interface CV {
|
|
33
|
+
// eslint-disable-next-line @typescript-eslint/prefer-function-type
|
|
34
|
+
<V extends CVVariantsSchema>(config: CVConfig<V>, options?: CVOptions): CVReturn<V>;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export const cv: CV = (config, options = {}) => {
|
|
38
|
+
const { variants, defaultVariant, baseClass } = config;
|
|
39
|
+
|
|
40
|
+
const merge = options.merge ?? clsx;
|
|
41
|
+
|
|
42
|
+
if (variants == null) return props => merge(baseClass, props?.class);
|
|
43
|
+
|
|
44
|
+
const compoundVariants = typeof config.compoundVariants === "function" ? config.compoundVariants(variants) : config.compoundVariants;
|
|
45
|
+
|
|
46
|
+
return (props) => {
|
|
47
|
+
const variantClassNames = getKeys(variants).map((variant) => {
|
|
48
|
+
const variantProp = props?.[variant];
|
|
49
|
+
const defaultVariantProp = defaultVariant?.[variant];
|
|
50
|
+
|
|
51
|
+
const variantKey = (variantProp || defaultVariantProp) as keyof (typeof variants)[typeof variant];
|
|
52
|
+
|
|
53
|
+
return variants[variant][variantKey];
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
const compoundVariantClassNames = compoundVariants?.reduce((acc, { class: cvClass, ...cvConfig }) => {
|
|
57
|
+
const shouldApplyCompoundVariant = getEntries(cvConfig).every(([cvKey, cvSelector]) => {
|
|
58
|
+
const defaultsSelector = defaultVariant?.[cvKey as keyof typeof defaultVariant];
|
|
59
|
+
const propsSelector = props[cvKey as keyof typeof props];
|
|
60
|
+
|
|
61
|
+
if (cvSelector === true) return propsSelector !== undefined; // only when prop is defined
|
|
62
|
+
else if (cvSelector === false) return propsSelector === undefined; // only when prop is not defined
|
|
63
|
+
|
|
64
|
+
const selector = propsSelector ?? defaultsSelector;
|
|
65
|
+
|
|
66
|
+
return Array.isArray(cvSelector) ? cvSelector.includes(selector as string) : selector === cvSelector;
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
if (shouldApplyCompoundVariant) acc.push(cvClass);
|
|
70
|
+
return acc;
|
|
71
|
+
}, new Array<ClassValue>());
|
|
72
|
+
|
|
73
|
+
return merge(config?.baseClass, variantClassNames, compoundVariantClassNames, props?.class);
|
|
74
|
+
};
|
|
75
|
+
};
|
package/src/utils.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { CVVariantsSchema } from ".";
|
|
2
|
+
|
|
3
|
+
export function getKeys<O extends Record<string, unknown>>(obj: O) {
|
|
4
|
+
return Object.keys(obj) as (keyof O)[];
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
type Entries<O extends Record<string, unknown>> = { [K in keyof O]: [K, O[K]] };
|
|
8
|
+
export function getEntries<O extends Record<string, unknown>>(obj: O) {
|
|
9
|
+
return Object.entries(obj) as (Entries<O>[keyof Entries<O>])[];
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function getVariantsOptions<V extends CVVariantsSchema>(variants: V) {
|
|
13
|
+
return Object.fromEntries(getEntries(variants).map(([cvKey, cvVal]) => [cvKey, getKeys(cvVal)])) as { [K in keyof V]: (keyof V[K])[] };
|
|
14
|
+
}
|
package/src/vue.ts
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { cv, CVConfig, CVReturn, CVVariantsSchema } from ".";
|
|
2
|
+
import { Prettify } from "ts-essentials";
|
|
3
|
+
import { type Prop } from "vue";
|
|
4
|
+
|
|
5
|
+
type PropsDeclaration<V extends CVVariantsSchema> = Prettify<{ [K in keyof V]: Prop<keyof V[K]> }>;
|
|
6
|
+
|
|
7
|
+
export interface CVWithPropsReturn<V extends CVVariantsSchema> {
|
|
8
|
+
getClass: CVReturn<V>;
|
|
9
|
+
props: PropsDeclaration<V>;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface CVWithProps {
|
|
13
|
+
// eslint-disable-next-line @typescript-eslint/prefer-function-type
|
|
14
|
+
<V extends CVVariantsSchema>(config: CVConfig<V>): CVWithPropsReturn<V>;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const cvWithProps = ((config) => {
|
|
18
|
+
const getClass = cv(config);
|
|
19
|
+
|
|
20
|
+
if (typeof config === "undefined") {
|
|
21
|
+
return { getClass, props: {} };
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const props = Object.fromEntries(
|
|
25
|
+
Object.keys(config).map(key => [
|
|
26
|
+
key,
|
|
27
|
+
{
|
|
28
|
+
type: String,
|
|
29
|
+
default: config.defaultVariant?.[key],
|
|
30
|
+
},
|
|
31
|
+
]),
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
return { getClass, props };
|
|
35
|
+
}) as CVWithProps;
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
|
|
9
|
+
/* Bundler mode */
|
|
10
|
+
"moduleResolution": "bundler",
|
|
11
|
+
"allowImportingTsExtensions": true,
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"isolatedModules": true,
|
|
14
|
+
"noEmit": true,
|
|
15
|
+
|
|
16
|
+
/* Linting */
|
|
17
|
+
"strict": true,
|
|
18
|
+
"noUnusedLocals": true,
|
|
19
|
+
"noUnusedParameters": true,
|
|
20
|
+
"noFallthroughCasesInSwitch": true
|
|
21
|
+
},
|
|
22
|
+
"include": ["src"]
|
|
23
|
+
}
|
package/tsup.config.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { defineConfig } from "tsup";
|
|
2
|
+
|
|
3
|
+
export default defineConfig(
|
|
4
|
+
{
|
|
5
|
+
entry: ["src/*.ts"],
|
|
6
|
+
format: ["cjs", "esm"],
|
|
7
|
+
target: ["chrome91", "firefox90", "edge91", "safari15", "ios15", "opera77"],
|
|
8
|
+
outDir: "build",
|
|
9
|
+
dts: true,
|
|
10
|
+
sourcemap: true,
|
|
11
|
+
clean: true,
|
|
12
|
+
},
|
|
13
|
+
);
|