refactor(slider): silder&&time-picker (#1672)

* refactor(slider): silder&&time-picker重构

* refactor(slider): 引入修改

---------

Co-authored-by: huaweidevcloud <[email protected]>

Author: fengjiancai

packages/devui-vue/devui/slider/__tests__/slider.spec.tsx

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { nextTick, ref } from 'vue';
 import DSlider from '../src/slider';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const ns = useNamespace('slider', true);
 

packages/devui-vue/devui/slider/src/slider.tsx

@@ -1,7 +1,6 @@
 import { defineComponent, computed, SetupContext } from 'vue';
 import { sliderProps, SliderProps } from './slider-types';
-import { useNamespace } from '../../shared/hooks/use-namespace';
-import { isFunction } from '../../shared/utils';
+import { useNamespace, isFunction } from '@devui/shared/utils';
 import { useSliderEvent } from './use-slider';
 import './slider.scss';
 

packages/devui-vue/devui/slider/src/use-slider.ts

@@ -89,7 +89,7 @@ export function useSliderEvent(props: SliderProps, ctx: SetupContext): UseSlider
   }
 
   watch(
-    () => props.modelValue,
+    [() => props.modelValue, () => props.max, () => props.min],
     () => {
       currentValue.value = Number(props.modelValue);
 

packages/devui-vue/devui/time-picker/__tests__/time-picker.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import DTimePicker from '../src/time-picker';
 import { nextTick, ref } from 'vue';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { Form as DForm, FormItem as DFormItem } from '../../form';
 
 jest.mock('../../locale/create', () => ({

packages/devui-vue/devui/time-picker/src/components/popup-line/index.scss

@@ -1,6 +1,6 @@
-@import '../../../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
-.#{$devui-prefix}-time-list {
+.#{$devui-prefix}-popup-line {
   width: 100%;
   height: 256px;
   border-bottom: 1px solid $devui-dividing-line;

packages/devui-vue/devui/time-picker/src/components/popup-line/index.tsx

@@ -4,15 +4,15 @@ import { usePopupLine } from './composables/use-popup-line';
 import { ArrType, TimeListItem } from '../../types';
 import { popupLineProps, PopupLineProps } from './popup-line-types';
 import TimeScroll from '../time-scroll';
-import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import './index.scss';
 
 export default defineComponent({
-  name: 'DTimeList',
+  name: 'DPopupLine',
   props: popupLineProps,
   emits: ['change'],
   setup(props: PopupLineProps, ctx: SetupContext) {
-    const ns = useNamespace('time-list');
+    const ns = useNamespace('popup-line');
     const timeListDom = ref<Element>();
     const { getNewTime, activeTimeFun, resetTimeValue, resetScrollTop } = usePopupLine(
       props.hourList as Array<ArrType>,

packages/devui-vue/devui/time-picker/src/components/time-popup/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 .#{$devui-prefix}-time-popup--btn {
   padding: 8px 10px;
   display: flex;

packages/devui-vue/devui/time-picker/src/components/time-popup/index.tsx

@@ -5,7 +5,7 @@ import PopupLine from '../popup-line/index';
 import { Button } from '../../../../button/index';
 import { popupTimeObj } from '../../types';
 import { timePopupProps, TimePopupProps } from './time-popup-types';
-import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { createI18nTranslate } from '../../../../locale/create';
 import './index.scss';
 

packages/devui-vue/devui/time-picker/src/components/time-scroll/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .#{$devui-prefix}-scroll-box {
   width: 100%;
@@ -11,6 +11,7 @@
   }
 
   .box-content {
+    position: static;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;

packages/devui-vue/devui/time-picker/src/components/time-scroll/index.tsx

@@ -2,7 +2,7 @@ import { defineComponent, onBeforeUnmount, onMounted, onUnmounted } from 'vue';
 import type { SetupContext } from 'vue';
 import { TimePickerProps, timePickerProps } from '../../time-picker-types';
 import useTimeScroll from './composables/use-time-scroll';
-import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 import './index.scss';
 

packages/devui-vue/devui/time-picker/src/composables/use-time-picker.ts

@@ -81,7 +81,7 @@ export default function useTimePicker(hh: Ref, mm: Ref, ss: Ref, format: string,
   };
 
   const clickVerifyFun = () => {
-    if (props.disabled || props.readonly) {
+    if (props.disabled) {
       return;
     }
     mouseInputFun();

packages/devui-vue/devui/time-picker/src/time-picker.tsx

@@ -5,7 +5,7 @@ import useTimePicker from './composables/use-time-picker';
 import TimePopup from './components/time-popup/index';
 import DInput from '../../input/src/input';
 import { FlexibleOverlay, Placement } from '../../overlay';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 import './time-picker.scss';
 
@@ -68,10 +68,10 @@ export default defineComponent({
             disabled={props.disabled}
             readonly={props.readonly}
             size={props.size}
-            onFocus={withModifiers(clickVerifyFun, ['stop'])}
+            onFocus={clickVerifyFun}
             v-slots={{
               suffix: () => (
-                <span class="time-input-icon">
+                <span class="time-input-icon" onClick={clickVerifyFun}>
                   <span onClick={clearAll} class="clear-button">
                     {showClearIcon.value ? <Icon size="small" name="close" /> : ''}
                   </span>