mirror of https://github.com/Budibase/budibase.git
mike12345567
5 years ago
34 changed files with 939 additions and 97 deletions
@ -0,0 +1,214 @@ |
|||
<p align="center"> |
|||
<a href="https://www.budibase.com"> |
|||
<img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" /> |
|||
</a> |
|||
</p> |
|||
<h1 align="center"> |
|||
Budibase |
|||
</h1> |
|||
|
|||
<h3 align="center"> |
|||
使って楽しいローコードプラットフォーム |
|||
</h3> |
|||
<p align="center"> |
|||
Budibaseはオープンソースのローコードプラットフォームで、生産性を向上させるツールを簡単に構築することができます。 |
|||
</p> |
|||
|
|||
<h3 align="center"> |
|||
🤖 🎨 🚀 |
|||
</h3> |
|||
<br> |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase design ui" src="https://res.cloudinary.com/daog6scxm/image/upload/v1633524049/ui/design-ui-wide-mobile_gdaveq.jpg"> |
|||
</p> |
|||
|
|||
<p align="center"> |
|||
<a href="https://github.com/Budibase/budibase/releases"> |
|||
<img alt="GitHub all releases" src="https://img.shields.io/github/downloads/Budibase/budibase/total"> |
|||
</a> |
|||
<a href="https://github.com/Budibase/budibase/releases"> |
|||
<img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/Budibase/budibase"> |
|||
</a> |
|||
<a href="https://twitter.com/intent/follow?screen_name=budibase"> |
|||
<img src="https://img.shields.io/twitter/follow/budibase?style=social" alt="Follow @budibase" /> |
|||
</a> |
|||
<img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Code of conduct" /> |
|||
<a href="https://codecov.io/gh/Budibase/budibase"> |
|||
<img src="https://codecov.io/gh/Budibase/budibase/graph/badge.svg?token=E8W2ZFXQOH"/> |
|||
</a> |
|||
</p> |
|||
|
|||
<h3 align="center"> |
|||
<a href="https://docs.budibase.com/getting-started">はじめに</a> |
|||
<span> · </span> |
|||
<a href="https://docs.budibase.com">ドキュメント</a> |
|||
<span> · </span> |
|||
<a href="https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas">機能リクエスト</a> |
|||
<span> · </span> |
|||
<a href="https://github.com/Budibase/budibase/issues">バグ報告</a> |
|||
<span> · </span> |
|||
サポート: <a href="https://github.com/Budibase/budibase/discussions">ディスカッション</a> |
|||
</h3> |
|||
|
|||
<br /><br /> |
|||
## ✨ 特徴 |
|||
|
|||
### "本物"のソフトウェアを構築できます |
|||
ほかのプラットフォームとは違い、Budibaseだけでシングルページのアプリケーションを制作し完成させることができます。Budibaseで作られたアプリケーションは素晴らしいパフォーマンスを持っており、レスポンシブデザインにも対応しています。ユーザー達にいい印象を与えること間違いなしでしょう！ |
|||
<br /><br /> |
|||
|
|||
### 拡張性が高くオープンソース |
|||
Budibaseはオープンソースで、GPL v3ライセンスの下に公開されています。このことは、Budibaseが常にあなたのそばにいるという安心感を与えてくれることでしょう。そして、私たちは開発者に優しい環境を提供しているので、あなたは好きなだけにソースコードをフォークして改造、もしくは直接Budibaseにコントリビュートすることができます。 |
|||
<br /><br /> |
|||
|
|||
### 既存のデータ、もしくは一から始める |
|||
Budibaseはいろんなツールから既存のデータを使用できます。たとえばMongoDB、CouchDB、 PostgreSQL、MySQL、Airtable、S3、DynamoDB、REST APIなど。ほかのプラットフォームにない特徴として、Budibaseはデータなしの状態でビジネスアプリケーションの構築を一から始めることができます。 [新しいデータリソースをリクエスト](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas)。 |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase data" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970242/Out%20of%20beta%20launch/data_n1tlhf.png"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### パワフルな内蔵コンポーネントでアプリケーションを設計し構築 |
|||
|
|||
Budibaseには、美しくデザインされた強力なコンポーネントが付属しており、それら使用しUIを簡単に構築することができます。また、CSSによるスタイリングオプションも豊富に用意されているので、よりクリエイティブな表現もも可能です。 |
|||
[Request new component](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas)。 |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase design" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970243/Out%20of%20beta%20launch/design-like-a-pro_qhlfeu.gif"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### プロセスを自動化し、ほかのツールと連携し、Webhookをでつながる！ |
|||
定型化した作業を自動化して時間を節約しましょう。Webhookに接続、Eメールの自動送信など、すべてBudibaseに任せましょう。 こちらで簡単に [新しいオートメーションを作る](https://github.com/Budibase/automations)または[新しいオートメーションをリクエストすることができます](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas)。 |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase automations" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970486/Out%20of%20beta%20launch/automation_riro7u.png"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### 使い親しんだツールとの統合 |
|||
Budibaseは多くの人気ツールと統合されており、あなたのニーズに合わせたパーフェクトなアプリケーションを構築することができます。 |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase integrations" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970242/Out%20of%20beta%20launch/integrations_kc7dqt.png"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### 管理者のパラダイス |
|||
Budibaseはどんな規模のプロジェクトにも柔軟に対応できます。Budibaseを使えば、個人または組織のサーバーでセルフホスティングし、ユーザー、オンボーディング、SMTP、アプリ、グループ、テーマなどをひとまとめに管理することが可能です。また、ユーザーやグループにアプリポータルを提供し、グループ管理者にユーザー管理を委ねることも可能です。 |
|||
- プロモーションビデオを視聴する： https://youtu.be/xoljVpty_Kw |
|||
|
|||
<br /><br /><br /> |
|||
|
|||
## 🏁 始めましょう |
|||
|
|||
<a href="https://docs.budibase.com/self-hosting/self-host"><img src="https://res.cloudinary.com/daog6scxm/image/upload/v1634808888/logo/deploy_npl9za.png" /></a> |
|||
|
|||
Docker、KubernetesもしくはDegital Oceanを使用しセルフホスティングするか、セルフホスティングに困難がある、もしくは今すぐ開始したい場合はBudibase Cloudを使用しすぐに始めましょう。 |
|||
|
|||
### [Budibaseをセルフホスティングする](https://docs.budibase.com/self-hosting/self-host) |
|||
|
|||
### [Budibase Cloudを使用する](https://budibase.com) |
|||
|
|||
|
|||
<br /><br /> |
|||
|
|||
## 🎓 Budibaseを学ぶ |
|||
|
|||
Budibaseのドキュメント[はここです](https://docs.budibase.com)。 |
|||
<br /> |
|||
|
|||
|
|||
<br /><br /> |
|||
|
|||
## 💬 コミュニティ |
|||
|
|||
もし何か問題がある、もしくはBudibaseコミュニティのほかのユーザーと交流したいのであれば私たちの[Github discussions](https://github.com/Budibase/budibase/discussions)までお越しください。 |
|||
|
|||
<br /><br /><br /> |
|||
|
|||
|
|||
## ❗ 行動規範 |
|||
|
|||
Budibase は、すべての人を歓迎し、多様で、ハラスメントのない環境を提供することに尽力しています。Budibase コミュニティに参加するすべての人たちが私たちの[**行動規範**](https://github.com/Budibase/budibase/blob/HEAD/.github/CODE_OF_CONDUCT.md)を遵守していただくことお願いします。必ず読んでください。 |
|||
<br /> |
|||
|
|||
|
|||
<br /><br /> |
|||
|
|||
|
|||
## 🙌 Budibaseにコントリビュート |
|||
|
|||
|
|||
バグレポートからプルリクエストの作成まで、すべての貢献は感謝、そして歓迎されております。新しい新機能の実装やAPIの変更を計画している場合は、まずIssueを作成してください。これであなたの貴重な考えは私たちにも伝わり、無駄とはなりません。 |
|||
|
|||
### どこから始めるか混乱していますか？ |
|||
ここはコントリビュートをはじめるための最適な場所です！ [First time issues project](https://github.com/Budibase/budibase/projects/22). |
|||
|
|||
### リポジトリの構成 |
|||
Budibaseは、lernaによってmonorepo方式で管理されています。budibase パッケージのビルドと公開はlernaによって管理されています。Budibaseを構成するパッケージは以下の通り： |
|||
|
|||
- [packages/builder](https://github.com/Budibase/budibase/tree/HEAD/packages/builder) - budibase builder クライアントサイドのsvelteアプリケーションのコードが含まれています。 |
|||
|
|||
- [packages/client](https://github.com/Budibase/budibase/tree/HEAD/packages/client) - ブラウザ上で動作するモジュールで、JSONの定義を読み取り、そこから"生きている"Webアプリケーションを作成します。 |
|||
|
|||
- [packages/server](https://github.com/Budibase/budibase/tree/HEAD/packages/server) - budibaseのサーバーです。この Koa アプリは、builder アプリと budibase アプリの JS を提供し、データベースとファイル システムと対話するための API を提供する役割を担っています。 |
|||
|
|||
詳しくは[CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md)をご覧ください。 |
|||
|
|||
<br /><br /> |
|||
|
|||
|
|||
## 📝 ライセンス |
|||
|
|||
Budibase はオープンソースであり、[GPL v3](https://www.gnu.org/licenses/gpl-3.0.en.html)ライセンスの下に公開されています。クライアントとコンポーネントライブラリは [MPL](https://directory.fsf.org/wiki/License:MPL-2.0)で公開されています - ですから、あなたが制作したアプリケーションはどのようなライセンスでも公開することができます。 |
|||
|
|||
<br /><br /> |
|||
|
|||
## ⭐ スター数の履歴 |
|||
|
|||
[](https://starchart.cc/Budibase/budibase) |
|||
|
|||
ビルダーのアップデートの間に問題が発生する場合は[ここ](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md#troubleshooting)を参考に環境をクリアにしてください。 |
|||
|
|||
<br /><br /> |
|||
|
|||
## Contributors ✨ |
|||
|
|||
すばらしい皆さまに感謝しかありません。([emoji key](https://allcontributors.org/docs/en/emoji-key)): |
|||
|
|||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> |
|||
<!-- prettier-ignore-start --> |
|||
<!-- markdownlint-disable --> |
|||
<table> |
|||
<tr> |
|||
<td align="center"><a href="http://martinmck.com"><img src="https://avatars1.githubusercontent.com/u/11256663?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Martin McKeaveney</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Tests">⚠️</a> <a href="#infra-shogunpurple" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> |
|||
<td align="center"><a href="http://www.michaeldrury.co.uk/"><img src="https://avatars2.githubusercontent.com/u/4407001?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Drury</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Tests">⚠️</a> <a href="#infra-mike12345567" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> |
|||
<td align="center"><a href="https://github.com/aptkingston"><img src="https://avatars3.githubusercontent.com/u/9075550?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrew Kingston</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Tests">⚠️</a> <a href="#design-aptkingston" title="Design">🎨</a></td> |
|||
<td align="center"><a href="https://budibase.com/"><img src="https://avatars3.githubusercontent.com/u/3524181?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Shanks</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/kevmodrome"><img src="https://avatars3.githubusercontent.com/u/534488?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kevin Åberg Kultalahti</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://www.budibase.com/"><img src="https://avatars2.githubusercontent.com/u/49767913?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joe</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=joebudi" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=joebudi" title="Code">💻</a> <a href="#content-joebudi" title="Content">🖋</a> <a href="#design-joebudi" title="Design">🎨</a></td> |
|||
<td align="center"><a href="https://github.com/Rory-Powell"><img src="https://avatars.githubusercontent.com/u/8755148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rory Powell</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Tests">⚠️</a></td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center"><a href="https://github.com/PClmnt"><img src="https://avatars.githubusercontent.com/u/5665926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Peter Clement</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/Conor-Mack"><img src="https://avatars1.githubusercontent.com/u/36074859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Conor_Mack</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=Conor-Mack" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=Conor-Mack" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/pngwn"><img src="https://avatars1.githubusercontent.com/u/12937446?v=4?s=100" width="100px;" alt=""/><br /><sub><b>pngwn</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=pngwn" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=pngwn" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/HugoLd"><img src="https://avatars0.githubusercontent.com/u/26521848?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HugoLd</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=HugoLd" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/victoriasloan"><img src="https://avatars.githubusercontent.com/u/9913651?v=4?s=100" width="100px;" alt=""/><br /><sub><b>victoriasloan</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=victoriasloan" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/yashank09"><img src="https://avatars.githubusercontent.com/u/37672190?v=4?s=100" width="100px;" alt=""/><br /><sub><b>yashank09</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=yashank09" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/SOVLOOKUP"><img src="https://avatars.githubusercontent.com/u/53158137?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SOVLOOKUP</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=SOVLOOKUP" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/seoulaja"><img src="https://avatars.githubusercontent.com/u/15101654?v=4?s=100" width="100px;" alt=""/><br /><sub><b>seoulaja</b></sub></a><br /><a href="#translation-seoulaja" title="Translation">🌍</a></td> |
|||
<td align="center"><a href="https://github.com/mslourens"><img src="https://avatars.githubusercontent.com/u/1907152?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Maurits Lourens</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mslourens" title="Tests">⚠️</a> <a href="https://github.com/Budibase/budibase/commits?author=mslourens" title="Code">💻</a></td> |
|||
</tr> |
|||
</table> |
|||
|
|||
<!-- markdownlint-restore --> |
|||
<!-- prettier-ignore-end --> |
|||
|
|||
<!-- ALL-CONTRIBUTORS-LIST:END --> |
|||
|
|||
このプロジェクトは、[all-contributors](https://github.com/all-contributors/all-contributors)仕様に準拠しています。どのような貢献でも歓迎します。 |
|||
|
|||
@ -0,0 +1,42 @@ |
|||
<script> |
|||
import MarkdownEditor from "../../Markdown/MarkdownEditor.svelte" |
|||
|
|||
export let value = "" |
|||
export let placeholder = null |
|||
export let disabled = false |
|||
export let error = null |
|||
export let height = null |
|||
export let id = null |
|||
export let fullScreenOffset = null |
|||
export let easyMDEOptions = null |
|||
</script> |
|||
|
|||
<div class:error> |
|||
<MarkdownEditor |
|||
{value} |
|||
{placeholder} |
|||
{height} |
|||
{id} |
|||
{fullScreenOffset} |
|||
{disabled} |
|||
{easyMDEOptions} |
|||
on:change |
|||
/> |
|||
</div> |
|||
|
|||
<style> |
|||
.error :global(.EasyMDEContainer .editor-toolbar) { |
|||
border-top-color: var(--spectrum-semantic-negative-color-default); |
|||
border-left-color: var(--spectrum-semantic-negative-color-default); |
|||
border-right-color: var(--spectrum-semantic-negative-color-default); |
|||
} |
|||
.error :global(.EasyMDEContainer .CodeMirror) { |
|||
border-bottom-color: var(--spectrum-semantic-negative-color-default); |
|||
border-left-color: var(--spectrum-semantic-negative-color-default); |
|||
border-right-color: var(--spectrum-semantic-negative-color-default); |
|||
} |
|||
.error :global(.EasyMDEContainer .editor-preview-side) { |
|||
border-bottom-color: var(--spectrum-semantic-negative-color-default); |
|||
border-right-color: var(--spectrum-semantic-negative-color-default); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,36 @@ |
|||
<script> |
|||
import Field from "./Field.svelte" |
|||
import RichTextField from "./Core/RichTextField.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let value = null |
|||
export let label = null |
|||
export let labelPosition = "above" |
|||
export let placeholder = null |
|||
export let disabled = false |
|||
export let error = null |
|||
export let height = null |
|||
export let id = null |
|||
export let fullScreenOffset = null |
|||
export let easyMDEOptions = null |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
const onChange = e => { |
|||
value = e.detail |
|||
dispatch("change", e.detail) |
|||
} |
|||
</script> |
|||
|
|||
<Field {label} {labelPosition} {error}> |
|||
<RichTextField |
|||
{error} |
|||
{disabled} |
|||
{value} |
|||
{placeholder} |
|||
{height} |
|||
{id} |
|||
{fullScreenOffset} |
|||
{easyMDEOptions} |
|||
on:change={onChange} |
|||
/> |
|||
</Field> |
|||
@ -0,0 +1,60 @@ |
|||
<script> |
|||
import SpectrumMDE from "./SpectrumMDE.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let value = null |
|||
export let height = null |
|||
export let placeholder = null |
|||
export let id = null |
|||
export let fullScreenOffset = 0 |
|||
export let disabled = false |
|||
export let easyMDEOptions |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
let latestValue |
|||
let mde |
|||
|
|||
// Ensure the value is updated if the value prop changes outside the editor's |
|||
// control |
|||
$: checkValue(value) |
|||
$: mde?.codemirror.on("change", debouncedUpdate) |
|||
|
|||
const checkValue = val => { |
|||
if (mde && val !== latestValue) { |
|||
mde.value(val) |
|||
} |
|||
} |
|||
|
|||
const debounce = (fn, interval) => { |
|||
let timeout |
|||
return () => { |
|||
clearTimeout(timeout) |
|||
timeout = setTimeout(fn, interval) |
|||
} |
|||
} |
|||
|
|||
const update = () => { |
|||
latestValue = mde.value() |
|||
dispatch("change", latestValue) |
|||
} |
|||
|
|||
// Debounce the update function to avoid spamming it constantly |
|||
const debouncedUpdate = debounce(update, 250) |
|||
</script> |
|||
|
|||
{#key height} |
|||
<SpectrumMDE |
|||
bind:mde |
|||
scroll={true} |
|||
{height} |
|||
{id} |
|||
{fullScreenOffset} |
|||
{disabled} |
|||
easyMDEOptions={{ |
|||
initialValue: value, |
|||
placeholder, |
|||
...easyMDEOptions, |
|||
}} |
|||
/> |
|||
{/key} |
|||
@ -0,0 +1,70 @@ |
|||
<script> |
|||
import SpectrumMDE from "./SpectrumMDE.svelte" |
|||
|
|||
export let value |
|||
export let height |
|||
|
|||
let mde |
|||
|
|||
// Keep the value up to date |
|||
$: mde && mde.value(value || "") |
|||
$: { |
|||
if (mde && !mde.isPreviewActive()) { |
|||
mde.togglePreview() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div class="markdown-viewer" style="height:{height};"> |
|||
<SpectrumMDE |
|||
bind:mde |
|||
scroll={false} |
|||
easyMDEOptions={{ |
|||
initialValue: value, |
|||
toolbar: false, |
|||
}} |
|||
/> |
|||
</div> |
|||
|
|||
<style> |
|||
.markdown-viewer { |
|||
overflow: auto; |
|||
} |
|||
/* Remove padding, borders and background colors */ |
|||
.markdown-viewer :global(.editor-preview) { |
|||
padding: 0; |
|||
border: none; |
|||
background: transparent; |
|||
} |
|||
.markdown-viewer :global(.CodeMirror) { |
|||
border: none; |
|||
background: transparent; |
|||
padding: 0; |
|||
} |
|||
.markdown-viewer :global(.EasyMDEContainer) { |
|||
background: transparent; |
|||
} |
|||
/* Hide the actual code editor */ |
|||
.markdown-viewer :global(.CodeMirror-scroll) { |
|||
display: none; |
|||
} |
|||
/*Hide the scrollbar*/ |
|||
.markdown-viewer :global(.CodeMirror-vscrollbar) { |
|||
display: none !important; |
|||
} |
|||
/*Position relatively so we only consume whatever space we need */ |
|||
.markdown-viewer :global(.editor-preview-full) { |
|||
position: relative; |
|||
} |
|||
/* Remove margin on the first and last components to fully trim the preview */ |
|||
.markdown-viewer :global(.editor-preview-full > :first-child) { |
|||
margin-top: 0; |
|||
} |
|||
.markdown-viewer :global(.editor-preview-full > :last-child) { |
|||
margin-bottom: 0; |
|||
} |
|||
/* Code blocks in preview */ |
|||
.markdown-viewer :global(.editor-preview-full pre) { |
|||
background: var(--spectrum-global-color-gray-200); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,184 @@ |
|||
<script> |
|||
import EasyMDE from "easymde" |
|||
import "easymde/dist/easymde.min.css" |
|||
import { onMount } from "svelte" |
|||
|
|||
export let height = null |
|||
export let scroll = true |
|||
export let easyMDEOptions = null |
|||
export let mde = null |
|||
export let id = null |
|||
export let fullScreenOffset = null |
|||
export let disabled = false |
|||
|
|||
let element |
|||
|
|||
onMount(() => { |
|||
height = height || "200px" |
|||
mde = new EasyMDE({ |
|||
element, |
|||
spellChecker: false, |
|||
status: false, |
|||
unorderedListStyle: "-", |
|||
maxHeight: scroll ? height : undefined, |
|||
minHeight: scroll ? undefined : height, |
|||
...easyMDEOptions, |
|||
}) |
|||
|
|||
// Revert the editor when we unmount |
|||
return () => { |
|||
mde.toTextArea() |
|||
} |
|||
}) |
|||
|
|||
$: styleString = getStyleString(fullScreenOffset) |
|||
|
|||
const getStyleString = offset => { |
|||
let string = "" |
|||
string += `--fullscreen-offset-x:${offset?.x || "0px"};` |
|||
string += `--fullscreen-offset-y:${offset?.y || "0px"};` |
|||
return string |
|||
} |
|||
</script> |
|||
|
|||
<div class:disabled style={styleString}> |
|||
<textarea disabled {id} bind:this={element} /> |
|||
</div> |
|||
|
|||
<style> |
|||
/* Disabled styles */ |
|||
.disabled :global(textarea) { |
|||
display: none; |
|||
} |
|||
.disabled :global(.CodeMirror-cursor) { |
|||
display: none; |
|||
} |
|||
.disabled :global(.EasyMDEContainer) { |
|||
pointer-events: none; |
|||
} |
|||
.disabled :global(.editor-toolbar button i) { |
|||
color: var(--spectrum-global-color-gray-400); |
|||
} |
|||
.disabled :global(.CodeMirror) { |
|||
color: var(--spectrum-global-color-gray-600); |
|||
} |
|||
|
|||
/* Toolbar container */ |
|||
:global(.EasyMDEContainer .editor-toolbar) { |
|||
background: var(--spectrum-global-color-gray-50); |
|||
border-top: 1px solid var(--spectrum-alias-border-color); |
|||
border-left: 1px solid var(--spectrum-alias-border-color); |
|||
border-right: 1px solid var(--spectrum-alias-border-color); |
|||
} |
|||
/* Main code mirror instance and default color */ |
|||
:global(.EasyMDEContainer .CodeMirror) { |
|||
border: 1px solid var(--spectrum-alias-border-color); |
|||
background: var(--spectrum-global-color-gray-50); |
|||
color: var(--spectrum-alias-text-color); |
|||
} |
|||
/* Toolbar button active state */ |
|||
:global(.EasyMDEContainer .editor-toolbar button.active) { |
|||
background: var(--spectrum-global-color-gray-200); |
|||
border-color: var(--spectrum-global-color-gray-400); |
|||
} |
|||
/* Toolbar button hover state */ |
|||
:global(.EasyMDEContainer .editor-toolbar button:hover) { |
|||
background: var(--spectrum-global-color-gray-200); |
|||
border-color: var(--spectrum-global-color-gray-400); |
|||
} |
|||
/* Toolbar button color */ |
|||
:global(.EasyMDEContainer .editor-toolbar button i) { |
|||
color: var(--spectrum-global-color-gray-800); |
|||
} |
|||
/* Separator between toolbar buttons*/ |
|||
:global(.EasyMDEContainer .editor-toolbar i.separator) { |
|||
border-color: var(--spectrum-global-color-gray-300); |
|||
} |
|||
/* Cursor */ |
|||
:global(.EasyMDEContainer .CodeMirror-cursor) { |
|||
border-color: var(--spectrum-alias-text-color); |
|||
} |
|||
/* Text selections */ |
|||
:global(.EasyMDEContainer .CodeMirror-selectedtext) { |
|||
background: var(--spectrum-global-color-gray-400) !important; |
|||
} |
|||
/* Background of lines containing selected text */ |
|||
:global(.EasyMDEContainer .CodeMirror-selected) { |
|||
background: var(--spectrum-global-color-gray-400) !important; |
|||
} |
|||
/* Color of text for images and links */ |
|||
:global(.EasyMDEContainer .cm-s-easymde .cm-link) { |
|||
color: var(--spectrum-global-color-gray-600); |
|||
} |
|||
/* Color of URL for images and links */ |
|||
:global(.EasyMDEContainer .cm-s-easymde .cm-url) { |
|||
color: var(--spectrum-global-color-gray-500); |
|||
} |
|||
/* Full preview window */ |
|||
:global(.EasyMDEContainer .editor-preview) { |
|||
background: var(--spectrum-global-color-gray-50); |
|||
} |
|||
/* Side by side preview window */ |
|||
:global(.EasyMDEContainer .editor-preview) { |
|||
border: 1px solid var(--spectrum-alias-border-color); |
|||
} |
|||
/* Code blocks in editor */ |
|||
:global(.EasyMDEContainer .cm-s-easymde .cm-comment) { |
|||
background: var(--spectrum-global-color-gray-100); |
|||
} |
|||
/* Code blocks in preview */ |
|||
:global(.EasyMDEContainer pre) { |
|||
background: var(--spectrum-global-color-gray-100); |
|||
padding: 4px; |
|||
border-radius: 4px; |
|||
} |
|||
:global(.EasyMDEContainer code) { |
|||
color: #e83e8c; |
|||
} |
|||
:global(.EasyMDEContainer pre code) { |
|||
color: var(--spectrum-alias-text-color); |
|||
} |
|||
/* Block quotes */ |
|||
:global(.EasyMDEContainer blockquote) { |
|||
border-left: 4px solid var(--spectrum-global-color-gray-400); |
|||
color: var(--spectrum-global-color-gray-700); |
|||
margin-left: 0; |
|||
padding-left: 20px; |
|||
} |
|||
/* HR's */ |
|||
:global(.EasyMDEContainer hr) { |
|||
background-color: var(--spectrum-global-color-gray-300); |
|||
border: none; |
|||
height: 2px; |
|||
} |
|||
/* Tables */ |
|||
:global(.EasyMDEContainer td, .EasyMDEContainer th) { |
|||
border-color: var(--spectrum-alias-border-color) !important; |
|||
} |
|||
/* Links */ |
|||
:global(.EasyMDEContainer a) { |
|||
color: var(--primaryColor); |
|||
} |
|||
:global(.EasyMDEContainer a:hover) { |
|||
color: var(--primaryColorHover); |
|||
} |
|||
/* Allow full screen offset */ |
|||
:global(.EasyMDEContainer .editor-toolbar.fullscreen) { |
|||
left: var(--fullscreen-offset-x); |
|||
top: var(--fullscreen-offset-y); |
|||
} |
|||
:global(.EasyMDEContainer .CodeMirror-fullscreen) { |
|||
left: var(--fullscreen-offset-x); |
|||
top: calc(50px + var(--fullscreen-offset-y)); |
|||
} |
|||
|
|||
:global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) { |
|||
width: calc((100% - var(--fullscreen-offset-x)) / 2) !important; |
|||
} |
|||
|
|||
:global(.EasyMDEContainer .editor-preview-side) { |
|||
left: calc(50% + (var(--fullscreen-offset-x) / 2)); |
|||
top: calc(50px + var(--fullscreen-offset-y)); |
|||
width: calc((100% - var(--fullscreen-offset-x)) / 2) !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,19 @@ |
|||
<script> |
|||
import { MarkdownViewer } from "@budibase/bbui" |
|||
import { getContext } from "svelte" |
|||
import Placeholder from "./Placeholder.svelte" |
|||
|
|||
export let value |
|||
|
|||
const component = getContext("component") |
|||
const { builderStore, styleable } = getContext("sdk") |
|||
const height = $component.styles?.normal?.height |
|||
</script> |
|||
|
|||
<div use:styleable={$component.styles}> |
|||
{#if value} |
|||
<MarkdownViewer {value} {height} /> |
|||
{:else if $builderStore.inBuilder} |
|||
<Placeholder /> |
|||
{/if} |
|||
</div> |
|||
Loading…
Reference in new issue