@kine-design/core 0.0.1-beta.2 → 0.0.1-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/base/affix/index.ts +4 -2
- package/components/base/affix/useAffix.ts +2 -2
- package/components/base/anchor/index.ts +4 -2
- package/components/base/anchor/useAnchor.ts +2 -2
- package/components/base/autoComplete/useAutoComplete.ts +8 -1
- package/components/base/avatar/index.ts +5 -4
- package/components/base/backTop/index.ts +4 -2
- package/components/base/backTop/useBackTop.ts +1 -1
- package/components/base/button/button.css +1 -1
- package/components/base/button/index.ts +5 -4
- package/components/base/button/useButton.ts +3 -3
- package/components/base/carousel/useCarousel.ts +3 -5
- package/components/base/checkbox/index.ts +6 -5
- package/components/base/checkbox/useCheckbox.ts +1 -1
- package/components/base/collapse/index.ts +4 -2
- package/components/base/collapse/useCollapse.ts +1 -1
- package/components/base/dropdown/index.ts +4 -2
- package/components/base/dropdown/useDropdown.ts +1 -1
- package/components/base/input/index.ts +4 -3
- package/components/base/input/useInput.ts +1 -1
- package/components/base/inputNumber/api.ts +1 -0
- package/components/base/inputNumber/index.ts +4 -2
- package/components/base/inputNumber/props.d.ts +7 -1
- package/components/base/inputNumber/useInputNumber.ts +1 -1
- package/components/base/li/index.ts +3 -1
- package/components/base/list/index.ts +4 -2
- package/components/base/list/useList.ts +1 -1
- package/components/base/popover/index.ts +4 -2
- package/components/base/popover/usePopover.ts +8 -4
- package/components/base/progress/index.ts +4 -2
- package/components/base/progress/useProgress.ts +1 -1
- package/components/base/radio/index.ts +1 -1
- package/components/base/rate/index.ts +4 -2
- package/components/base/rate/useRate.ts +1 -1
- package/components/base/slider/index.ts +4 -2
- package/components/base/slider/useSlider.ts +1 -1
- package/components/base/switch/index.ts +5 -3
- package/components/base/switch/useSwitch.tsx +1 -1
- package/components/base/tabs/index.ts +2 -2
- package/components/base/tabs/useTabs.ts +1 -1
- package/components/base/tag/index.ts +3 -1
- package/components/base/tooltip/index.ts +2 -2
- package/components/base/tooltip/useTooltip.ts +1 -1
- package/components/message/drawer/index.ts +1 -1
- package/components/message/popover/MPopover.tsx +3 -3
- package/components/message/popover/index.ts +2 -2
- package/components/message/popover/usePopover.ts +7 -3
- package/components/template/menu/index.ts +0 -1
- package/components/template/menu/useMenu.ts +1 -1
- package/components/template/pagination/index.ts +2 -1
- package/components/template/virtualList/index.ts +0 -1
- package/compositions/virtualList/useContainerObserver.ts +8 -1
- package/dist/components/base/affix/index.d.ts +2 -1
- package/dist/components/base/affix/useAffix.d.ts +1 -1
- package/dist/components/base/anchor/index.d.ts +2 -1
- package/dist/components/base/anchor/useAnchor.d.ts +1 -1
- package/dist/components/base/avatar/index.d.ts +1 -0
- package/dist/components/base/backTop/index.d.ts +2 -1
- package/dist/components/base/backTop/useBackTop.d.ts +1 -1
- package/dist/components/base/button/index.d.ts +3 -30
- package/dist/components/base/button/useButton.d.ts +2 -8
- package/dist/components/base/checkbox/index.d.ts +2 -1
- package/dist/components/base/checkbox/useCheckbox.d.ts +1 -1
- package/dist/components/base/collapse/index.d.ts +2 -1
- package/dist/components/base/collapse/useCollapse.d.ts +1 -1
- package/dist/components/base/dropdown/index.d.ts +2 -1
- package/dist/components/base/dropdown/useDropdown.d.ts +1 -1
- package/dist/components/base/input/index.d.ts +2 -1
- package/dist/components/base/input/useInput.d.ts +1 -1
- package/dist/components/base/inputNumber/index.d.ts +2 -1
- package/dist/components/base/inputNumber/useInputNumber.d.ts +1 -1
- package/dist/components/base/li/index.d.ts +1 -0
- package/dist/components/base/list/index.d.ts +2 -1
- package/dist/components/base/list/useList.d.ts +1 -1
- package/dist/components/base/popover/index.d.ts +2 -1
- package/dist/components/base/popover/usePopover.d.ts +1 -1
- package/dist/components/base/progress/index.d.ts +2 -1
- package/dist/components/base/progress/useProgress.d.ts +1 -1
- package/dist/components/base/rate/index.d.ts +2 -1
- package/dist/components/base/rate/useRate.d.ts +1 -1
- package/dist/components/base/slider/index.d.ts +2 -1
- package/dist/components/base/slider/useSlider.d.ts +1 -1
- package/dist/components/base/switch/index.d.ts +2 -1
- package/dist/components/base/switch/useSwitch.d.ts +1 -1
- package/dist/components/base/tabs/index.d.ts +1 -1
- package/dist/components/base/tabs/useTabs.d.ts +1 -1
- package/dist/components/base/tag/index.d.ts +1 -0
- package/dist/components/base/tooltip/index.d.ts +1 -1
- package/dist/components/base/tooltip/useTooltip.d.ts +1 -1
- package/dist/components/message/drawer/index.d.ts +2 -2
- package/dist/components/message/popover/index.d.ts +1 -1
- package/dist/components/template/menu/index.d.ts +0 -1
- package/dist/components/template/menu/useMenu.d.ts +1 -1
- package/dist/components/template/pagination/index.d.ts +2 -1
- package/dist/components/template/virtualList/index.d.ts +0 -1
- package/dist/core.js +52 -34
- package/package.json +1 -1
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useAffix from './useAffix';
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useAffix } from './useAffix';
|
|
11
11
|
|
|
12
12
|
export const AffixCore = {
|
|
13
13
|
props,
|
|
14
14
|
useAffix,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { AffixProps } from './props';
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
10
10
|
import { AffixProps } from './props';
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export function useAffix(
|
|
13
13
|
props: Required<AffixProps>,
|
|
14
|
-
emit: (
|
|
14
|
+
emit: (...args: any[]) => void,
|
|
15
15
|
) {
|
|
16
16
|
const affixed = ref(false);
|
|
17
17
|
// 固定后占位元素的高度(撑开文档流)
|
|
@@ -6,11 +6,13 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props, anchorLinkProps } from './api
|
|
10
|
-
import useAnchor from './useAnchor';
|
|
9
|
+
import { props, anchorLinkProps } from './api';
|
|
10
|
+
import { useAnchor } from './useAnchor';
|
|
11
11
|
|
|
12
12
|
export const AnchorCore = {
|
|
13
13
|
props,
|
|
14
14
|
anchorLinkProps,
|
|
15
15
|
useAnchor,
|
|
16
16
|
};
|
|
17
|
+
|
|
18
|
+
export type { AnchorProps, AnchorLinkProps } from './props';
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
10
10
|
import { AnchorProps } from './props';
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export function useAnchor(
|
|
13
13
|
props: Required<AnchorProps>,
|
|
14
|
-
emit: (
|
|
14
|
+
emit: (...args: any[]) => void,
|
|
15
15
|
) {
|
|
16
16
|
const currentLink = ref('');
|
|
17
17
|
// 由子组件注册的 href 列表(按 DOM 顺序)
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* 3. debounce:输入停止后延迟触发搜索,避免频繁请求
|
|
13
13
|
* 4. loading 状态:搜索进行中显示加载指示
|
|
14
14
|
*/
|
|
15
|
-
import { ref, toRef, onBeforeUnmount } from 'vue';
|
|
15
|
+
import { ref, toRef, watch, onBeforeUnmount } from 'vue';
|
|
16
16
|
import { AutoCompleteProps, AutoCompleteOption } from './props';
|
|
17
17
|
|
|
18
18
|
export function useAutoComplete(props: AutoCompleteProps, ctx: any) {
|
|
@@ -21,6 +21,13 @@ export function useAutoComplete(props: AutoCompleteProps, ctx: any) {
|
|
|
21
21
|
// --- 状态 ---
|
|
22
22
|
/** 输入框当前文本,与 modelValue 保持同步 */
|
|
23
23
|
const inputValue = ref(modelValueRef.value);
|
|
24
|
+
|
|
25
|
+
// 外部 modelValue 变化时同步到 inputValue(编辑回填等场景)
|
|
26
|
+
watch(modelValueRef, (v) => {
|
|
27
|
+
if (v !== inputValue.value) {
|
|
28
|
+
inputValue.value = v;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
24
31
|
/** 下拉是否展开 */
|
|
25
32
|
const isOpen = ref(false);
|
|
26
33
|
/** 搜索进行中 */
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useBackTop from './useBackTop';
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useBackTop } from './useBackTop';
|
|
11
11
|
|
|
12
12
|
export const BackTopCore = {
|
|
13
13
|
props,
|
|
14
14
|
useBackTop,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { BackTopProps } from './props';
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
10
10
|
import { BackTopProps } from './props';
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export function useBackTop(props: Required<BackTopProps>) {
|
|
13
13
|
const visible = ref(false);
|
|
14
14
|
|
|
15
15
|
/** 获取滚动目标元素,无匹配则使用 window */
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
/*line-height: var(--m-button-line-height, 32px);*/
|
|
12
12
|
min-width: var(--m-button-width, 32px);
|
|
13
13
|
border: 5px double transparent;
|
|
14
|
-
border-radius:
|
|
14
|
+
border-radius: var(--kine-radius-xs);
|
|
15
15
|
color: white;
|
|
16
16
|
text-align: center;
|
|
17
17
|
cursor: var(--m-cursor-pointer);
|
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
9
|
+
import { props } from './api';
|
|
10
10
|
import { useButton } from './useButton';
|
|
11
11
|
|
|
12
|
-
|
|
13
12
|
export const ButtonCore = {
|
|
14
13
|
props,
|
|
15
|
-
useButton
|
|
16
|
-
}
|
|
14
|
+
useButton,
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export type { ButtonProps } from './props';
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
+
import { SetupContext } from 'vue';
|
|
9
10
|
import { ButtonProps } from './props';
|
|
10
|
-
import { defineHook } from '../../../runtime/defineHook.ts';
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export function useButton(props: ButtonProps, { slots }: SetupContext) {
|
|
13
13
|
const domType = props.link ? 'a' : 'button';
|
|
14
14
|
const slot = slots.default?.() ?? props.text;
|
|
15
15
|
|
|
@@ -34,4 +34,4 @@ export const useButton = defineHook((props: ButtonProps, { slots }) => {
|
|
|
34
34
|
domProps,
|
|
35
35
|
isDisabled,
|
|
36
36
|
};
|
|
37
|
-
}
|
|
37
|
+
}
|
|
@@ -12,8 +12,9 @@ import { CarouselProps } from './props';
|
|
|
12
12
|
export function useCarousel(props: Required<CarouselProps>, emit: (event: string, ...args: any[]) => void, count: () => number) {
|
|
13
13
|
// 逻辑索引(0..N-1),用于指示器和 v-model
|
|
14
14
|
const activeIndex = ref(props.modelValue ?? props.initialIndex);
|
|
15
|
-
// track 位置索引(loop
|
|
16
|
-
const
|
|
15
|
+
// track 位置索引(loop 时含克隆偏移);初始时若 loop 启用则假定有克隆
|
|
16
|
+
const initialActive = props.modelValue ?? props.initialIndex;
|
|
17
|
+
const trackIndex = ref(props.loop ? initialActive + 1 : initialActive);
|
|
17
18
|
// 禁用过渡标记(用于无缝瞬间跳转)
|
|
18
19
|
const disableTransition = ref(false);
|
|
19
20
|
// 自动播放定时器
|
|
@@ -26,9 +27,6 @@ export function useCarousel(props: Required<CarouselProps>, emit: (event: string
|
|
|
26
27
|
trackIndex.value = hasClones() ? activeIndex.value + 1 : activeIndex.value;
|
|
27
28
|
};
|
|
28
29
|
|
|
29
|
-
// 初始化
|
|
30
|
-
syncTrackIndex();
|
|
31
|
-
|
|
32
30
|
// 外部 v-model 变化时同步
|
|
33
31
|
watch(() => props.modelValue, (val) => {
|
|
34
32
|
if (val != null && val !== activeIndex.value) {
|
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useCheckbox from './useCheckbox';
|
|
11
|
-
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useCheckbox } from './useCheckbox';
|
|
12
11
|
|
|
13
12
|
export const CheckboxCore = {
|
|
14
13
|
props,
|
|
15
|
-
useCheckbox
|
|
16
|
-
}
|
|
14
|
+
useCheckbox,
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export type { CheckboxProps } from './props';
|
|
@@ -11,7 +11,7 @@ import { getNewModelValue, initChecked } from '../../../compositions/input/useBo
|
|
|
11
11
|
import { CheckboxProps } from './props';
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
export
|
|
14
|
+
export function useCheckbox<
|
|
15
15
|
Props extends Required<CheckboxProps>,
|
|
16
16
|
>(props: Props, ctx: any) {
|
|
17
17
|
const checkboxClass = ['m-checkbox', { 'm-disabled': props.disabled, 'm-indeterminate': props.indeterminate }];
|
|
@@ -6,11 +6,13 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props, itemProps } from './api
|
|
10
|
-
import useCollapse from './useCollapse
|
|
9
|
+
import { props, itemProps } from './api';
|
|
10
|
+
import { useCollapse } from './useCollapse';
|
|
11
11
|
|
|
12
12
|
export const CollapseCore = {
|
|
13
13
|
props,
|
|
14
14
|
itemProps,
|
|
15
15
|
useCollapse,
|
|
16
16
|
};
|
|
17
|
+
|
|
18
|
+
export type { CollapseProps, CollapseItemProps } from './props';
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { computed } from 'vue';
|
|
10
10
|
import { CollapseProps } from './props';
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export function useCollapse(props: Required<CollapseProps>, ctx: any) {
|
|
13
13
|
const { emit } = ctx;
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -6,11 +6,13 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props, itemProps } from './api
|
|
10
|
-
import useDropdown from './useDropdown
|
|
9
|
+
import { props, itemProps } from './api';
|
|
10
|
+
import { useDropdown } from './useDropdown';
|
|
11
11
|
|
|
12
12
|
export const DropdownCore = {
|
|
13
13
|
props,
|
|
14
14
|
itemProps,
|
|
15
15
|
useDropdown,
|
|
16
16
|
};
|
|
17
|
+
|
|
18
|
+
export type { DropdownProps, DropdownItemProps } from './props';
|
|
@@ -10,7 +10,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
|
|
10
10
|
import { DropdownItemProps, DropdownProps } from './props';
|
|
11
11
|
import useClickAway from '../../../compositions/popper/useClickAway';
|
|
12
12
|
|
|
13
|
-
export
|
|
13
|
+
export function useDropdown(props: Required<DropdownProps>, ctx: any) {
|
|
14
14
|
const { emit } = ctx;
|
|
15
15
|
|
|
16
16
|
// 下拉菜单是否展开
|
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useInput from './useInput';
|
|
11
|
-
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useInput } from './useInput';
|
|
12
11
|
|
|
13
12
|
export const InputCore = {
|
|
14
13
|
props,
|
|
15
14
|
useInput,
|
|
16
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { InputProps } from './props';
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useInputNumber from './useInputNumber
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useInputNumber } from './useInputNumber';
|
|
11
11
|
|
|
12
12
|
export const InputNumberCore = {
|
|
13
13
|
props,
|
|
14
14
|
useInputNumber,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { InputNumberProps } from './props';
|
|
@@ -60,5 +60,11 @@ export declare type InputNumberProps = {
|
|
|
60
60
|
* @type string
|
|
61
61
|
* @default ''
|
|
62
62
|
*/
|
|
63
|
-
placeholder?: string
|
|
63
|
+
placeholder?: string,
|
|
64
|
+
/**
|
|
65
|
+
* @description whether to show increase/decrease buttons. 是否显示增减按钮
|
|
66
|
+
* @type boolean
|
|
67
|
+
* @default true
|
|
68
|
+
*/
|
|
69
|
+
controls?: boolean
|
|
64
70
|
};
|
|
@@ -12,7 +12,7 @@ import { HTMLElementEvent } from '../../types/template';
|
|
|
12
12
|
|
|
13
13
|
export type InputNumber = string | number | null;
|
|
14
14
|
|
|
15
|
-
export
|
|
15
|
+
export function useInputNumber(props: Required<InputNumberProps>, ctx: any) {
|
|
16
16
|
const currentValue = ref<string | number>(props.modelValue ?? '');
|
|
17
17
|
|
|
18
18
|
const updateInput = (oldVal: InputNumber) => {
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useList from './useList';
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useList } from './useList';
|
|
11
11
|
|
|
12
12
|
export const ListCore = {
|
|
13
13
|
props,
|
|
14
14
|
useList,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { ListProps } from './props';
|
|
@@ -20,7 +20,7 @@ const baseRender = (item: unknown) => {
|
|
|
20
20
|
return '';
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
-
export
|
|
23
|
+
export function useList<T>() {
|
|
24
24
|
const dataValidate = (data: T[] | undefined) => {
|
|
25
25
|
if (!Array.isArray(data)) {
|
|
26
26
|
console.warn('[shuimo-list] data必须是数组');
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import usePopover from './usePopover
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { usePopover } from './usePopover';
|
|
11
11
|
|
|
12
12
|
export const PopoverCore = {
|
|
13
13
|
props,
|
|
14
14
|
usePopover,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { PopoverProps } from './props';
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { Placement, PopperConfig, PositionStyle, usePopper } from '../../../compositions/popper/usePopper.ts';
|
|
10
10
|
import useClickAway from '../../../compositions/popper/useClickAway';
|
|
11
11
|
import { PopoverProps } from './props';
|
|
12
|
-
import {
|
|
12
|
+
import { onBeforeUnmount, onMounted, ref, type Ref, shallowRef } from 'vue';
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
export type IPopper = ReturnType<typeof usePopper>;
|
|
@@ -95,12 +95,15 @@ export class PopoverImpl {
|
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
destroy() {
|
|
98
|
-
|
|
98
|
+
this.popperInstance?.clear?.();
|
|
99
|
+
this.visible = false;
|
|
100
|
+
this.onShow = undefined;
|
|
101
|
+
this.onHide = undefined;
|
|
99
102
|
}
|
|
100
103
|
}
|
|
101
104
|
|
|
102
105
|
|
|
103
|
-
export
|
|
106
|
+
export function usePopover(props: Required<PopoverProps>, ctx: any) {
|
|
104
107
|
const style = ref();
|
|
105
108
|
const arrowStyle = ref();
|
|
106
109
|
const placement = ref<Placement>(props.placement);
|
|
@@ -170,11 +173,12 @@ export default function usePopover(props: Required<PopoverProps>, ctx: any) {
|
|
|
170
173
|
});
|
|
171
174
|
});
|
|
172
175
|
|
|
173
|
-
|
|
176
|
+
onBeforeUnmount(() => {
|
|
174
177
|
if (clickAwayInstance) {
|
|
175
178
|
const { onBeforeDestroy } = clickAwayInstance;
|
|
176
179
|
onBeforeDestroy();
|
|
177
180
|
}
|
|
181
|
+
instance?.destroy();
|
|
178
182
|
});
|
|
179
183
|
|
|
180
184
|
return {
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useProgress from './useProgress';
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useProgress } from './useProgress';
|
|
11
11
|
|
|
12
12
|
export const ProgressCore = {
|
|
13
13
|
props,
|
|
14
14
|
useProgress,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { ProgressProps, ProgressStatus } from './props';
|
|
@@ -19,7 +19,7 @@ const clearZero = (num: number) => {
|
|
|
19
19
|
return str.slice(0, index + 3);
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
export
|
|
22
|
+
export function useProgress(props: Required<ProgressProps>) {
|
|
23
23
|
const percentage = computed(() => clearZero((props.value * 100 / props.max)));
|
|
24
24
|
|
|
25
25
|
return {
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useRate from './useRate';
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useRate } from './useRate';
|
|
11
11
|
|
|
12
12
|
export const RateCore = {
|
|
13
13
|
props,
|
|
14
14
|
useRate,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { RateProps } from './props';
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { ref } from 'vue';
|
|
10
10
|
import { RateProps } from './props';
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export function useRate(props: Required<RateProps>, emit: (...args: any[]) => void) {
|
|
13
13
|
// 悬停预览值,null 表示未悬停
|
|
14
14
|
const hoverValue = ref<number | null>(null);
|
|
15
15
|
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useSlider from './useSlider
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useSlider } from './useSlider';
|
|
11
11
|
|
|
12
12
|
export const SliderCore = {
|
|
13
13
|
props,
|
|
14
14
|
useSlider,
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export type { SliderProps } from './props';
|
|
@@ -11,7 +11,7 @@ import { SliderProps } from './props';
|
|
|
11
11
|
import { useElementSize } from '../../../compositions/common/useElementSize.ts';
|
|
12
12
|
import useDrag, { DragOption, DragPosition, InteractEvent } from '../../../compositions/common/useDrag.ts';
|
|
13
13
|
|
|
14
|
-
export
|
|
14
|
+
export function useSlider(props: Required<SliderProps>, ctx: any) {
|
|
15
15
|
const sliderRef = ref<HTMLElement | null>(null);
|
|
16
16
|
const sliderSize = useElementSize(sliderRef);
|
|
17
17
|
|
|
@@ -6,12 +6,14 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { props } from './api
|
|
10
|
-
import useSwitch,
|
|
9
|
+
import { props } from './api';
|
|
10
|
+
import { useSwitch, getIsActive, switchIsBoolean } from './useSwitch';
|
|
11
11
|
|
|
12
12
|
export const SwitchCore = {
|
|
13
13
|
props,
|
|
14
14
|
switchIsBoolean,
|
|
15
15
|
getIsActive,
|
|
16
16
|
useSwitch,
|
|
17
|
-
}
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export type { SwitchProps } from './props';
|
|
@@ -19,7 +19,7 @@ export const getIsActive = (value: SwitchProps['modelValue'], activeValue: Switc
|
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
export
|
|
22
|
+
export function useSwitch<
|
|
23
23
|
Props extends Record<string, any>,
|
|
24
24
|
>(props: Props, ctx: any) {
|
|
25
25
|
const activeValue = ref(props.activeValue);
|
|
@@ -56,7 +56,7 @@ function calcPosition(
|
|
|
56
56
|
};
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
export
|
|
59
|
+
export function useTooltip(props: Required<TooltipProps>) {
|
|
60
60
|
const visible = ref(false);
|
|
61
61
|
const tooltipStyle = ref<TooltipStyle | Record<string, never>>({});
|
|
62
62
|
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
* v2.0.0-process 阿怪 准备重构,搭建模版
|
|
9
9
|
*/
|
|
10
10
|
import { defineComponent, ref, watch } from 'vue';
|
|
11
|
-
import { props } from './api
|
|
12
|
-
import useTeleport from '../../../compositions/common/useTeleport
|
|
13
|
-
import { usePopover } from './usePopover
|
|
11
|
+
import { props } from './api';
|
|
12
|
+
import useTeleport from '../../../compositions/common/useTeleport';
|
|
13
|
+
import { usePopover } from './usePopover';
|
|
14
14
|
import './popover.css';
|
|
15
15
|
import { PopoverProps } from './props';
|
|
16
16
|
|