initial

layers/ui/composables/use-classname.ts

@@ -0,0 +1,63 @@
+const namespace = 'ui'
+const statePrefix = 'is-'
+
+function _bem(namespace: string, block: string, blockSuffix: string, element: string, modifier: string) {
+  let cls = `${block}`
+  if (blockSuffix)
+    cls += `-${blockSuffix}`
+
+  if (element)
+    cls += `__${element}`
+
+  if (modifier)
+    cls += `--${modifier}`
+
+  return cls
+}
+
+export default (block: string) => {
+  const b = (blockSuffix: string = '') => _bem(namespace, block, blockSuffix, '', '')
+  const e = (element: string) =>
+    element ? _bem(namespace, block, '', element, '') : ''
+  const m = (modifier: string) =>
+    modifier ? _bem(namespace, block, '', '', modifier) : ''
+  const be = (blockSuffix: string, element: string) =>
+    blockSuffix && element
+      ? _bem(namespace, block, blockSuffix, element, '')
+      : ''
+  const em = (element: string, modifier: string) =>
+    element && modifier ? _bem(namespace, block, '', element, modifier) : ''
+  const bm = (blockSuffix: string, modifier: string) =>
+    blockSuffix && modifier
+      ? _bem(namespace, block, blockSuffix, '', modifier)
+      : ''
+  const bem = (blockSuffix: string, element: string, modifier: string) =>
+    blockSuffix && element && modifier
+      ? _bem(namespace, block, blockSuffix, element, modifier)
+      : ''
+  const is = (name: string, ...args: any[]) => {
+    const state = args.length >= 1 ? args[0] : true
+    return name && state ? `${statePrefix}${name}` : ''
+  }
+  const has = (name: string, ...args: any[]) => {
+    const state = args.length >= 1 ? args[0] : true
+    return name && state ? `has-${name}` : ''
+  }
+  const exp = (condition: boolean, trueState: string, falseState: string = '') => {
+    return condition ? trueState : falseState
+  }
+
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    has,
+    exp,
+  }
+}