fix: update color compute

oil-oil · Aug 22, 2023 · 8c890c7 · 8c890c7
1 parent 83b1413
commit 8c890c7
Show file tree

Hide file tree

Showing 17 changed files with 73 additions and 66 deletions.
diff --git a/packages/docs/docs/.vitepress/theme/global-components/template/Pagination/Color.vue b/packages/docs/docs/.vitepress/theme/global-components/template/Pagination/Color.vue
@@ -25,6 +25,7 @@ import { VsRadio, VsPagination, Color } from 'vuesax-ts'
 
 const page = ref(1)
 const color = ref<Color>('success')
+
 </script>
 <style lang="scss">
 .con-pagination {

diff --git a/packages/vuesax/src/components/alert/base/Alert.tsx b/packages/vuesax/src/components/alert/base/Alert.tsx
@@ -6,6 +6,7 @@ import {
   nextTick,
   onMounted,
   ref,
+  toRef,
   toRefs,
   watch
 } from 'vue'
@@ -73,8 +74,7 @@ const Alert = defineComponent({
   slots: ['default', 'icon', 'title'],
   emits: ['update:page', 'update:hiddenContent', 'update:isShow'],
   setup(props, { slots, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const { page } = toRefs(props)
     const rootRef = ref<HTMLElement | null>(null)
     const contentRef = ref<HTMLElement | null>(null)
@@ -167,7 +167,7 @@ const Alert = defineComponent({
                 'vs-alert--pages': getPagesValue.value.length > 0
               }
             ]}
-            style={{ '--vs-color': color }}
+            style={{ '--vs-color': color.value }}
           >
             {/* icon */}
             {slots.icon && <div class="vs-alert__icon">{slots.icon()}</div>}

diff --git a/packages/vuesax/src/components/avatar/base/Avatar.tsx b/packages/vuesax/src/components/avatar/base/Avatar.tsx
@@ -7,7 +7,8 @@ import {
   inject,
   Ref,
   HTMLAttributes,
-  PropType
+  PropType,
+  toRef
 } from 'vue'
 
 import useColor from '@/hooks/useColor'
@@ -73,8 +74,7 @@ const Avatar = defineComponent({
   },
   slots: ['default', 'icons', 'badge'],
   setup(props, { slots, attrs }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const textLength = ref(0)
     const index = ref<number>(0)
     const badgeRef = ref<HTMLElement>()
@@ -205,7 +205,7 @@ const Avatar = defineComponent({
           width: `${props.size}px`,
           height: `${props.size}px`,
           cursor: props.pointer ? 'pointer' : 'default',
-          '--vs-color': color
+          '--vs-color': color.value
         }}
         class={[
           'vs-avatar-content',

diff --git a/packages/vuesax/src/components/button/base/Button.tsx b/packages/vuesax/src/components/button/base/Button.tsx
@@ -1,4 +1,10 @@
-import { ButtonHTMLAttributes, PropType, defineComponent, ref } from 'vue'
+import {
+  ButtonHTMLAttributes,
+  PropType,
+  defineComponent,
+  ref,
+  toRef
+} from 'vue'
 import { useRouter } from 'vue-router'
 
 import useColor from '@/hooks/useColor'
@@ -106,8 +112,7 @@ const Button = defineComponent({
   slots: ['default', 'animate'],
   emits: ['click'],
   setup(props, { slots, attrs, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
 
     const buttonRef = ref<Element>()
     const router = useRouter()
@@ -194,7 +199,7 @@ const Button = defineComponent({
             'vs-button--floating': props.floating
           }
         ]}
-        style={{ '--vs-color': color }}
+        style={{ '--vs-color': color.value }}
         onMousedown={(e) => handleMouseDown(e)}
         onClick={onClick}
         ref="buttonRef"

diff --git a/packages/vuesax/src/components/checkbox/base/Checkbox.tsx b/packages/vuesax/src/components/checkbox/base/Checkbox.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { nanoid } from 'nanoid'
-import { InputHTMLAttributes, PropType, defineComponent, ref } from 'vue'
+import { InputHTMLAttributes, PropType, defineComponent, ref, toRef } from 'vue'
 
 import './style.scss'
 import useColor from '@/hooks/useColor'
@@ -42,8 +42,7 @@ const Checkbox = defineComponent({
   slots: ['icon'],
   emits: ['update:modelValue'],
   setup(props, { attrs, slots, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const checkboxAttrs = attrs as InputHTMLAttributes
     const uniqueId = checkboxAttrs?.id || nanoid()
 
@@ -52,7 +51,7 @@ const Checkbox = defineComponent({
     return () => (
       <>
         <div
-          style={{ '--vs-color': color }}
+          style={{ '--vs-color': color.value }}
           class={[
             'vs-checkbox-content',
             {

diff --git a/packages/vuesax/src/components/input/base/Input.tsx b/packages/vuesax/src/components/input/base/Input.tsx
@@ -4,7 +4,8 @@ import {
   PropType,
   Transition,
   computed,
-  defineComponent
+  defineComponent,
+  toRef
 } from 'vue'
 
 import './style.scss'
@@ -77,8 +78,7 @@ const Input = defineComponent({
     }
   },
   setup(props, { attrs, slots, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
 
     const id = computed(() => `vs-input--${attrs.id || 'id'}`)
 
@@ -129,7 +129,7 @@ const Input = defineComponent({
             'vs-component--is-color': !!props.color
           }
         ]}
-        style={{ '--vs-color': color }}
+        style={{ '--vs-color': color.value }}
       >
         {/* input content */}
         <div

diff --git a/packages/vuesax/src/components/loading/base/Loading.tsx b/packages/vuesax/src/components/loading/base/Loading.tsx
@@ -1,4 +1,4 @@
-import { PropType, Transition, defineComponent, ref } from 'vue'
+import { PropType, Transition, defineComponent, ref, toRef } from 'vue'
 import './style.scss'
 
 import useColor from '@/hooks/useColor'
@@ -59,18 +59,16 @@ const Loading = defineComponent({
   emits: ['update:isVisible', 'update:text'],
   setup(props) {
     const rootRef = ref<HTMLElement>()
-    const { getColor } = useColor()
-
-    const color = getColor(props.color)
-    const bgColor = getColor(props.background)
+    const { color } = useColor(toRef(props, 'color'))
+    const { color: bgColor } = useColor(toRef(props, 'background'))
 
     return () => (
       <Transition name="loading">
         {props.isVisible && (
           <div
             ref={rootRef}
             style={{
-              background: `rgba(${bgColor},${props.opacity})`
+              background: `rgba(${bgColor.value},${props.opacity})`
             }}
             class={[
               'vs-loading',
@@ -84,7 +82,7 @@ const Loading = defineComponent({
             >
               <div
                 class="vs-loading__load__animation"
-                style={{ '--vs-color': color }}
+                style={{ '--vs-color': color.value }}
               >
                 {props.percent && (
                   <div class="vs-loading__load__percent">{props.percent}</div>

diff --git a/packages/vuesax/src/components/modal/base/Modal.tsx b/packages/vuesax/src/components/modal/base/Modal.tsx
@@ -7,6 +7,7 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  toRef,
   watch
 } from 'vue'
 
@@ -70,8 +71,7 @@ const Modal = defineComponent({
   emits: ['update:modelValue', 'close'],
   slots: ['header', 'footer'],
   setup(props, { emit, attrs, slots }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const modalAttrs = attrs as HTMLAttributes
     const rebound = ref(false)
     const modalContentRef = ref<HTMLElement>()
@@ -130,7 +130,7 @@ const Modal = defineComponent({
               }}
             >
               <div
-                style={{ '--vs-color': color }}
+                style={{ '--vs-color': color.value }}
                 class={[
                   'vs-modal',
                   {

diff --git a/packages/vuesax/src/components/navbar/base/Navbar.tsx b/packages/vuesax/src/components/navbar/base/Navbar.tsx
@@ -5,7 +5,8 @@ import {
   onMounted,
   onUnmounted,
   provide,
-  ref
+  ref,
+  toRef
 } from 'vue'
 
 import useColor from '@/hooks/useColor'
@@ -73,8 +74,7 @@ const Navbar = defineComponent({
   },
   slots: ['default', 'left', 'right'],
   setup(props, { slots, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const leftLine = ref(0)
     const widthLine = ref(0)
     const scrollTop = ref(0)
@@ -229,7 +229,7 @@ const Navbar = defineComponent({
             'vs-component--is-color': props.color
           }
         ]}
-        style={{ '--vs-color': color }}
+        style={{ '--vs-color': color.value }}
         ref={elRef}
       >
         <div class="vs-navbar">

diff --git a/packages/vuesax/src/components/notification/base/Notification.tsx b/packages/vuesax/src/components/notification/base/Notification.tsx
@@ -5,6 +5,7 @@ import {
   PropType,
   Ref,
   ref,
+  toRef,
   Transition,
   watch
 } from 'vue'
@@ -85,8 +86,7 @@ const Notification = defineComponent({
   emits: ['onClick', 'clickClose', 'onDestroy'],
   slots: ['default', 'content', 'icon'],
   setup(props, { slots, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
 
     const elRef = ref<HTMLElement>()
     const innerIsVisible = ref(false)
@@ -223,7 +223,7 @@ const Notification = defineComponent({
               }
             ]}
             style={{
-              '--vs-color': color,
+              '--vs-color': color.value,
               width:
                 props.width === '100%' ||
                 props.width === '100vw' ||

diff --git a/packages/vuesax/src/components/pagination/base/Pagination.tsx b/packages/vuesax/src/components/pagination/base/Pagination.tsx
@@ -5,6 +5,7 @@ import {
   nextTick,
   onMounted,
   ref,
+  toRef,
   watch
 } from 'vue'
 
@@ -72,8 +73,7 @@ const Pagination = defineComponent({
   emits: ['update:modelValue'],
   slots: ['default', 'arrowPrev', 'arrowNext'],
   setup(props, { emit, slots }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const innerValue = ref<number>(0)
     const paginationRef = ref<HTMLElement>()
     const buttonRefs = ref<HTMLElement[]>([])
@@ -293,7 +293,7 @@ const Pagination = defineComponent({
             disabled: props.disabled
           }
         ]}
-        style={{ '--vs-color': color }}
+        style={{ '--vs-color': color.value }}
       >
         {/* prev button */}
         {props.showArrow && (

diff --git a/packages/vuesax/src/components/radio/base/Radio.tsx b/packages/vuesax/src/components/radio/base/Radio.tsx
@@ -1,5 +1,11 @@
 import { nanoid } from 'nanoid'
-import { InputHTMLAttributes, PropType, computed, defineComponent } from 'vue'
+import {
+  InputHTMLAttributes,
+  PropType,
+  computed,
+  defineComponent,
+  toRef
+} from 'vue'
 
 import useColor from '@/hooks/useColor'
 import { Color, CompWithAttr } from '@/types/utils'
@@ -39,8 +45,7 @@ const Radio = defineComponent({
   slots: ['default', 'icon'],
   emits: ['update:modelValue'],
   setup(props, { attrs, slots, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const inputAttrs = attrs as InputHTMLAttributes
     const uniqueId = inputAttrs?.id || nanoid()
 
@@ -89,7 +94,7 @@ const Radio = defineComponent({
             active: isChecked.value
           }
         ]}
-        style={{ '--vs-color': color }}
+        style={{ '--vs-color': color.value }}
       >
         {props.labelBefore && label()}
         {radio()}

diff --git a/packages/vuesax/src/components/select/base/Select.tsx b/packages/vuesax/src/components/select/base/Select.tsx
@@ -78,8 +78,7 @@ const Select = defineComponent({
   emits: ['update:modelValue', 'blur', 'focus'],
   slots: ['default', 'noData'],
   setup(props, { slots, attrs, emit }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { getColor, color } = useColor(toRef(props, 'color'))
     const selectAttrs = attrs as InputHTMLAttributes
     const uniqueId = selectAttrs?.id || nanoid()
 
@@ -444,14 +443,14 @@ const Select = defineComponent({
           }
         ]}
         style={{
-          '--vs-color': color,
+          '--vs-color': color.value,
           marginTop: props.label ? '32px' : '0'
         }}
         ref={selectRef}
       >
         {/* select content */}
         <div
-          style={{ '--vs-color': color }}
+          style={{ '--vs-color': color.value }}
           class={[
             'vs-select',
             {
@@ -607,7 +606,7 @@ const Select = defineComponent({
                 }
               ]}
               style={{
-                '--vs-color': color
+                '--vs-color': color.value
               }}
               ref={optionRef}
               onMouseleave={() => {

diff --git a/packages/vuesax/src/components/sidebar/base/Sidebar.tsx b/packages/vuesax/src/components/sidebar/base/Sidebar.tsx
@@ -72,8 +72,7 @@ const Sidebar = defineComponent({
   slots: ['default', 'header', 'footer', 'logo'],
   emits: ['update:modelValue', 'update:open'],
   setup(props, { slots, emit, attrs }) {
-    const { getColor } = useColor()
-    const color = getColor(props.color)
+    const { color } = useColor(toRef(props, 'color'))
     const rootRef = ref<HTMLElement | null>(null)
     const staticWidth = 260
     const reduceInternal = ref(false)
@@ -175,7 +174,7 @@ const Sidebar = defineComponent({
       <div
         ref={rootRef}
         class={sideBarClass.value}
-        style={{ '--vs-color': color }}
+        style={{ '--vs-color': color.value }}
         onMouseenter={mouseEnterEvent}
         onMouseleave={mouseLeaveEvent}
         {...attrs}