-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added KScrollbar component (#379)
- Loading branch information
1 parent
807b491
commit 6e56664
Showing
28 changed files
with
418 additions
and
75 deletions.
There are no files selected for viewing
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
10 changes: 5 additions & 5 deletions
10
components/Dropdown/__test__/__snapshots__/dropdown.spec.ts.snap
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
5 changes: 5 additions & 0 deletions
5
components/Scrollbar/__test__/__snapshots__/scrollbar.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 |
---|---|---|
@@ -0,0 +1,5 @@ | ||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
||
exports[`Test: KScrollbar > basic render 1`] = `"<div class=\\"k-scrollbar k-scrollbar--test\\" style=\\"--k-scrollbar--thumb__radius: 50px; --k-scrollbar--thumb: red; --k-scrollbar__h: 10px; --k-scrollbar__w: 10px; --k-scrollbar--track__radius: 50px; --k-scrollbar--track: green;\\"></div>"`; | ||
exports[`Test: KScrollbar > props: cls 1`] = `"<div class=\\"k-scrollbar k-scrollbar--test\\" style=\\"--k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent;\\"></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,49 @@ | ||
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; | ||
import KScrollbar from '../src'; | ||
|
||
let host; | ||
|
||
const initHost = () => { | ||
host = globalThis.document.createElement('div'); | ||
host.setAttribute('id', 'host'); | ||
globalThis.document.body.appendChild(host); | ||
}; | ||
beforeEach(() => { | ||
initHost(); | ||
vi.useFakeTimers(); | ||
}); | ||
afterEach(() => { | ||
host.remove(); | ||
vi.useRealTimers(); | ||
}); | ||
|
||
describe('Test: KScrollbar', () => { | ||
test('props: cls', async () => { | ||
const instance = new KScrollbar({ | ||
target: host, | ||
props: { | ||
cls: 'k-scrollbar--test' | ||
} | ||
}); | ||
expect(instance).toBeTruthy(); | ||
expect(host!.innerHTML.includes('k-scrollbar--test')).toBeTruthy(); | ||
expect(host.innerHTML).matchSnapshot(); | ||
}); | ||
|
||
test('basic render', async () => { | ||
const instance = new KScrollbar({ | ||
target: host, | ||
props: { | ||
cls: 'k-scrollbar--test', | ||
width: '10px', | ||
height: '10px', | ||
thumbBackground: 'red', | ||
thumbRadius: '50px', | ||
trackRadius: '50px', | ||
trackBackground: 'green' | ||
} | ||
}); | ||
expect(instance).toBeTruthy(); | ||
expect(host.innerHTML).matchSnapshot(); | ||
}); | ||
}); |
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,48 @@ | ||
{ | ||
"name": "@ikun-ui/scrollbar", | ||
"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 |
---|---|---|
@@ -0,0 +1,60 @@ | ||
<script lang="ts"> | ||
import { getPrefixCls } from '@ikun-ui/utils'; | ||
import { clsx } from 'clsx'; | ||
import type { KScrollbarProps } from './types'; | ||
import { genCSSVariable, scrollDefaultProps } from './utils'; | ||
export let css: KScrollbarProps['css'] = scrollDefaultProps.css; | ||
export let trackBackground: KScrollbarProps['trackBackground'] = | ||
scrollDefaultProps.trackBackground; | ||
export let trackRadius: KScrollbarProps['trackRadius'] = scrollDefaultProps.trackRadius; | ||
export let width: KScrollbarProps['width'] = scrollDefaultProps.width; | ||
export let height: KScrollbarProps['height'] = scrollDefaultProps.height; | ||
export let thumbBackground: KScrollbarProps['thumbBackground'] = | ||
scrollDefaultProps.thumbBackground; | ||
export let thumbRadius: KScrollbarProps['thumbRadius'] = scrollDefaultProps.thumbRadius; | ||
export let cls: KScrollbarProps['cls'] = scrollDefaultProps.cls; | ||
export let attrs: KScrollbarProps['attrs'] = scrollDefaultProps.attrs; | ||
let style = css; | ||
$: { | ||
style = genCSSVariable({ | ||
css, | ||
trackBackground, | ||
trackRadius, | ||
width, | ||
height, | ||
thumbBackground, | ||
thumbRadius, | ||
cls, | ||
attrs | ||
}); | ||
} | ||
let element: HTMLDivElement | null = null; | ||
export function getElm() { | ||
return element; | ||
} | ||
const prefixCls = getPrefixCls('scrollbar'); | ||
$: cnames = clsx(prefixCls, cls); | ||
</script> | ||
|
||
<div class={cnames} bind:this={element} {...$$restProps} {...attrs} {style}> | ||
<slot /> | ||
</div> | ||
|
||
<style> | ||
:global(.k-scrollbar::-webkit-scrollbar-track-piece) { | ||
background: var(--k-scrollbar--track); | ||
border-radius: var(--k-scrollbar--track__radius); | ||
} | ||
:global(.k-scrollbar::-webkit-scrollbar) { | ||
width: var(--k-scrollbar__w); | ||
height: var(--k-scrollbar__h); | ||
} | ||
:global(.k-scrollbar::-webkit-scrollbar-thumb) { | ||
background: var(--k-scrollbar--thumb); | ||
border-radius: var(--k-scrollbar--thumb__radius); | ||
} | ||
</style> |
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,5 @@ | ||
/// <reference types="./types" /> | ||
import Scrollbar from './index.svelte'; | ||
export { Scrollbar as KScrollbar }; | ||
export { scrollDefaultProps, genCSSVariable } from './utils'; | ||
export default Scrollbar; |
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,13 @@ | ||
/// <reference types="svelte" /> | ||
import type { ClassValue } from 'clsx'; | ||
export type KScrollbarProps = { | ||
css: string; | ||
trackBackground: string; | ||
trackRadius: string; | ||
width: string; | ||
height: string; | ||
thumbBackground: string; | ||
thumbRadius: string; | ||
cls: ClassValue; | ||
attrs: Record<string, string>; | ||
}; |
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,34 @@ | ||
import type { KScrollbarProps } from './types'; | ||
|
||
export const scrollDefaultProps: KScrollbarProps = { | ||
css: '', | ||
trackBackground: 'transparent', | ||
trackRadius: '20px', | ||
width: '6px', | ||
height: '6px', | ||
thumbBackground: 'var(--ikun-light-800)', | ||
thumbRadius: '20px', | ||
cls: undefined, | ||
attrs: {} | ||
}; | ||
|
||
export const genCSSVariable = (props: KScrollbarProps) => { | ||
const cssVariable = { | ||
['--k-scrollbar--track']: props.trackBackground, | ||
['--k-scrollbar--track__radius']: props.trackRadius, | ||
['--k-scrollbar__w']: props.width, | ||
['--k-scrollbar__h']: props.height, | ||
['--k-scrollbar--thumb']: props.thumbBackground, | ||
['--k-scrollbar--thumb__radius']: props.thumbRadius | ||
}; | ||
|
||
let style = props.css; | ||
Object.keys(cssVariable).forEach((k) => { | ||
const value = cssVariable[k as keyof typeof cssVariable]; | ||
if (value) { | ||
style = `${k}: ${value};${style}`; | ||
} | ||
}); | ||
|
||
return style; | ||
}; |
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,11 @@ | ||
{ | ||
"extends": "@tsconfig/svelte/tsconfig.json", | ||
|
||
"compilerOptions": { | ||
"noImplicitAny": true, | ||
"strict": true, | ||
"declaration": true | ||
}, | ||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"], | ||
"exclude": ["node_modules/*", "**/*.spec.ts"] | ||
} |
Oops, something went wrong.