wip: refine docs & code

docs/src/pages/components/button.md

@@ -1,5 +1,12 @@
+<route lang="yml">
+meta:
+  category: actions
+</route>
+
 # Button
 
+Buttons allow the user to take actions or make choices.
+
 ## Examples
 
 button with brand colors
@@ -223,7 +230,7 @@ button doesn't have click animation
 button group size
 
 ```html :::demo
-<div class="space-y-2">
+<div class="flex flex-col items-center space-y-2">
   <dv-button-group>
     <dv-button variant="info">info</dv-button>
     <dv-button variant="warning">warning</dv-button>
@@ -241,13 +248,7 @@ button group size
 button group shape
 
 ```html :::demo
-<div class="space-y-2">
-  <dv-button-group size="sm" shape="circle">
-    <dv-button variant="info">A</dv-button>
-    <dv-button variant="warning">B</dv-button>
-    <dv-button variant="error">C</dv-button>
-  </dv-button-group>
-
+<div class="flex flex-col items-center space-y-2">
   <dv-button-group size="sm" shape="square">
     <dv-button variant="info">A</dv-button>
     <dv-button variant="warning">B</dv-button>

docs/src/pages/components/loading.md

@@ -9,7 +9,7 @@ Loading shows an animation to indicate that something is loading.
 
 ## Examples
 
-loading spinner
+Loading spinner
 
 ```html :::demo
 <div class="flex items-center space-x-2">
@@ -20,7 +20,7 @@ loading spinner
 </div>
 ```
 
-loading dots
+Loading dots
 
 ```html :::demo
 <div class="flex items-center space-x-2">
@@ -31,7 +31,7 @@ loading dots
 </div>
 ```
 
-loading ring
+Loading ring
 
 ```html :::demo
 <div class="flex items-center space-x-2">
@@ -42,7 +42,7 @@ loading ring
 </div>
 ```
 
-loading ball
+Loading ball
 
 ```html :::demo
 <div class="flex items-center space-x-2">
@@ -53,7 +53,7 @@ loading ball
 </div>
 ```
 
-loading bars
+Loading bars
 
 ```html :::demo
 <div class="flex items-center space-x-2">
@@ -64,7 +64,7 @@ loading bars
 </div>
 ```
 
-loading infinity
+Loading infinity
 
 ```html :::demo
 <div class="flex items-center space-x-2">
@@ -75,7 +75,7 @@ loading infinity
 </div>
 ```
 
-loading with colors
+Loading with colors
 
 ```html :::demo
 <div class="flex items-center space-x-2">

src/components/button/button-group.tsx

@@ -4,7 +4,7 @@ import { ctxKey, ICtx } from './state';
 import { IButtonShape } from './button';
 import { componentV2 } from 'daisyui-vue/shared/styled';
 import style from './style';
-import { useTheme } from 'daisyui-vue/shared/ctx';
+import { Join } from '../join';
 
 export const buttonGroupProps = {
   outline: Boolean,
@@ -24,7 +24,6 @@ export const ButtonGroup = componentV2<IButtonGroupProps, HTMLAttributes>(
     name: 'ButtonGroup',
     props: buttonGroupProps,
     setup: (props, { slots }) => {
-      const theme = useTheme();
       const ctxVal = computed<ICtx>(() => ({
         size: props.size || 'md',
         shape: props.shape || 'defalut',
@@ -33,9 +32,7 @@ export const ButtonGroup = componentV2<IButtonGroupProps, HTMLAttributes>(
 
       provide(ctxKey, ctxVal);
 
-      return () => (
-        <div class={[theme.className, 'dv-btn-group']}>{slots.default?.()}</div>
-      );
+      return () => <Join class={__c`dv-btn-group`}>{slots.default?.()}</Join>;
     },
   },
   style,

src/components/join/index.tsx

@@ -3,6 +3,7 @@ import styles from './styles';
 import { flatUntilNotFragment } from 'daisyui-vue/shared/utils';
 import { HTMLAttributes, cloneVNode, computed, isVNode } from 'vue';
 import { ExtractFromProps } from 'daisyui-vue/shared/types/common';
+import { useTheme } from 'daisyui-vue/shared/ctx';
 
 export const joinProps = {
   vertical: Boolean,
@@ -15,20 +16,22 @@ export const Join = componentV2<IJoinProps, HTMLAttributes>(
     name: 'Join',
     props: joinProps,
     setup: (props, { slots }) => {
-      const cls = computed(() => [
-        'dv-join',
-        `dv-join-${props.vertical ? 'vertical' : 'horizontal'}`,
-      ]);
+      const theme = useTheme();
+      const cls = computed(() =>
+        __c(
+          theme.className,
+          'join',
+          `join-${props.vertical ? 'vertical' : 'horizontal'}`,
+        ),
+      );
       return () => (
         <div class={cls.value}>
           {flatUntilNotFragment(slots.default?.()).map((it) =>
-            isVNode(it) ? (
-              cloneVNode(it, {
-                class: 'dv-join-item',
-              })
-            ) : (
-              <div class="dv-join-item">{it}</div>
-            ),
+            isVNode(it)
+              ? cloneVNode(it, {
+                  class: __c`join-item`,
+                })
+              : null,
           )}
         </div>
       );

src/components/join/styles/c-s.css

@@ -1,4 +1,4 @@
-.dv-join {
+.join {
   @apply rounded-btn;
   & > :where(*:not(:first-child)) {
     @apply -ml-px my-0;

src/components/join/styles/c-us.css

@@ -1,39 +1,39 @@
-.dv-join {
+.join {
   @apply inline-flex items-stretch;
-  & :where(.dv-join-item) {
+  & :where(.join-item) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
-  & .dv-join-item:not(:first-child):not(:last-child),
-  & *:not(:first-child):not(:last-child) .dv-join-item {
+  & .join-item:not(:first-child):not(:last-child),
+  & *:not(:first-child):not(:last-child) .join-item {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  & .dv-join-item:first-child:not(:last-child),
-  & *:first-child:not(:last-child) .dv-join-item {
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  & :where(.dv-join-item:first-child:not(:last-child)),
-  & :where(*:first-child:not(:last-child) .dv-join-item) {
+  & :where(.join-item:first-child:not(:last-child)),
+  & :where(*:first-child:not(:last-child) .join-item) {
     border-bottom-left-radius: inherit;
     border-top-left-radius: inherit;
   }
 
-  & .dv-join-item:last-child:not(:first-child),
-  & *:last-child:not(:first-child) .dv-join-item {
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  & :where(.dv-join-item:last-child:not(:first-child)),
-  & :where(*:last-child:not(:first-child) .dv-join-item) {
+  & :where(.join-item:last-child:not(:first-child)),
+  & :where(*:last-child:not(:first-child) .join-item) {
     border-top-right-radius: inherit;
     border-bottom-right-radius: inherit;
   }

src/components/join/styles/u-s.css

@@ -1,6 +1,6 @@
-.dv-join.dv-join-vertical > :where(*:not(:first-child)) {
+.join.join-vertical > :where(*:not(:first-child)) {
   @apply -mt-px mx-0;
 }
-.dv-join.dv-join-horizontal > :where(*:not(:first-child)) {
+.join.join-horizontal > :where(*:not(:first-child)) {
   @apply -ml-px my-0;
 }

src/components/join/styles/u-us.css

@@ -1,46 +1,46 @@
-.dv-join.dv-join-vertical {
+.join.join-vertical {
   @apply flex-col;
-  & .dv-join-item:first-child:not(:last-child),
-  & *:first-child:not(:last-child) .dv-join-item {
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  & .dv-join-item:first-child:not(:last-child),
-  & *:first-child:not(:last-child) .dv-join-item {
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
   }
-  & .dv-join-item:last-child:not(:first-child),
-  & *:last-child:not(:first-child) .dv-join-item {
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
-  & .dv-join-item:last-child:not(:first-child),
-  & *:last-child:not(:first-child) .dv-join-item {
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }
 }
 
-.dv-join.dv-join-horizontal {
+.join.join-horizontal {
   @apply flex-row;
-  & .dv-join-item:first-child:not(:last-child),
-  & *:first-child:not(:last-child) .dv-join-item {
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
-  & .dv-join-item:first-child:not(:last-child),
-  & *:first-child:not(:last-child) .dv-join-item {
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
     border-bottom-left-radius: inherit;
     border-top-left-radius: inherit;
   }
-  & .dv-join-item:last-child:not(:first-child),
-  & *:last-child:not(:first-child) .dv-join-item {
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
-  & .dv-join-item:last-child:not(:first-child),
-  & *:last-child:not(:first-child) .dv-join-item {
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
     border-bottom-right-radius: inherit;
     border-top-right-radius: inherit;
   }

src/components/loading/index.tsx

@@ -4,6 +4,7 @@ import { ExtractFromProps } from 'daisyui-vue/shared/types/common';
 import { HTMLAttributes, PropType, computed } from 'vue';
 import style from './style';
 import { Raw, rawProps } from '../_widgets/raw';
+import { useTheme } from 'daisyui-vue/shared/ctx';
 
 export const loadingProps = {
   variant: {
@@ -23,8 +24,14 @@ export const Loading = componentV2<ILoadingProps, HTMLAttributes>(
     name: 'Loading',
     props: loadingProps,
     setup(props, ctx) {
+      const theme = useTheme();
       const cls = computed(() =>
-        __c('loading', `loading-${props.variant}`, `loading-${props.size}`),
+        __c(
+          theme.className,
+          'loading',
+          `loading-${props.variant}`,
+          `loading-${props.size}`,
+        ),
       );
       return () => <Raw tag="span" class={cls.value} color={props.color} />;
     },