vuestic-ui
Version:
Vue 3 UI Framework
1 lines • 4.17 kB
Source Map (JSON)
{"version":3,"file":"useBem.mjs","sources":["../../../../src/composables/useBem.ts"],"sourcesContent":["import { computed, Ref, unref, ComputedRef } from 'vue'\n\nimport { isDev } from '../utils/env'\nimport { camelCaseToKebabCase } from '../utils/text-case'\n\ntype Key<Prefix extends string, ModifierKey extends string> = `${Prefix}--${ModifierKey}`\n\ntype ClassesObject<Key extends string> = Record<Key, boolean | undefined>\n\ntype ComputedClasses<Key extends string> = ClassesObject<Key> & {\n // TODO: How to remove it from spread?\n readonly asObject: ComputedRef<ClassesObject<Key>>\n readonly asArray: ComputedRef<Key[]>\n readonly asString: ComputedRef<string>\n}\n\n/**\n * @description creates BEM modifiers based on transferred prefix (base BEM class) & modifiers list.\n * camelCase modifiers names will be transformed to the kebab-case.\n * @param prefix string that classes start with (base BEM class).\n * @param modifiers list of options that will serve as state BEM modifiers.\n * @returns computed classes starting with \"prefix\" and ending with form state BEM modifier.\n * @example\n * const result = useBem('va-component', computed(() => pick(props, ['success, noError'])))\n * // if success & noError are `true`\n * { ...result }: { 'va-component--success': true, va-component--no-error: true }\n * result.asObject.value: { 'va-component--success': true, va-component--no-error: true }\n * result.asArray.value: ['va-component--success', 'va-component--no-error']\n * result.asString.value: 'va-component--success va-component--no-error'\n */\nexport const useBem = <ModifierKey extends string, Prefix extends string>(\n prefix: Prefix,\n modifiers: Record<ModifierKey, boolean | undefined> | Ref<Record<ModifierKey, boolean | undefined>> | (() => Record<ModifierKey, boolean | undefined>),\n) => {\n if (isDev && !prefix) {\n console.warn('You must pass the @param \"prefix\" to the useBem hook!')\n }\n\n const modifiersList = computed(() => typeof modifiers === 'function' ? modifiers() : unref(modifiers))\n\n const computedBemClassesObject = computed(() => {\n return Object\n .entries(unref(modifiersList))\n .reduce((classesObj: Record<string, boolean>, [modifierName, value]) => {\n if (value) { classesObj[`${prefix}--${camelCaseToKebabCase(modifierName)}`] = true }\n return classesObj\n }, {})\n })\n\n const computedBemClassesArray = computed(() => Object.keys(computedBemClassesObject.value))\n\n const computedBemClassesString = computed(() => computedBemClassesArray.value.join(' '))\n\n return new Proxy({}, {\n ownKeys () {\n return Reflect.ownKeys(computedBemClassesObject.value)\n },\n getOwnPropertyDescriptor (_, key) {\n return Reflect.getOwnPropertyDescriptor(computedBemClassesObject.value, key)\n },\n get (_, key: string, receiver: any) {\n switch (key) {\n case 'asArray':\n return computedBemClassesArray\n case 'asString':\n return computedBemClassesString\n case 'asObject':\n return computedBemClassesObject\n default:\n return Reflect.get(computedBemClassesObject.value, key, receiver)\n }\n },\n }) as ComputedClasses<Key<Prefix, ModifierKey>>\n}\n"],"names":[],"mappings":";;;AA8Ba,MAAA,SAAS,CACpB,QACA,cACG;AACC,MAAA,SAAS,CAAC,QAAQ;AACpB,YAAQ,KAAK,uDAAuD;AAAA,EACtE;AAEM,QAAA,gBAAgB,SAAS,MAAM,OAAO,cAAc,aAAa,cAAc,MAAM,SAAS,CAAC;AAE/F,QAAA,2BAA2B,SAAS,MAAM;AAC9C,WAAO,OACJ,QAAQ,MAAM,aAAa,CAAC,EAC5B,OAAO,CAAC,YAAqC,CAAC,cAAc,KAAK,MAAM;AACtE,UAAI,OAAO;AAAE,mBAAW,GAAG,MAAM,KAAK,qBAAqB,YAAY,CAAC,EAAE,IAAI;AAAA,MAAK;AAC5E,aAAA;AAAA,IACT,GAAG,CAAE,CAAA;AAAA,EAAA,CACR;AAED,QAAM,0BAA0B,SAAS,MAAM,OAAO,KAAK,yBAAyB,KAAK,CAAC;AAE1F,QAAM,2BAA2B,SAAS,MAAM,wBAAwB,MAAM,KAAK,GAAG,CAAC;AAEhF,SAAA,IAAI,MAAM,IAAI;AAAA,IACnB,UAAW;AACF,aAAA,QAAQ,QAAQ,yBAAyB,KAAK;AAAA,IACvD;AAAA,IACA,yBAA0B,GAAG,KAAK;AAChC,aAAO,QAAQ,yBAAyB,yBAAyB,OAAO,GAAG;AAAA,IAC7E;AAAA,IACA,IAAK,GAAG,KAAa,UAAe;AAClC,cAAQ,KAAK;AAAA,QACX,KAAK;AACI,iBAAA;AAAA,QACT,KAAK;AACI,iBAAA;AAAA,QACT,KAAK;AACI,iBAAA;AAAA,QACT;AACE,iBAAO,QAAQ,IAAI,yBAAyB,OAAO,KAAK,QAAQ;AAAA,MACpE;AAAA,IACF;AAAA,EAAA,CACD;AACH;"}