feat: add loading & fix button loading, glass

daief · Jun 29, 2023 · c57c1b7 · c57c1b7
1 parent f48edf7
commit c57c1b7
Show file tree

Hide file tree

Showing 13 changed files with 285 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,9 @@
-# daisyui-vue
+# daisyui-vue(WIP)
 
 Vue3 UI components based on [daisyui](https://github.com/saadeghi/daisyui).
 
+> <small>Work is busy, and progress is slow.</small>
+
 ## Usage
 
 Installation:

diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     ChtmlCdawwwxxyvvxdyadvyyyxdcbybbtxvfzxvuxtdwbf: typeof import('./src/.demo/ChtmlCdawwwxxyvvxdyadvyyyxdcbybbtxvfzxvuxtdwbf.vue')['default']
     ChtmlCuetyxdxwtxfwzwvexyvxvetbyccxwxyaexxxawva: typeof import('./src/.demo/ChtmlCuetyxdxwtxfwzwvexyvxvetbyccxwxyaexxxawva.vue')['default']
     ChtmlCwwfwfvyvwuxdwzzfvfywyxxcaxdfcbzvbabxfayy: typeof import('./src/.demo/ChtmlCwwfwfvyvwuxdwzzfvfywyxxcaxdfcbzvbabxfayy.vue')['default']
+    ChtmlCxxyxcbddazfuyytdzcbfwwaxfzywtaufadyfwtdz: typeof import('./src/.demo/ChtmlCxxyxcbddazfuyytdzcbfwwaxfzywtaufadyfwtdz.vue')['default']
     ChtmlCyuuztecbbxxyzcutwyefbdwvzfzdbccxctfyyfuy: typeof import('./src/.demo/ChtmlCyuuztecbbxxyzcutwyefbdwvzfzdbccxctfyyfuy.vue')['default']
     ChtmlCyyadxbzzefxeuuaxteauvwzzwvwatuzfaffcwcwx: typeof import('./src/.demo/ChtmlCyyadxbzzefxeuuaxteauvwzzwvwatuzfaffcwcwx.vue')['default']
     CtsxCaetycwyxwyzfwvbbbwvfxwtyzuxexcvbftayfxzc: typeof import('./src/.demo/CtsxCaetycwyxwyzfwvbbbwvfxwtyzuxexcvbftayfxzc')['default']

diff --git a/docs/src/pages/components/loading.md b/docs/src/pages/components/loading.md
@@ -0,0 +1,103 @@
+<route lang="yml">
+meta:
+  category: data-display
+</route>
+
+# Loading
+
+Loading shows an animation to indicate that something is loading.
+
+## Examples
+
+loading spinner
+
+```html :::demo
+<div class="flex items-center space-x-2">
+  <dv-loading size="xs" />
+  <dv-loading size="sm" />
+  <dv-loading size="md" />
+  <dv-loading size="lg" />
+</div>
+```
+
+loading dots
+
+```html :::demo
+<div class="flex items-center space-x-2">
+  <dv-loading variant="dots" size="xs" />
+  <dv-loading variant="dots" size="sm" />
+  <dv-loading variant="dots" size="md" />
+  <dv-loading variant="dots" size="lg" />
+</div>
+```
+
+loading ring
+
+```html :::demo
+<div class="flex items-center space-x-2">
+  <dv-loading variant="ring" size="xs" />
+  <dv-loading variant="ring" size="sm" />
+  <dv-loading variant="ring" size="md" />
+  <dv-loading variant="ring" size="lg" />
+</div>
+```
+
+loading ball
+
+```html :::demo
+<div class="flex items-center space-x-2">
+  <dv-loading variant="ball" size="xs" />
+  <dv-loading variant="ball" size="sm" />
+  <dv-loading variant="ball" size="md" />
+  <dv-loading variant="ball" size="lg" />
+</div>
+```
+
+loading bars
+
+```html :::demo
+<div class="flex items-center space-x-2">
+  <dv-loading variant="bars" size="xs" />
+  <dv-loading variant="bars" size="sm" />
+  <dv-loading variant="bars" size="md" />
+  <dv-loading variant="bars" size="lg" />
+</div>
+```
+
+loading infinity
+
+```html :::demo
+<div class="flex items-center space-x-2">
+  <dv-loading variant="infinity" size="xs" />
+  <dv-loading variant="infinity" size="sm" />
+  <dv-loading variant="infinity" size="md" />
+  <dv-loading variant="infinity" size="lg" />
+</div>
+```
+
+loading with colors
+
+```html :::demo
+<div class="flex items-center space-x-2">
+  <dv-loading color="neutral" />
+  <dv-loading color="primary" />
+  <dv-loading color="secondary" />
+  <dv-loading color="accent" />
+  <dv-loading color="info" />
+  <dv-loading color="success" />
+  <dv-loading color="warning" />
+  <dv-loading color="error" />
+  <dv-loading color="red" />
+  <dv-loading color="#6cf" />
+</div>
+```
+
+## Loading
+
+### Attributes
+
+| name    | description   | type                                      | default |
+| ------- | ------------- | ----------------------------------------- | ------- |
+| variant | loading style | spinner, dots, ring, ball, bars, infinity | spinner |
+| size    | loading size  | ISize                                     | md      |
+| color   | IColor,string | -                                         |
diff --git a/packages/develop/src/build/classname-plugin.ts b/packages/develop/src/build/classname-plugin.ts
@@ -31,7 +31,7 @@ export const createPostcssModulesOptions =
       filename: string,
       css: string,
     ): string => {
-      if (name.startsWith('dv-')) return name;
+      if (name.startsWith('dv-')) return name; // TODO rm
       if (name.startsWith('--')) return name;
       return convertClsName(name);
     },

diff --git a/src/components/_styles/daisyui-utilities-global/glass.css b/src/components/_styles/daisyui-utilities-global/glass.css
@@ -1,7 +1,6 @@
-.dv-glass {
-  &,
-  &:hover,
-  &.dv-btn-active {
+.glass {
+  &.btn,
+  &.btn-active {
     border: none;
     backdrop-filter: blur(var(--glass-blur, 40px));
     background-color: transparent;
@@ -20,4 +19,25 @@
       0 0 0 2px rgb(0 0 0 / 5%);
     text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
   }
+  @media (hover: hover) {
+    &.btn-active {
+      border: none;
+      backdrop-filter: blur(var(--glass-blur, 40px));
+      background-color: transparent;
+      background-image: linear-gradient(
+          135deg,
+          rgb(255 255 255 / var(--glass-opacity, 30%)) 0%,
+          rgb(0 0 0 / 0%) 100%
+        ),
+        linear-gradient(
+          var(--glass-reflex-degree, 100deg),
+          rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%,
+          rgb(0 0 0 / 0%) 25%
+        );
+      box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%))
+          inset,
+        0 0 0 2px rgb(0 0 0 / 5%);
+      text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
+    }
+  }
 }
diff --git a/src/components/_styles/daisyui-utilities-global/variables.css b/src/components/_styles/daisyui-utilities-global/variables.css
@@ -1,9 +1,9 @@
-.dv-no-animation {
+.no-animation {
   --btn-focus-scale: 1;
   --animation-btn: 0;
   --animation-input: 0;
 }
-/* .tab-border-none {
+.tab-border-none {
   --tab-border: 0px;
 }
 .tab-border {
@@ -20,4 +20,4 @@
 }
 .tab-rounded-lg {
   --tab-radius: 0.5rem;
-} */
+}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -18,6 +18,7 @@ import { componentV2 } from 'daisyui-vue/shared/styled';
 import style from './style';
 import { isUndefined } from 'daisyui-vue/shared/utils';
 import { useTheme } from 'daisyui-vue/shared/ctx';
+import { Loading } from '../loading';
 
 export type IButtonShape = 'defalut' | 'circle' | 'square';
 
@@ -29,11 +30,11 @@ export const buttonProps = {
   disabled: Boolean,
   outline: Boolean,
   active: Boolean,
-  loading: Boolean,
+  loading: { type: Boolean, default: void 0 },
   noAnimation: Boolean,
   variant: {
     type: String as PropType<IButtonType>,
-    default: 'neutral',
+    default: '',
   },
   shape: {
     type: String as PropType<IButtonShape>,
@@ -77,17 +78,15 @@ export const Button = componentV2<
       const cls = computed(() => {
         let variantCls = '';
         if (props.variant === 'glass') {
-          variantCls = 'dv-glass';
+          variantCls = __c`glass`;
         } else if (props.variant) {
-          variantCls =
-            props.variant !== 'neutral' ? `dv-btn-${props.variant}` : '';
+          variantCls = __c`btn-${props.variant}`;
         }
         return __c(theme.className, 'btn', variantCls, {
           [`btn-${size.value}`]: true,
           [`btn-${shape.value}`]: !!shape.value,
           'btn-block': props.block,
           'btn-wide': props.wide,
-          loading: finalLoading.value,
           'btn-disabled': props.disabled,
           'btn-active': props.active,
           'btn-outline': outline.value,
@@ -122,7 +121,10 @@ export const Button = componentV2<
             class: cls.value,
             onClick: handleOnClick,
           },
-          [showContent.value ? slots.default?.() : null],
+          [
+            finalLoading.value ? <Loading size={size.value} /> : null,
+            showContent.value ? slots.default?.() : null,
+          ],
         );
     },
   },

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -17,6 +17,7 @@ export * from './input';
 export * from './join';
 export * from './kbd';
 export * from './link';
+export * from './loading';
 export * from './mask';
 export * from './menu';
 export * from './modal';

diff --git a/src/components/loading/index.tsx b/src/components/loading/index.tsx
@@ -0,0 +1,33 @@
+import { sizeProps } from 'daisyui-vue/shared/constants';
+import { componentV2 } from 'daisyui-vue/shared/styled';
+import { ExtractFromProps } from 'daisyui-vue/shared/types/common';
+import { HTMLAttributes, PropType, computed } from 'vue';
+import style from './style';
+import { Raw, rawProps } from '../_widgets/raw';
+
+export const loadingProps = {
+  variant: {
+    type: String as PropType<
+      'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity'
+    >,
+    default: 'spinner',
+  },
+  ...sizeProps,
+  color: rawProps.color,
+};
+
+export type ILoadingProps = ExtractFromProps<typeof loadingProps>;
+
+export const Loading = componentV2<ILoadingProps, HTMLAttributes>(
+  {
+    name: 'Loading',
+    props: loadingProps,
+    setup(props, ctx) {
+      const cls = computed(() =>
+        __c('loading', `loading-${props.variant}`, `loading-${props.size}`),
+      );
+      return () => <Raw tag="span" class={cls.value} color={props.color} />;
+    },
+  },
+  style,
+);
diff --git a/src/components/loading/style/c-s.css b/src/components/loading/style/c-s.css
diff --git a/src/components/loading/style/index.ts b/src/components/loading/style/index.ts
@@ -0,0 +1,2 @@
+import s1 from './c-s.css';
+export default [s1];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import s1 from './c-s.css';
		export default [s1];