From b8ed920cee9ad57829e83975f639c262e46e78a5 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Fri, 22 Dec 2023 17:02:17 +0800 Subject: [PATCH] chore: complete basic function --- components/Statistic/src/index.svelte | 71 ++++++++++++++++++++++++--- components/Statistic/src/types.d.ts | 39 ++++++++++++++- preset/src/shortcuts/index.ts | 12 +++-- preset/src/shortcuts/src/statistic.ts | 8 +++ 4 files changed, 118 insertions(+), 12 deletions(-) create mode 100644 preset/src/shortcuts/src/statistic.ts diff --git a/components/Statistic/src/index.svelte b/components/Statistic/src/index.svelte index abb08d34..80268248 100644 --- a/components/Statistic/src/index.svelte +++ b/components/Statistic/src/index.svelte @@ -2,15 +2,70 @@ import { getPrefixCls } from '@ikun-ui/utils'; import { clsx } from 'clsx'; import type { KStatisticProps } from "./types"; - + import { isFunction, isNumber } from "baiwusanyu-utils"; + + export let decimalSeparator: KStatisticProps["decimalSeparator"] = '.'; + export let groupSeparator: KStatisticProps["groupSeparator"] = ','; + export let precision: KStatisticProps["precision"] = 0; + export let formatter: KStatisticProps["formatter"] = undefined; + export let value: KStatisticProps["value"] = 0; + export let prefix: KStatisticProps["prefix"] = undefined; + export let suffix: KStatisticProps["suffix"] = undefined; + export let title: KStatisticProps["title"] = undefined; + export let valueStyle: KStatisticProps["valueStyle"] = undefined; export let cls: KStatisticProps["cls"] = undefined; export let attrs: KStatisticProps["attrs"] = {}; - - const prefixCls = getPrefixCls('statistic'); - $: cnames = clsx(prefixCls, { - [`${prefixCls}--base`]: true - }, cls); + + $: displayValue = () => { + if (isFunction(formatter)) return formatter!(value) + + if (!isNumber(value)) return value + + let [integer, decimal = ''] = String(value).split('.') + decimal = decimal + .padEnd(precision, '0') + .slice(0, precision > 0 ? precision : 0) + integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator) + return [integer, decimal].join(decimal ? decimalSeparator : '') + } + + const namespaceCls = getPrefixCls('statistic'); + $: cnames = clsx(namespaceCls, cls); + $: headCls = clsx(`${namespaceCls}__head`); + $: contentCls =clsx(`${namespaceCls}__content`); + $: prefixCls = clsx(`${namespaceCls}__prefix`); + $: valueCls = clsx(`${namespaceCls}__value`); + $: suffixCls = clsx(`${namespaceCls}__suffix`); -
- \ No newline at end of file +
+ {#if $$slots.title || title} +
+ + { title } + +
+ {/if} +
+ + {#if $$slots.prefix || prefix} +
+ + { prefix } + +
+ {/if} + + + { displayValue() } + + + {#if $$slots.suffix || suffix} +
+ + { suffix } + +
+ {/if} +
+
diff --git a/components/Statistic/src/types.d.ts b/components/Statistic/src/types.d.ts index fdce18f5..b7686c51 100644 --- a/components/Statistic/src/types.d.ts +++ b/components/Statistic/src/types.d.ts @@ -1,6 +1,43 @@ /// import type { ClassValue } from 'clsx'; export type KStatisticProps = { + /** + * @description Setting the decimal point + */ + decimalSeparator: string + /** + * @description Sets the thousandth identifier + */ + groupSeparator: string + /** + * @description numerical precision + */ + precision: number + /** + * @description Custom numerical presentation + */ + formatter: ((value: number) => string | number) | undefined, + /** + * @description TODO: ❓ Numerical content + */ + value: number + /** + * @description Sets the prefix of a number + */ + prefix: string | undefined, + + /** + * @description Sets the suffix of a number + */ + suffix: string | undefined, + /** + * @description Numeric titles + */ + title: string | undefined, + /** + * @description Styles numeric values + */ + valueStyle: string | undefined, cls: ClassValue, attrs: Record -} \ No newline at end of file +} diff --git a/preset/src/shortcuts/index.ts b/preset/src/shortcuts/index.ts index 4051f893..98b9ff7a 100644 --- a/preset/src/shortcuts/index.ts +++ b/preset/src/shortcuts/index.ts @@ -50,6 +50,7 @@ import { descriptionsItemShortcuts } from './src/descriptions-item'; import { getDescriptionsItemGridColStartCls } from '../rules/src/descriptions-item'; import { carouselShortcuts } from './src/carousel'; import { affixShortcuts } from './src/affix'; +import { statisticShortcuts } from './src/statistic' export const defaultShortcuts = [ baseShortcuts, commonShortcuts, @@ -140,7 +141,9 @@ export const defaultShortcuts = [ // carousel carouselShortcuts, // affix - affixShortcuts + affixShortcuts, + // statistic + statisticShortcuts, ] as UserShortcuts; export function getSafeList() { @@ -190,7 +193,8 @@ export function getSafeList() { const descriptionsList = Object.keys(descriptionsShortcuts); const descriptionsItemList = Object.keys(descriptionsItemShortcuts); const carouselList = Object.keys(carouselShortcuts); - const affixlList = Object.keys(affixShortcuts); + const affixList = Object.keys(affixShortcuts); + const statisticList = Object.keys(statisticShortcuts); let res = iconList .concat(IKUN_SAFE_LIST) .concat(comList) @@ -237,7 +241,8 @@ export function getSafeList() { .concat(pageList) .concat(descriptionsList) .concat(descriptionsItemList) - .concat(affixlList) + .concat(affixList) + .concat(statisticList) .concat(carouselList); // rules @@ -299,3 +304,4 @@ export { descriptionsShortcuts } from './src/descriptions'; export { descriptionsItemShortcuts } from './src/descriptions-item'; export { carouselShortcuts } from './src/carousel'; export { affixShortcuts } from './src/affix'; +export { statisticShortcuts } from './src/statistic'; diff --git a/preset/src/shortcuts/src/statistic.ts b/preset/src/shortcuts/src/statistic.ts new file mode 100644 index 00000000..98ad890a --- /dev/null +++ b/preset/src/shortcuts/src/statistic.ts @@ -0,0 +1,8 @@ +export const statisticShortcuts: Record = { + // statistic + 'k-statistic__head': 'text-base text-ikun-tx-base mb-4px leading-20px', + 'k-statistic__content': 'text-base text-ikun-tx-base', + 'k-statistic__value': 'inline-block', + 'k-statistic__prefix': 'inline-block mr-4px', + 'k-statistic__suffix': 'inline-block ml-4px', +};