@dronico/droni-kit 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/package.json +6 -1
- package/.github/workflows/release.yml +0 -28
- package/.storybook/main.ts +0 -19
- package/.storybook/preview.ts +0 -14
- package/.storybook/vitest.setup.ts +0 -9
- package/.vscode/extensions.json +0 -3
- package/index.html +0 -13
- package/public/vite.svg +0 -1
- package/release.config.ts +0 -23
- package/src/App.vue +0 -30
- package/src/assets/vue.svg +0 -1
- package/src/components/HelloWorld.vue +0 -41
- package/src/main.ts +0 -5
- package/src/stories/Button.stories.ts +0 -63
- package/src/stories/Button.vue +0 -48
- package/src/stories/Configure.mdx +0 -364
- package/src/stories/Header.stories.ts +0 -48
- package/src/stories/Header.vue +0 -37
- package/src/stories/Page.stories.ts +0 -38
- package/src/stories/Page.vue +0 -73
- package/src/stories/assets/accessibility.png +0 -0
- package/src/stories/assets/accessibility.svg +0 -1
- package/src/stories/assets/addon-library.png +0 -0
- package/src/stories/assets/assets.png +0 -0
- package/src/stories/assets/avif-test-image.avif +0 -0
- package/src/stories/assets/context.png +0 -0
- package/src/stories/assets/discord.svg +0 -1
- package/src/stories/assets/docs.png +0 -0
- package/src/stories/assets/figma-plugin.png +0 -0
- package/src/stories/assets/github.svg +0 -1
- package/src/stories/assets/share.png +0 -0
- package/src/stories/assets/styling.png +0 -0
- package/src/stories/assets/testing.png +0 -0
- package/src/stories/assets/theming.png +0 -0
- package/src/stories/assets/tutorials.svg +0 -1
- package/src/stories/assets/youtube.svg +0 -1
- package/src/stories/button.css +0 -30
- package/src/stories/header.css +0 -32
- package/src/stories/page.css +0 -68
- package/src/style.css +0 -79
- package/src/vite-env.d.ts +0 -1
- package/storybook-static/App.vue.d.ts +0 -2
- package/storybook-static/assets/Button-B2efaGtC.css +0 -1
- package/storybook-static/assets/Button-CoYrOF_8.js +0 -1
- package/storybook-static/assets/Button.stories-X_0VSq8O.js +0 -26
- package/storybook-static/assets/Color-YHDXOIA2-DLeC5Hg8.js +0 -1
- package/storybook-static/assets/Configure-bVvReBib.js +0 -165
- package/storybook-static/assets/DocsRenderer-CFRXHY34-DfQH6b5n.js +0 -26
- package/storybook-static/assets/Header-3jNfoSF5.js +0 -1
- package/storybook-static/assets/Header-Ck-SSN7O.css +0 -1
- package/storybook-static/assets/Header.stories-DKH58MAE.js +0 -11
- package/storybook-static/assets/Page-CeeQJVdd.css +0 -1
- package/storybook-static/assets/Page.stories-C8t25IEs.js +0 -17
- package/storybook-static/assets/accessibility-W_h2acOZ.png +0 -0
- package/storybook-static/assets/addon-library-BWUCAmyN.png +0 -0
- package/storybook-static/assets/context-C0qIqeS4.png +0 -0
- package/storybook-static/assets/docs---vsFbMi.png +0 -0
- package/storybook-static/assets/entry-preview-CZIIErml.js +0 -1
- package/storybook-static/assets/entry-preview-docs-VgQ3afV1.js +0 -16
- package/storybook-static/assets/figma-plugin-CH2hELiO.png +0 -0
- package/storybook-static/assets/iframe-Ck6AF3FG.js +0 -211
- package/storybook-static/assets/index-BDOojamX.js +0 -240
- package/storybook-static/assets/index-Bx-go_-4.js +0 -8
- package/storybook-static/assets/index-C8GcTUhO.js +0 -1
- package/storybook-static/assets/index-DCUO3UO8.js +0 -599
- package/storybook-static/assets/index-DrFu-skq.js +0 -6
- package/storybook-static/assets/preview-B8lJiyuQ.js +0 -34
- package/storybook-static/assets/preview-BBWR9nbA.js +0 -1
- package/storybook-static/assets/preview-BWzBA1C2.js +0 -396
- package/storybook-static/assets/preview-Bej7FSAj.js +0 -1
- package/storybook-static/assets/preview-CIRcjyVj.js +0 -1
- package/storybook-static/assets/preview-CvbIS5ZJ.js +0 -1
- package/storybook-static/assets/preview-CyK-uEc4.js +0 -2
- package/storybook-static/assets/preview-DD_OYowb.js +0 -1
- package/storybook-static/assets/preview-DGUiP6tS.js +0 -7
- package/storybook-static/assets/share-DGA-UcQf.png +0 -0
- package/storybook-static/assets/styling-Bk6zjRzU.png +0 -0
- package/storybook-static/assets/testing-cbzR9l9r.png +0 -0
- package/storybook-static/assets/theming-D6WJLNoW.png +0 -0
- package/storybook-static/assets/vue.esm-bundler-DJJpJwIm.js +0 -36
- package/storybook-static/components/HelloWorld.vue.d.ts +0 -5
- package/storybook-static/favicon.svg +0 -1
- package/storybook-static/iframe.html +0 -666
- package/storybook-static/index.html +0 -181
- package/storybook-static/index.json +0 -1
- package/storybook-static/main.d.ts +0 -0
- package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
- package/storybook-static/nunito-sans-bold.woff2 +0 -0
- package/storybook-static/nunito-sans-italic.woff2 +0 -0
- package/storybook-static/nunito-sans-regular.woff2 +0 -0
- package/storybook-static/project.json +0 -1
- package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js +0 -331
- package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js.LEGAL.txt +0 -51
- package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js +0 -3
- package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +0 -12
- package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js +0 -402
- package/storybook-static/sb-addons/essentials-docs-3/manager-bundle.js +0 -242
- package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +0 -3
- package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +0 -3
- package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +0 -3
- package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +0 -3
- package/storybook-static/sb-addons/onboarding-9/manager-bundle.js +0 -127
- package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +0 -3
- package/storybook-static/sb-addons/storybook-experimental-addon-test-11/manager-bundle.js +0 -223
- package/storybook-static/sb-common-assets/favicon.svg +0 -1
- package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/storybook-static/sb-manager/globals-module-info.js +0 -1051
- package/storybook-static/sb-manager/globals-runtime.js +0 -41591
- package/storybook-static/sb-manager/globals.js +0 -48
- package/storybook-static/sb-manager/runtime.js +0 -12048
- package/storybook-static/stories/Button.stories.d.ts +0 -42
- package/storybook-static/stories/Button.vue.d.ts +0 -26
- package/storybook-static/stories/Header.stories.d.ts +0 -59
- package/storybook-static/stories/Header.vue.d.ts +0 -15
- package/storybook-static/stories/Page.stories.d.ts +0 -19
- package/storybook-static/stories/Page.vue.d.ts +0 -2
- package/storybook-static/vite.svg +0 -1
- package/tsconfig.app.json +0 -14
- package/tsconfig.json +0 -7
- package/tsconfig.node.json +0 -24
- package/vite.config.ts +0 -28
- package/vitest.workspace.ts +0 -32
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [1.0.2](https://github.com/Droni-app/droni-kit/compare/v1.0.1...v1.0.2) (2025-04-15)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* uploaded files ([6212ae4](https://github.com/Droni-app/droni-kit/commit/6212ae48837846f7619b5669bc51f5edab2944db))
|
|
7
|
+
|
|
1
8
|
## [1.0.1](https://github.com/Droni-app/droni-kit/compare/v1.0.0...v1.0.1) (2025-04-15)
|
|
2
9
|
|
|
3
10
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dronico/droni-kit",
|
|
3
3
|
"author": "Gustavo Barragan <dev@droni.co>",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"private": false,
|
|
6
6
|
"access": "public",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
|
+
"files": [
|
|
11
|
+
"dist",
|
|
12
|
+
"README.md",
|
|
13
|
+
"CHANGELOG.md"
|
|
14
|
+
],
|
|
10
15
|
"type": "module",
|
|
11
16
|
"main": "dist/droni-kit.umd.js",
|
|
12
17
|
"module": "dist/droni-kit.js",
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
name: Release
|
|
2
|
-
|
|
3
|
-
on:
|
|
4
|
-
push:
|
|
5
|
-
branches:
|
|
6
|
-
- main
|
|
7
|
-
- beta
|
|
8
|
-
|
|
9
|
-
permissions:
|
|
10
|
-
contents: write
|
|
11
|
-
issues: write
|
|
12
|
-
pull-requests: write
|
|
13
|
-
|
|
14
|
-
jobs:
|
|
15
|
-
release:
|
|
16
|
-
runs-on: ubuntu-latest
|
|
17
|
-
steps:
|
|
18
|
-
- uses: actions/checkout@v4
|
|
19
|
-
- uses: actions/setup-node@v4
|
|
20
|
-
with:
|
|
21
|
-
node-version: '22'
|
|
22
|
-
- run: npm i
|
|
23
|
-
- run: npm run build
|
|
24
|
-
- name: Release
|
|
25
|
-
env:
|
|
26
|
-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
27
|
-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
28
|
-
run: npm run release
|
package/.storybook/main.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { StorybookConfig } from '@storybook/vue3-vite';
|
|
2
|
-
|
|
3
|
-
const config: StorybookConfig = {
|
|
4
|
-
"stories": [
|
|
5
|
-
"../src/**/*.mdx",
|
|
6
|
-
"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
|
|
7
|
-
],
|
|
8
|
-
"addons": [
|
|
9
|
-
"@storybook/addon-essentials",
|
|
10
|
-
"@storybook/addon-onboarding",
|
|
11
|
-
"@chromatic-com/storybook",
|
|
12
|
-
"@storybook/experimental-addon-test"
|
|
13
|
-
],
|
|
14
|
-
"framework": {
|
|
15
|
-
"name": "@storybook/vue3-vite",
|
|
16
|
-
"options": {}
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
export default config;
|
package/.storybook/preview.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { beforeAll } from 'vitest';
|
|
2
|
-
import { setProjectAnnotations } from '@storybook/vue3';
|
|
3
|
-
import * as projectAnnotations from './preview';
|
|
4
|
-
|
|
5
|
-
// This is an important step to apply the right configuration when testing your stories.
|
|
6
|
-
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
|
|
7
|
-
const project = setProjectAnnotations([projectAnnotations]);
|
|
8
|
-
|
|
9
|
-
beforeAll(project.beforeAll);
|
package/.vscode/extensions.json
DELETED
package/index.html
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Vite + Vue + TS</title>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app"></div>
|
|
11
|
-
<script type="module" src="/src/main.ts"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
package/public/vite.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/release.config.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
// release.config.ts
|
|
2
|
-
export default {
|
|
3
|
-
branches: ['main', { name: 'beta', prerelease: true }],
|
|
4
|
-
plugins: [
|
|
5
|
-
"@semantic-release/commit-analyzer",
|
|
6
|
-
"@semantic-release/release-notes-generator",
|
|
7
|
-
[
|
|
8
|
-
"@semantic-release/changelog",
|
|
9
|
-
{
|
|
10
|
-
changelogFile: "CHANGELOG.md",
|
|
11
|
-
},
|
|
12
|
-
],
|
|
13
|
-
"@semantic-release/npm",
|
|
14
|
-
[
|
|
15
|
-
"@semantic-release/git",
|
|
16
|
-
{
|
|
17
|
-
assets: ["package.json", "CHANGELOG.md"],
|
|
18
|
-
message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
|
|
19
|
-
},
|
|
20
|
-
],
|
|
21
|
-
"@semantic-release/github",
|
|
22
|
-
],
|
|
23
|
-
};
|
package/src/App.vue
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import HelloWorld from './components/HelloWorld.vue'
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<template>
|
|
6
|
-
<div>
|
|
7
|
-
<a href="https://vite.dev" target="_blank">
|
|
8
|
-
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
9
|
-
</a>
|
|
10
|
-
<a href="https://vuejs.org/" target="_blank">
|
|
11
|
-
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
|
12
|
-
</a>
|
|
13
|
-
</div>
|
|
14
|
-
<HelloWorld msg="Vite + Vue" />
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<style scoped>
|
|
18
|
-
.logo {
|
|
19
|
-
height: 6em;
|
|
20
|
-
padding: 1.5em;
|
|
21
|
-
will-change: filter;
|
|
22
|
-
transition: filter 300ms;
|
|
23
|
-
}
|
|
24
|
-
.logo:hover {
|
|
25
|
-
filter: drop-shadow(0 0 2em #646cffaa);
|
|
26
|
-
}
|
|
27
|
-
.logo.vue:hover {
|
|
28
|
-
filter: drop-shadow(0 0 2em #42b883aa);
|
|
29
|
-
}
|
|
30
|
-
</style>
|
package/src/assets/vue.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { ref } from 'vue'
|
|
3
|
-
|
|
4
|
-
defineProps<{ msg: string }>()
|
|
5
|
-
|
|
6
|
-
const count = ref(0)
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<template>
|
|
10
|
-
<h1>{{ msg }}</h1>
|
|
11
|
-
|
|
12
|
-
<div class="card">
|
|
13
|
-
<button type="button" @click="count++">count is {{ count }}</button>
|
|
14
|
-
<p>
|
|
15
|
-
Edit
|
|
16
|
-
<code>components/HelloWorld.vue</code> to test HMR
|
|
17
|
-
</p>
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<p>
|
|
21
|
-
Check out
|
|
22
|
-
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
23
|
-
>create-vue</a
|
|
24
|
-
>, the official Vue + Vite starter
|
|
25
|
-
</p>
|
|
26
|
-
<p>
|
|
27
|
-
Learn more about IDE Support for Vue in the
|
|
28
|
-
<a
|
|
29
|
-
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
|
30
|
-
target="_blank"
|
|
31
|
-
>Vue Docs Scaling up Guide</a
|
|
32
|
-
>.
|
|
33
|
-
</p>
|
|
34
|
-
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
35
|
-
</template>
|
|
36
|
-
|
|
37
|
-
<style scoped>
|
|
38
|
-
.read-the-docs {
|
|
39
|
-
color: #888;
|
|
40
|
-
}
|
|
41
|
-
</style>
|
package/src/main.ts
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { fn } from '@storybook/test';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
3
|
-
|
|
4
|
-
import Button from './Button.vue';
|
|
5
|
-
|
|
6
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
|
-
const meta = {
|
|
8
|
-
title: 'Example/Button',
|
|
9
|
-
component: Button,
|
|
10
|
-
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
11
|
-
tags: ['autodocs'],
|
|
12
|
-
argTypes: {
|
|
13
|
-
size: { control: 'select', options: ['small', 'medium', 'large'] },
|
|
14
|
-
backgroundColor: { control: 'color' },
|
|
15
|
-
},
|
|
16
|
-
args: {
|
|
17
|
-
primary: false,
|
|
18
|
-
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
|
19
|
-
onClick: fn(),
|
|
20
|
-
},
|
|
21
|
-
} satisfies Meta<typeof Button>;
|
|
22
|
-
|
|
23
|
-
export default meta;
|
|
24
|
-
type Story = StoryObj<typeof meta>;
|
|
25
|
-
/*
|
|
26
|
-
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
|
27
|
-
* See https://storybook.js.org/docs/api/csf
|
|
28
|
-
* to learn how to use render functions.
|
|
29
|
-
*/
|
|
30
|
-
export const Primary: Story = {
|
|
31
|
-
args: {
|
|
32
|
-
primary: false,
|
|
33
|
-
label: 'Button',
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export const Secondary: Story = {
|
|
38
|
-
args: {
|
|
39
|
-
primary: false,
|
|
40
|
-
label: 'Button',
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export const Large: Story = {
|
|
45
|
-
args: {
|
|
46
|
-
label: 'Button',
|
|
47
|
-
size: 'large',
|
|
48
|
-
},
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export const Small: Story = {
|
|
52
|
-
args: {
|
|
53
|
-
label: 'Button',
|
|
54
|
-
size: 'small',
|
|
55
|
-
},
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export const Select: Story = {
|
|
59
|
-
args: {
|
|
60
|
-
primary: true,
|
|
61
|
-
label: "Button"
|
|
62
|
-
}
|
|
63
|
-
};
|
package/src/stories/Button.vue
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
|
|
3
|
-
</template>
|
|
4
|
-
|
|
5
|
-
<script lang="ts" setup>
|
|
6
|
-
import './button.css';
|
|
7
|
-
import { computed } from 'vue';
|
|
8
|
-
|
|
9
|
-
const props = withDefaults(defineProps<{
|
|
10
|
-
/**
|
|
11
|
-
* The label of the button
|
|
12
|
-
*/
|
|
13
|
-
label: string,
|
|
14
|
-
/**
|
|
15
|
-
* primary or secondary button
|
|
16
|
-
*/
|
|
17
|
-
primary?: boolean,
|
|
18
|
-
/**
|
|
19
|
-
* size of the button
|
|
20
|
-
*/
|
|
21
|
-
size?: 'small' | 'medium' | 'large',
|
|
22
|
-
/**
|
|
23
|
-
* background color of the button
|
|
24
|
-
*/
|
|
25
|
-
backgroundColor?: string,
|
|
26
|
-
|
|
27
|
-
}>(), { primary: false });
|
|
28
|
-
|
|
29
|
-
const emit = defineEmits<{
|
|
30
|
-
(e: 'click', id: number): void;
|
|
31
|
-
}>();
|
|
32
|
-
|
|
33
|
-
const classes = computed(() => ({
|
|
34
|
-
'storybook-button': true,
|
|
35
|
-
'storybook-button--primary': props.primary,
|
|
36
|
-
'storybook-button--secondary': !props.primary,
|
|
37
|
-
[`storybook-button--${props.size || 'medium'}`]: true,
|
|
38
|
-
}));
|
|
39
|
-
|
|
40
|
-
const style = computed(() => ({
|
|
41
|
-
backgroundColor: props.backgroundColor
|
|
42
|
-
}));
|
|
43
|
-
|
|
44
|
-
const onClick = () => {
|
|
45
|
-
emit("click", 1)
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
</script>
|