chore: complete basic function

ikun-svelte · Dec 25, 2023 · b8ed920 · b8ed920
1 parent 4760e45
commit b8ed920
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 12 deletions.
diff --git 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`);
 </script>
 
-<div class={cnames} {...$$restProps} {...attrs}></div>
-
+<div class={cnames} {...$$restProps} {...attrs}>
+  {#if $$slots.title || title}
+    <div class={headCls}>
+      <slot name="title">
+        { title }
+      </slot>
+    </div>
+  {/if}
+  <div class={contentCls}>
+
+    {#if $$slots.prefix || prefix}
+      <div class={prefixCls}>
+        <slot name="prefix">
+          <span>{ prefix }</span>
+        </slot>
+      </div>
+    {/if}
+
+    <span class={valueCls} style={valueStyle}>
+        { displayValue() }
+    </span>
+
+    {#if $$slots.suffix || suffix}
+      <div class={suffixCls}>
+        <slot name="suffix">
+          <span>{ suffix }</span>
+        </slot>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/components/Statistic/src/types.d.ts b/components/Statistic/src/types.d.ts
@@ -1,6 +1,43 @@
 /// <reference types="svelte" />
 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<string, string>
-}
+}
diff --git 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<Theme>;
 
 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
@@ -0,0 +1,8 @@
+export const statisticShortcuts: Record<string, string> = {
+  // 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',
+};