Skip to content

Commit

Permalink
release: v1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhensherlock
zhensherlock committed Oct 31, 2023
1 parent b1d10c3 commit b8ac923
Show file tree
Hide file tree
Showing 24 changed files with 207 additions and 275 deletions.
5 changes: 0 additions & 5 deletions .changeset/brown-bags-compete.md
View file

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/gentle-clouds-reply.md
View file

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/happy-bugs-look.md
View file

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/two-geese-double.md
View file

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/unlucky-coins-smile.md
View file

This file was deleted.

2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2023 Company UI
Copyright (c) 2023 Watermark Design

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
54 changes: 17 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<p align="center">
<a href="https://watermark-design.github.io/watermark/" target="_blank" rel="noopener noreferrer">
<img height="100" src="https://watermark-design.github.io/watermark/full-logo.png" alt="company ui">
<img height="100" src="https://watermark-design.github.io/watermark/full-logo.png" alt="watermark design">
</a>
</p>
<p align="center">
Expand All @@ -21,66 +21,46 @@ Works with both Vue 2 , Vue 3 And React.

### Vue

<a href="https://npmjs.com/package/@watermark-design/vue"><img src="https://badgen.net/npm/v/@watermark-design/vue" alt="npm package"></a>
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/vue">
<a href="https://npmjs.com/package/@watermark-design/vue"><img src="https://badgen.net/npm/v/@watermark-design/vue" alt="npm package"></a> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/vue">

```ts
import '@watermark-design/style';
import WatermarkDesign from '@watermark-design/vue';
app.use(WatermarkDesign);
```

```vue
<Watermark :width="200" :height="200" content="hello watermark" />
<Watermark content="hello watermark" :width="200" :height="200">
<div style="height: 400px"></div>
</Watermark>
```

[//]: # (### React)
### React

[//]: # ()
[//]: # (<a href="https://npmjs.com/package/@watermark-design/react"><img src="https://badgen.net/npm/v/@watermark-design/react" alt="npm package"></a>)
<a href="https://npmjs.com/package/@watermark-design/react"><img src="https://badgen.net/npm/v/@watermark-design/react" alt="npm package"></a> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/react">

[//]: # (<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/react">)

[//]: # ()
[//]: # (```ts)

[//]: # (import '@watermark-design/style';)

[//]: # (import { AutoComplete } from '@watermark-design/react';)

[//]: # (```)

[//]: # ()
[//]: # (```jsx)

[//]: # (<AutoComplete)

[//]: # ( popupAppendToBody={false})

[//]: # ( defaultValue={inputValue})

[//]: # ( value={inputValue})

[//]: # ( onChange={setInputValue})

[//]: # (></AutoComplete>)
```ts
import { Watermark } from '@watermark-design/react';
```

[//]: # (```)
```jsx
<Watermark width={200} height={200} content={inputValue}>
<div style={{ height: 400 }}></div>
</Watermark>
```

### Dom

<a href="https://npmjs.com/package/@watermark-design/dom"><img src="https://badgen.net/npm/v/@watermark-design/dom" alt="npm package"></a>
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/dom">
<a href="https://npmjs.com/package/@watermark-design/dom"><img src="https://badgen.net/npm/v/@watermark-design/dom" alt="npm package"></a> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/dom">

```ts
import '@watermark-design/style';
import { Watermark } from '@watermark-design/dom';

const watermark = new Watermark({
content: 'hello my watermark',
width: 200,
height: 200,
});
watermark.create();
```

## Documentation
Expand Down
50 changes: 19 additions & 31 deletions README_zh.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<p align="center">
<a href="https://watermark-design.github.io/watermark/" target="_blank" rel="noopener noreferrer">
<img width="300" src="https://watermark-design.github.io/watermark/logo-text.png" alt="company ui">
<img width="300" src="https://watermark-design.github.io/watermark/logo-text.png" alt="watermark design">
</a>
</p>
<p align="center">
Expand All @@ -17,58 +17,46 @@

### Vue

<a href="https://npmjs.com/package/@watermark-design/vue"><img src="https://badgen.net/npm/v/@watermark-design/vue" alt="npm package"></a> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/vue">

```ts
import '@watermark-design/style';
import WatermarkDesign from '@watermark-design/vue';
app.use(WatermarkDesign);
```

```vue
<Watermark :width="200" :height="200" content="hello watermark" />
<Watermark content="hello watermark" :width="200" :height="200">
<div style="height: 400px"></div>
</Watermark>
```

[//]: # (### React)

[//]: # ()
[//]: # (```ts)

[//]: # (import '@watermark-design/style';)

[//]: # (import { Watermark } from '@watermark-design/react';)

[//]: # (```)

[//]: # ()
[//]: # (```jsx)

[//]: # (<Watermark)
### React

[//]: # ( content="hello my watermark")
<a href="https://npmjs.com/package/@watermark-design/react"><img src="https://badgen.net/npm/v/@watermark-design/react" alt="npm package"></a> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/react">

[//]: # ( width={200})

[//]: # ( height={200})

[//]: # (>)

[//]: # (</Watermark>)
```ts
import { Watermark } from '@watermark-design/react';
```

[//]: # (```)
```jsx
<Watermark width={200} height={200} content={inputValue}>
<div style={{ height: 400 }}></div>
</Watermark>
```

### Dom

<a href="https://npmjs.com/package/@watermark-design/dom"><img src="https://badgen.net/npm/v/@watermark-design/dom" alt="npm package"></a> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/dom">

```ts
import '@watermark-design/style';
import { Watermark } from '@watermark-design/dom';

const watermark = new Watermark({
content: 'hello my watermark',
width: 200,
height: 200,
onSuccess: () => {
// success callback
}
});
watermark.create();
```

## 文档
Expand Down
133 changes: 48 additions & 85 deletions docs/components/dom/watermark.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,94 +19,57 @@ onMounted(() => {
```ts
import { Watermark } from '@watermark-design/dom';

new Watermark({
const watermark = new Watermark({
content: 'hello my text watermark',
width: 200,
height: 200,
});
watermark.create();
```

[//]: # ()
[//]: # (## API)

[//]: # ()
[//]: # (### Attributes)

[//]: # ()
[//]: # (| Name | Description | Type | Default |)

[//]: # (| --- | --- | --- | --- |)

[//]: # (| target | id of the html element tag | `string` | - |)

[//]: # (| api | query data source | `string` | clearbit |)

[//]: # (| queryDelay | query data delay | `number` | 500 |)

[//]: # (| placeholder | input placeholder content | `string` | 请输入企业名称或统一社会信用代码 |)

[//]: # (| clearable | show clear button | `boolean` | true |)

[//]: # (| backFill | If backFill selected item the input when using keyboard | `boolean` | true |)

[//]: # (| popupAppendToBody | whether to append Dialog itself to body | `boolean` | true |)

[//]: # (| autoFocus | auto focus | `boolean` | true |)

[//]: # (| showSubmitButton | show submit button | `boolean` | true |)

[//]: # (| submitButtonLabel | submit button label | `string` | Submit |)

[//]: # (| offsetTop | pixels to offset from input bottom | `number` | 5 |)

[//]: # (| autoFlip | auto flip | `boolean` | false |)

[//]: # (| avatarUrl | avatar url | `string` | - |)

[//]: # (| clearIcon | clear icon | `string` | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59z"/></svg> |)

[//]: # (| history | history options | `HistoryOptions` | [HistoryOptions]&#40;#historyoptions&#41; |)

[//]: # ()
[//]: # (### HistoryOptions)

[//]: # ()
[//]: # (| Name | Description | Type | Default |)

[//]: # (| --- | --- | --- | --- |)

[//]: # (| enabled | history enabled | `boolean` | true |)

[//]: # (| type | history save mode | `string` | localStorage |)

[//]: # (| key | history save key | `string` | company-history |)

[//]: # (| showClear | show clear history link | `boolean` | true |)

[//]: # (| itemIcon | history item icon | `string` | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m15.1 19.37l1 1.74c-.96.44-2.01.73-3.1.84v-2.02c.74-.09 1.44-.28 2.1-.56zM4.07 13H2.05c.11 1.1.4 2.14.84 3.1l1.74-1c-.28-.66-.47-1.36-.56-2.1zM15.1 4.63l1-1.74c-.96-.44-2-.73-3.1-.84v2.02c.74.09 1.44.28 2.1.56zM19.93 11h2.02c-.11-1.1-.4-2.14-.84-3.1l-1.74 1c.28.66.47 1.36.56 2.1zM8.9 19.37l-1 1.74c.96.44 2.01.73 3.1.84v-2.02c-.74-.09-1.44-.28-2.1-.56zM11 4.07V2.05c-1.1.11-2.14.4-3.1.84l1 1.74c.66-.28 1.36-.47 2.1-.56zm7.36 3.1l1.74-1.01c-.63-.87-1.4-1.64-2.27-2.27l-1.01 1.74c.59.45 1.1.96 1.54 1.54zM4.63 8.9l-1.74-1c-.44.96-.73 2-.84 3.1h2.02c.09-.74.28-1.44.56-2.1zm15.3 4.1c-.09.74-.28 1.44-.56 2.1l1.74 1c.44-.96.73-2.01.84-3.1h-2.02zm-3.1 5.36l1.01 1.74c.87-.63 1.64-1.4 2.27-2.27l-1.74-1.01c-.45.59-.96 1.1-1.54 1.54zM7.17 5.64l-1-1.75c-.88.64-1.64 1.4-2.27 2.28l1.74 1.01a7.7 7.7 0 0 1 1.53-1.54zM5.64 16.83l-1.74 1c.63.87 1.4 1.64 2.27 2.27l1.01-1.74a7.7 7.7 0 0 1-1.54-1.53zM13 7h-2v5.41l4.29 4.29l1.41-1.41l-3.7-3.7V7z"/></svg> |)

[//]: # (| clearIcon | clear history link icon | `string` | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M15 2h-3.5l-1-1h-5l-1 1H1v2h14zm1 7c-.7 0-1.37.1-2 .29V5H2v12c0 1.1.9 2 2 2h5.68A6.999 6.999 0 0 0 23 16c0-3.87-3.13-7-7-7zm-7 7c0 .34.03.67.08 1H4V7h8v3.26c-1.81 1.27-3 3.36-3 5.74zm7 5c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5z"/><path fill="currentColor" d="M16.5 12H15v5l3.6 2.1l.8-1.2l-2.9-1.7z"/></svg> |)

[//]: # ()
[//]: # (### Events)

[//]: # ()
[//]: # (| Name | Description | Type |)

[//]: # (| --- | --- | --- |)

[//]: # (| onFetch | triggers when query data | `Function` |)

[//]: # (| onAbortFetch | triggers when abort query data | `Function` |)

[//]: # (| onSelect | triggers when a suggestion is clicked | `Function` |)

[//]: # (| onClear | triggers when the input is cleared by clicking the clear button | `Function` |)

[//]: # (| onFocus | triggers when the input focuses | `Function` |)

[//]: # (| onBlur | triggers when the input blurs | `Function` |)

[//]: # (| submitCallback | triggers when the button submit | `Function` |)

[//]: # (| onDropdownVisibleChange | triggers when the dropdown appears/disappears | `Function` |)
[//]: #
[//]: # '## API'
[//]: #
[//]: # '### Attributes'
[//]: #
[//]: # '| Name | Description | Type | Default |'
[//]: # '| --- | --- | --- | --- |'
[//]: # '| target | id of the html element tag | `string` | - |'
[//]: # '| api | query data source | `string` | clearbit |'
[//]: # '| queryDelay | query data delay | `number` | 500 |'
[//]: # '| placeholder | input placeholder content | `string` | 请输入企业名称或统一社会信用代码 |'
[//]: # '| clearable | show clear button | `boolean` | true |'
[//]: # '| backFill | If backFill selected item the input when using keyboard | `boolean` | true |'
[//]: # '| popupAppendToBody | whether to append Dialog itself to body | `boolean` | true |'
[//]: # '| autoFocus | auto focus | `boolean` | true |'
[//]: # '| showSubmitButton | show submit button | `boolean` | true |'
[//]: # '| submitButtonLabel | submit button label | `string` | Submit |'
[//]: # '| offsetTop | pixels to offset from input bottom | `number` | 5 |'
[//]: # '| autoFlip | auto flip | `boolean` | false |'
[//]: # '| avatarUrl | avatar url | `string` | - |'
[//]: # '| clearIcon | clear icon | `string` | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59z"/></svg> |'
[//]: # '| history | history options | `HistoryOptions` | [HistoryOptions](#historyoptions) |'
[//]: #
[//]: # '### HistoryOptions'
[//]: #
[//]: # '| Name | Description | Type | Default |'
[//]: # '| --- | --- | --- | --- |'
[//]: # '| enabled | history enabled | `boolean` | true |'
[//]: # '| type | history save mode | `string` | localStorage |'
[//]: # '| key | history save key | `string` | company-history |'
[//]: # '| showClear | show clear history link | `boolean` | true |'
[//]: # '| itemIcon | history item icon | `string` | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m15.1 19.37l1 1.74c-.96.44-2.01.73-3.1.84v-2.02c.74-.09 1.44-.28 2.1-.56zM4.07 13H2.05c.11 1.1.4 2.14.84 3.1l1.74-1c-.28-.66-.47-1.36-.56-2.1zM15.1 4.63l1-1.74c-.96-.44-2-.73-3.1-.84v2.02c.74.09 1.44.28 2.1.56zM19.93 11h2.02c-.11-1.1-.4-2.14-.84-3.1l-1.74 1c.28.66.47 1.36.56 2.1zM8.9 19.37l-1 1.74c.96.44 2.01.73 3.1.84v-2.02c-.74-.09-1.44-.28-2.1-.56zM11 4.07V2.05c-1.1.11-2.14.4-3.1.84l1 1.74c.66-.28 1.36-.47 2.1-.56zm7.36 3.1l1.74-1.01c-.63-.87-1.4-1.64-2.27-2.27l-1.01 1.74c.59.45 1.1.96 1.54 1.54zM4.63 8.9l-1.74-1c-.44.96-.73 2-.84 3.1h2.02c.09-.74.28-1.44.56-2.1zm15.3 4.1c-.09.74-.28 1.44-.56 2.1l1.74 1c.44-.96.73-2.01.84-3.1h-2.02zm-3.1 5.36l1.01 1.74c.87-.63 1.64-1.4 2.27-2.27l-1.74-1.01c-.45.59-.96 1.1-1.54 1.54zM7.17 5.64l-1-1.75c-.88.64-1.64 1.4-2.27 2.28l1.74 1.01a7.7 7.7 0 0 1 1.53-1.54zM5.64 16.83l-1.74 1c.63.87 1.4 1.64 2.27 2.27l1.01-1.74a7.7 7.7 0 0 1-1.54-1.53zM13 7h-2v5.41l4.29 4.29l1.41-1.41l-3.7-3.7V7z"/></svg> |'
[//]: # '| clearIcon | clear history link icon | `string` | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M15 2h-3.5l-1-1h-5l-1 1H1v2h14zm1 7c-.7 0-1.37.1-2 .29V5H2v12c0 1.1.9 2 2 2h5.68A6.999 6.999 0 0 0 23 16c0-3.87-3.13-7-7-7zm-7 7c0 .34.03.67.08 1H4V7h8v3.26c-1.81 1.27-3 3.36-3 5.74zm7 5c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5z"/><path fill="currentColor" d="M16.5 12H15v5l3.6 2.1l.8-1.2l-2.9-1.7z"/></svg> |'
[//]: #
[//]: # '### Events'
[//]: #
[//]: # '| Name | Description | Type |'
[//]: # '| --- | --- | --- |'
[//]: # '| onFetch | triggers when query data | `Function` |'
[//]: # '| onAbortFetch | triggers when abort query data | `Function` |'
[//]: # '| onSelect | triggers when a suggestion is clicked | `Function` |'
[//]: # '| onClear | triggers when the input is cleared by clicking the clear button | `Function` |'
[//]: # '| onFocus | triggers when the input focuses | `Function` |'
[//]: # '| onBlur | triggers when the input blurs | `Function` |'
[//]: # '| submitCallback | triggers when the button submit | `Function` |'
[//]: # '| onDropdownVisibleChange | triggers when the dropdown appears/disappears | `Function` |'
Loading

0 comments on commit b8ac923

Please sign in to comment.