-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b8ed920
commit 71c0f1e
Showing
12 changed files
with
449 additions
and
360 deletions.
There are no files selected for viewing
8 changes: 7 additions & 1 deletion
8
components/Statistic/__test__/__snapshots__/statistic.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,9 @@ | ||
| // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
|
||
| exports[`Test: KStatistic > props: cls 1`] = `"<div class=\\"k-statistic k-statistic--base k-statistic--test\\"></div>"`; | ||
| exports[`Test: KStatistic > props: cls 1`] = `"<div class=\\"k-statistic k-statistic--test\\"> <div class=\\"k-statistic__content\\"> <span class=\\"k-statistic__value\\">0</span> </div></div>"`; | ||
| exports[`Test: KStatistic > props: title 1`] = `"<div class=\\"k-statistic\\"><div class=\\"k-statistic__head\\">test-title</div> <div class=\\"k-statistic__content\\"> <span class=\\"k-statistic__value\\">0</span> </div></div>"`; | ||
| exports[`Test: KStatistic > props: value 1`] = `"<div class=\\"k-statistic\\"> <div class=\\"k-statistic__content\\"> <span class=\\"k-statistic__value\\">57,454,157</span> </div></div>"`; | ||
| exports[`Test: KStatistic > slot: suffix 1`] = `"<div class=\\"k-statistic\\"><div class=\\"k-statistic__head\\">Daily active users</div> <div class=\\"k-statistic__content\\"> <span class=\\"k-statistic__value\\">268,500</span> <div class=\\"k-statistic__suffix\\"><span slot=\\"suffix\\">suffix</span></div></div></div>"`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <script lang="ts"> | ||
| import { KStatistic } from '@ikun-ui/statistic'; | ||
| </script> | ||
|
|
||
| <KStatistic title="Daily active users" value={268500}> | ||
| <span slot="prefix">prefix</span> | ||
| </KStatistic> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <script lang="ts"> | ||
| import { KStatistic } from '@ikun-ui/statistic'; | ||
| </script> | ||
|
|
||
| <KStatistic title="Daily active users" value={268500}> | ||
| <span slot="suffix">suffix</span> | ||
| </KStatistic> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,48 @@ | ||
| { | ||
| "name": "@ikun-ui/statistic", | ||
| "version": "0.1.0", | ||
| "type": "module", | ||
| "main": "src/index.ts", | ||
| "types": "src/index.d.ts", | ||
| "svelte": "src/index.ts", | ||
| "keywords": [ | ||
| "svelte", | ||
| "svelte3", | ||
| "web component", | ||
| "component", | ||
| "react", | ||
| "vue", | ||
| "svelte-kit", | ||
| "dx" | ||
| ], | ||
| "files": [ | ||
| "dist", | ||
| "package.json" | ||
| ], | ||
| "scripts": { | ||
| "build": "npm run build:js && npm run build:svelte", | ||
| "build:js": "tsc -p . --outDir dist/ --rootDir src/", | ||
| "build:svelte": "svelte-strip strip src/ dist", | ||
| "publish:pre": "node ../../scripts/pre-publish.js", | ||
| "publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.js", | ||
| "svelte": "dist/index.js", | ||
| "types": "dist/index.d.ts" | ||
| }, | ||
| "dependencies": { | ||
| "@ikun-ui/icon": "workspace:*", | ||
| "@ikun-ui/utils": "workspace:*", | ||
| "baiwusanyu-utils": "^1.0.16", | ||
| "clsx": "^2.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@tsconfig/svelte": "^5.0.2", | ||
| "svelte-strip": "^2.0.0", | ||
| "tslib": "^2.6.2", | ||
| "typescript": "^5.3.2" | ||
| } | ||
| } | ||
| "name": "@ikun-ui/statistic", | ||
| "version": "0.1.0", | ||
| "type": "module", | ||
| "main": "src/index.ts", | ||
| "types": "src/index.d.ts", | ||
| "svelte": "src/index.ts", | ||
| "keywords": [ | ||
| "svelte", | ||
| "svelte3", | ||
| "web component", | ||
| "component", | ||
| "react", | ||
| "vue", | ||
| "svelte-kit", | ||
| "dx" | ||
| ], | ||
| "files": [ | ||
| "dist", | ||
| "package.json" | ||
| ], | ||
| "scripts": { | ||
| "build": "npm run build:js && npm run build:svelte", | ||
| "build:js": "tsc -p . --outDir dist/ --rootDir src/", | ||
| "build:svelte": "svelte-strip strip src/ dist", | ||
| "publish:pre": "node ../../scripts/pre-publish.js", | ||
| "publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.js", | ||
| "svelte": "dist/index.js", | ||
| "types": "dist/index.d.ts" | ||
| }, | ||
| "dependencies": { | ||
| "@ikun-ui/icon": "workspace:*", | ||
| "@ikun-ui/utils": "workspace:*", | ||
| "baiwusanyu-utils": "^1.0.16", | ||
| "clsx": "^2.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@tsconfig/svelte": "^5.0.2", | ||
| "svelte-strip": "^2.0.0", | ||
| "tslib": "^2.6.2", | ||
| "typescript": "^5.3.2" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,68 @@ | ||
| <script lang="ts"> | ||
| import { getPrefixCls } from '@ikun-ui/utils'; | ||
| import { getPrefixCls } from '@ikun-ui/utils'; | ||
| import { clsx } from 'clsx'; | ||
| import type { KStatisticProps } from "./types"; | ||
| import { isFunction, isNumber } from "baiwusanyu-utils"; | ||
| 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"] = {}; | ||
| 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'] = {}; | ||
| $: displayValue = () => { | ||
| if (isFunction(formatter)) return formatter!(value) | ||
| $: displayValue = () => { | ||
| if (isFunction(formatter)) return formatter!(value); | ||
| if (!isNumber(value)) return 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 : '') | ||
| } | ||
| 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`); | ||
| 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}> | ||
| {#if $$slots.title || title} | ||
| <div class={headCls}> | ||
| <slot name="title"> | ||
| { title } | ||
| </slot> | ||
| </div> | ||
| {/if} | ||
| <div class={contentCls}> | ||
| {#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} | ||
|
|
||
| {#if $$slots.prefix || prefix} | ||
| <div class={prefixCls}> | ||
| <slot name="prefix"> | ||
| <span>{ prefix }</span> | ||
| </slot> | ||
| </div> | ||
| {/if} | ||
| <span class={valueCls} style={valueStyle}> | ||
| {displayValue()} | ||
| </span> | ||
|
|
||
| <span class={valueCls} style={valueStyle}> | ||
| { displayValue() } | ||
| </span> | ||
|
|
||
| {#if $$slots.suffix || suffix} | ||
| <div class={suffixCls}> | ||
| <slot name="suffix"> | ||
| <span>{ suffix }</span> | ||
| </slot> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| {#if $$slots.suffix || suffix} | ||
| <div class={suffixCls}> | ||
| <slot name="suffix"> | ||
| <span>{suffix}</span> | ||
| </slot> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.