style: className

d2/components/d2/admin/layout/dashboard/container/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <d2-scroll ref="scrollbarRef" :class="bodyClass">
+  <d2-scroll ref="scrollbarRef" :class="bodyClassNames">
     <div class="main__inner" :style="mainInnerStyle">
       <slot/>
     </div>
   </d2-scroll>
-  <div v-if="headerActive" ref="headerRef" :class="headerClass">
+  <div v-if="headerActive" ref="headerRef" :class="headerClassNames">
     <slot name="header"/>
   </div>
-  <div v-if="footerActive" ref="footerRef" :class="footerClass">
+  <div v-if="footerActive" ref="footerRef" :class="footerClassNames">
     <slot name="footer"/>
   </div>
 </template>
@@ -51,16 +51,16 @@ export default {
       }
     })
 
-    const bodyClass = computed(() => joinClassNames('body__main', {
+    const bodyClassNames = computed(() => joinClassNames('body__main', {
       'body__main--with-header-ghost': unref(headerActive) && !props.headerBorder,
       'body__main--with-footer-ghost': unref(footerActive) && !props.footerBorder
     }))
 
-    const headerClass = computed(() => joinClassNames('body__header', 'layout-blur--body', {
+    const headerClassNames = computed(() => joinClassNames('body__header', 'layout-blur--body', {
       'body__header--border': props.headerBorder
     }))
 
-    const footerClass = computed(() => joinClassNames('body__footer', 'layout-blur--body', {
+    const footerClassNames = computed(() => joinClassNames('body__footer', 'layout-blur--body', {
       'body__footer--border': props.footerBorder
     }))
 
@@ -95,9 +95,9 @@ export default {
       headerRef,
       footerRef,
       mainInnerStyle,
-      bodyClass,
-      headerClass,
-      footerClass,
+      bodyClassNames,
+      headerClassNames,
+      footerClassNames,
       headerActive,
       footerActive
     }

d2/components/d2/admin/layout/dashboard/index.vue

@@ -54,7 +54,7 @@ import { useD2AdminUserStore } from 'd2/store/user.js'
 export default {
   name: makeNameByUrl(import.meta.url),
   setup () {
-    const classname = makeClassNameByUrl(import.meta.url)
+    const className = makeClassNameByUrl(import.meta.url)
 
     const d2AdminLayoutDashboardStore = useD2AdminLayoutDashboardStore()
     const { collapsedToggle } = d2AdminLayoutDashboardStore
@@ -73,7 +73,7 @@ export default {
     const isCustomBody = computed(() => get(route.meta, 'd2admin.layout.dashboard.customBody', false))
 
     return {
-      classname,
+      className,
       userAvatar,
       userName,
       isCustomBody,

d2/components/d2/flex/index.jsx

@@ -8,7 +8,7 @@ import { isFlexProp } from 'd2/utils/const/flex.js'
 const name = 'flex'
 
 export const componentName = makeName(name)
-export const classname = makeClassName(name)
+export const className = makeClassName(name)
 
 export default defineComponent({
   name: componentName,
@@ -39,21 +39,21 @@ export default defineComponent({
     const center = computed(() => props.center ? 'center' : '')
     const main = computed(() => unref(center) || props.main)
     const cross = computed(() => unref(center) || props.cross)
-    const classnames = computed(() => joinClassNames(
-      classname,
+    const classNames = computed(() => joinClassNames(
+      className,
       {
-        [`${classname}--inline-flex`]: props.inlineFlex,
-        [`${classname}--block`]: props.block,
-        [`${classname}--inline`]: props.inline,
-        [`${classname}--inline-block`]: props.inlineBlock,
-        [`${classname}--wrap`]: props.wrap,
-        [`${classname}--wrap-r`]: props.wrapR,
-        [`${classname}--dir-${props.dir}`]: props.dir,
-        [`${classname}--main-${unref(main)}`]: unref(main),
-        [`${classname}--cross-${unref(cross)}`]: unref(cross),
-        [`${classname}--box-${props.box}`]: props.box,
-        [`${classname}--content-${props.content}`]: props.content,
-        [`${classname}--self-${props.self}`]: props.self
+        [`${className}--inline-flex`]: props.inlineFlex,
+        [`${className}--block`]: props.block,
+        [`${className}--inline`]: props.inline,
+        [`${className}--inline-block`]: props.inlineBlock,
+        [`${className}--wrap`]: props.wrap,
+        [`${className}--wrap-r`]: props.wrapR,
+        [`${className}--dir-${props.dir}`]: props.dir,
+        [`${className}--main-${unref(main)}`]: unref(main),
+        [`${className}--cross-${unref(cross)}`]: unref(cross),
+        [`${className}--box-${props.box}`]: props.box,
+        [`${className}--content-${props.content}`]: props.content,
+        [`${className}--self-${props.self}`]: props.self
       }
     ))
     const style = computed(() => pickBy({
@@ -62,18 +62,18 @@ export default defineComponent({
       flexShrink: props.shrink
     }, value => !isUndefined(value)))
     return {
-      classnames,
+      classNames,
       style
     }
   },
   render () {
     const {
-      classnames,
+      classNames,
       style
     } = this
     const Tag = this.tag
     return (
-      <Tag class={ classnames } style={ style }>
+      <Tag class={ classNames } style={ style }>
         { this.$slots?.default?.() }
       </Tag>
     )

d2/components/d2/icon/index.jsx

@@ -8,7 +8,7 @@ import { makeName, makeClassName } from 'd2/utils/framework/component.js'
 const name = 'icon'
 
 const componentName = makeName(name)
-const classname = makeClassName(name)
+const className = makeClassName(name)
 
 export default defineComponent({
   name: componentName,
@@ -46,7 +46,7 @@ export default defineComponent({
       }
     }
 
-    const classnames = computed(() => joinClassNames(classname, {}))
+    const classNames = computed(() => joinClassNames(className, {}))
 
     onMounted(load)
     onBeforeUpdate(() => {
@@ -57,15 +57,15 @@ export default defineComponent({
 
     return {
       wrapper,
-      classnames
+      classNames
     }
   },
   render () {
     const {
-      classnames
+      classNames
     } = this
     return (
-      <span class={ classnames } ref="wrapper"/>
+      <span class={ classNames } ref="wrapper"/>
     )
   }
 })

d2/components/d2/scroll/index.jsx

@@ -31,7 +31,7 @@ export const emits = [
 const name = 'scroll'
 
 export const componentName = makeName(name)
-export const classname = makeClassName(name)
+export const className = makeClassName(name)
 
 export default defineComponent({
   name: componentName,
@@ -117,22 +117,22 @@ export default defineComponent({
     
     watch(options, reloadOptions)
     
-    const classnames = computed(() => joinClassNames(classname, attrs.class))
+    const classNames = computed(() => joinClassNames(className, attrs.class))
 
     return {
       scrollbarTarget,
       scrollbarVertical,
       scrollbarHorizontal,
-      classnames,
+      classNames,
       instance
     }
   },
   render () {
     const {
-      classnames
+      classNames
     } = this
     return (
-      <div ref="scrollbarTarget" class="os-host" class={ classnames }>
+      <div ref="scrollbarTarget" class="os-host" class={ classNames }>
         <div class="os-resize-observer-host"/>
         <div class="os-padding">
           <div class="os-viewport">

d2/components/d2/svg/index.jsx

@@ -10,7 +10,7 @@ import { componentName as configComponentName } from 'd2/components/d2/config/in
 const name = 'svg'
 
 const componentName = makeName(name)
-const classname = makeClassName(name)
+const className = makeClassName(name)
 
 export default defineComponent({
   name: componentName,
@@ -57,23 +57,23 @@ export default defineComponent({
       width: unref(width)
     }, isEmpty))
 
-    const classnames = computed(() => joinClassNames(classname, {}))
+    const classNames = computed(() => joinClassNames(className, {}))
 
     return {
       style,
-      classnames,
+      classNames,
       href
     }
   },
   render () {
     const {
       style,
-      classnames,
+      classNames,
       href
     } = this
     return (
       <svg
-        class={ classnames }
+        class={ classNames }
         style={ style }
         aria-hidden="true"
       >