Skip to content

Commit 752677c

Browse files
fi3eworkfi3ework
committed
feat(template): add Vue
1 parent 6707ee5 commit 752677c

File tree

103 files changed

+2287
-6
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+2287
-6
lines changed

‎packages/create-rslib/fragments/base/vue-js/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "rslib-vue-js",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"exports": {
6+
".": {
7+
"types": "./dist/index.d.ts",
8+
"import": "./dist/index.js"
9+
}
10+
},
11+
"types": "./dist/index.d.ts",
12+
"files": [
13+
"dist"
14+
],
15+
"scripts": {
16+
"build": "rslib build",
17+
"dev": "rslib build --watch"
18+
},
19+
"devDependencies": {
20+
"@rslib/core": "workspace:*",
21+
"rsbuild-plugin-unplugin-vue": "^0.1.0",
22+
"vue": "^3.2.0"
23+
},
24+
"peerDependencies": {
25+
"vue": "^3.2.0"
26+
}
27+
}

‎packages/create-rslib/fragments/base/vue-js/rslib.config.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineConfig } from '@rslib/core';
2+
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
3+
4+
export default defineConfig({
5+
lib: [
6+
{
7+
bundle: false,
8+
format: 'esm',
9+
output: {
10+
target: 'web',
11+
},
12+
},
13+
],
14+
plugins: [pluginUnpluginVue()],
15+
});

‎packages/create-rslib/fragments/base/vue-js/src/Button.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup>
2+
import { computed } from 'vue';
3+
import './style.css';
4+
5+
const {
6+
primary = false,
7+
backgroundColor,
8+
size = 'medium',
9+
label,
10+
onClick,
11+
} = defineProps({
12+
primary: {
13+
type: Boolean,
14+
},
15+
backgroundColor: {
16+
type: String,
17+
},
18+
size: {
19+
type: String,
20+
},
21+
label: {
22+
type: String,
23+
},
24+
onClick: {
25+
type: Function,
26+
},
27+
});
28+
29+
const mode = computed(() =>
30+
primary ? 'demo-button--primary' : 'demo-button--secondary',
31+
);
32+
</script>
33+
34+
<template>
35+
<button
36+
type="button"
37+
:class="['demo-button', `demo-button--${size}`, mode]"
38+
:style="{ backgroundColor }"
39+
@click="onClick"
40+
>
41+
{{ label }}
42+
</button>
43+
</template>

‎packages/create-rslib/fragments/base/vue-js/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Button } from './Button.vue';

‎packages/create-rslib/fragments/base/vue-js/src/style.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.demo-button {
2+
font-weight: 700;
3+
border: 0;
4+
border-radius: 3em;
5+
cursor: pointer;
6+
display: inline-block;
7+
line-height: 1;
8+
}
9+
10+
.demo-button--primary {
11+
color: white;
12+
background-color: #1ea7fd;
13+
}
14+
15+
.demo-button--secondary {
16+
color: #333;
17+
background-color: transparent;
18+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
19+
}
20+
21+
.demo-button--small {
22+
font-size: 12px;
23+
padding: 10px 16px;
24+
}
25+
26+
.demo-button--medium {
27+
font-size: 14px;
28+
padding: 11px 20px;
29+
}
30+
31+
.demo-button--large {
32+
font-size: 16px;
33+
padding: 12px 24px;
34+
}

‎packages/create-rslib/fragments/base/vue-ts/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "rslib-vue-ts",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"exports": {
6+
".": {
7+
"types": "./dist/index.d.ts",
8+
"import": "./dist/index.js"
9+
}
10+
},
11+
"types": "./dist/index.d.ts",
12+
"files": [
13+
"dist"
14+
],
15+
"scripts": {
16+
"build": "rslib build && vue-tsc",
17+
"dev": "rslib build --watch"
18+
},
19+
"devDependencies": {
20+
"@rslib/core": "workspace:*",
21+
"rsbuild-plugin-unplugin-vue": "^0.1.0",
22+
"typescript": "^5.8.3",
23+
"vue": "^3.2.0",
24+
"vue-tsc": "^2.2.10"
25+
},
26+
"peerDependencies": {
27+
"vue": "^3.2.0"
28+
}
29+
}

‎packages/create-rslib/fragments/base/vue-ts/rslib.config.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineConfig } from '@rslib/core';
2+
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
3+
4+
export default defineConfig({
5+
lib: [
6+
{
7+
bundle: false,
8+
format: 'esm',
9+
output: {
10+
target: 'web',
11+
},
12+
},
13+
],
14+
plugins: [pluginUnpluginVue()],
15+
});

‎packages/create-rslib/fragments/base/vue-ts/src/Button.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue';
3+
import './style.css';
4+
5+
interface Props {
6+
primary?: boolean;
7+
backgroundColor?: string;
8+
size?: 'small' | 'medium' | 'large';
9+
label: string;
10+
onClick?: () => void;
11+
}
12+
13+
const {
14+
primary = false,
15+
backgroundColor = undefined,
16+
size = 'medium',
17+
label,
18+
onClick = undefined,
19+
} = defineProps<Props>();
20+
21+
const mode = computed(() =>
22+
primary ? 'demo-button--primary' : 'demo-button--secondary',
23+
);
24+
</script>
25+
26+
<template>
27+
<button
28+
type="button"
29+
:class="['demo-button', `demo-button--${size}`, mode]"
30+
:style="{ backgroundColor }"
31+
@click="onClick"
32+
>
33+
{{ label }}
34+
</button>
35+
</template>

‎packages/create-rslib/fragments/base/vue-ts/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Button } from './Button.vue';

‎packages/create-rslib/fragments/base/vue-ts/src/style.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.demo-button {
2+
font-weight: 700;
3+
border: 0;
4+
border-radius: 3em;
5+
cursor: pointer;
6+
display: inline-block;
7+
line-height: 1;
8+
}
9+
10+
.demo-button--primary {
11+
color: white;
12+
background-color: #1ea7fd;
13+
}
14+
15+
.demo-button--secondary {
16+
color: #333;
17+
background-color: transparent;
18+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
19+
}
20+
21+
.demo-button--small {
22+
font-size: 12px;
23+
padding: 10px 16px;
24+
}
25+
26+
.demo-button--medium {
27+
font-size: 14px;
28+
padding: 11px 20px;
29+
}
30+
31+
.demo-button--large {
32+
font-size: 16px;
33+
padding: 12px 24px;
34+
}

‎packages/create-rslib/fragments/base/vue-ts/tsconfig.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["DOM", "ES2020"],
4+
"jsx": "preserve",
5+
"target": "ES2020",
6+
"skipLibCheck": true,
7+
"jsxImportSource": "vue",
8+
"useDefineForClassFields": true,
9+
"declaration": true,
10+
"outDir": "dist",
11+
"emitDeclarationOnly": true,
12+
13+
/* modules */
14+
"module": "ESNext",
15+
"isolatedModules": true,
16+
"resolveJsonModule": true,
17+
"moduleResolution": "bundler",
18+
19+
/* type checking */
20+
"strict": true,
21+
"noUnusedLocals": true,
22+
"noUnusedParameters": true
23+
},
24+
"include": ["src"]
25+
}

‎packages/create-rslib/fragments/tools/storybook-vue-js/.storybook/main.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { dirname, join } from 'node:path';
2+
3+
/**
4+
* This function is used to resolve the absolute path of a package.
5+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
6+
*/
7+
function getAbsolutePath(value) {
8+
return dirname(require.resolve(join(value, 'package.json')));
9+
}
10+
11+
const config = {
12+
stories: [
13+
'../stories/**/*.mdx',
14+
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
15+
],
16+
addons: [
17+
'@storybook/addon-onboarding',
18+
'@storybook/addon-links',
19+
'@storybook/addon-essentials',
20+
'@storybook/addon-interactions',
21+
{
22+
name: getAbsolutePath('storybook-addon-rslib'),
23+
},
24+
],
25+
framework: {
26+
name: getAbsolutePath('storybook-vue3-rsbuild'),
27+
options: {},
28+
},
29+
docs: {
30+
autodocs: 'tag',
31+
},
32+
typescript: {
33+
check: true,
34+
},
35+
};
36+
37+
export default config;

‎packages/create-rslib/fragments/tools/storybook-vue-js/.storybook/preview.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const preview = {
2+
parameters: {
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/i,
7+
},
8+
},
9+
},
10+
};
11+
12+
export default preview;

‎packages/create-rslib/fragments/tools/storybook-vue-js/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"scripts": {
3+
"build:storybook": "storybook build",
4+
"storybook": "storybook dev"
5+
},
6+
"devDependencies": {
7+
"@rsbuild/core": "1.3.14",
8+
"@storybook/addon-essentials": "^8.6.12",
9+
"@storybook/addon-interactions": "^8.6.12",
10+
"@storybook/addon-links": "^8.6.12",
11+
"@storybook/addon-onboarding": "^8.6.12",
12+
"@storybook/blocks": "^8.6.12",
13+
"@storybook/test": "^8.6.12",
14+
"@storybook/vue3": "^8.6.12",
15+
"storybook": "^8.6.12",
16+
"storybook-addon-rslib": "^1.0.1",
17+
"storybook-vue3-rsbuild": "^1.0.1"
18+
}
19+
}

‎packages/create-rslib/fragments/tools/storybook-vue-js/stories/Button.stories.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { fn } from '@storybook/test';
2+
import Button from '../src/Button';
3+
4+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
5+
const meta = {
6+
title: 'Example/Button',
7+
component: Button,
8+
parameters: {
9+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
10+
layout: 'centered',
11+
},
12+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
13+
tags: ['autodocs'],
14+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
15+
argTypes: {
16+
backgroundColor: { control: 'color' },
17+
},
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+
args: { onClick: fn() },
20+
};
21+
22+
export default meta;
23+
24+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
25+
export const Primary = {
26+
args: {
27+
primary: true,
28+
label: 'Button',
29+
},
30+
};
31+
32+
export const Secondary = {
33+
args: {
34+
label: 'Button',
35+
},
36+
};
37+
38+
export const Large = {
39+
args: {
40+
size: 'large',
41+
label: 'Button',
42+
},
43+
};
44+
45+
export const Small = {
46+
args: {
47+
size: 'small',
48+
label: 'Button',
49+
},
50+
};

0 commit comments

Comments
 (0)