feat(template): add Vue (#960)

Author: fi3ework

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

@@ -0,0 +1,27 @@
+{
+  "name": "rslib-vue-js",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch"
+  },
+  "devDependencies": {
+    "@rslib/core": "workspace:*",
+    "rsbuild-plugin-unplugin-vue": "^0.1.0",
+    "vue": "^3.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}

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

@@ -0,0 +1,15 @@
+import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
+
+export default defineConfig({
+  lib: [
+    {
+      bundle: false,
+      format: 'esm',
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginUnpluginVue()],
+});

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

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import './style.css';
+
+const {
+  primary = false,
+  backgroundColor,
+  size = 'medium',
+  label,
+  onClick,
+} = defineProps({
+  primary: {
+    type: Boolean,
+  },
+  backgroundColor: {
+    type: String,
+  },
+  size: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  onClick: {
+    type: Function,
+  },
+});
+
+const mode = computed(() =>
+  primary ? 'demo-button--primary' : 'demo-button--secondary',
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="['demo-button', `demo-button--${size}`, mode]"
+    :style="{ backgroundColor }"
+    @click="onClick"
+  >
+    {{ label }}
+  </button>
+</template>

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

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue';

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

@@ -0,0 +1,34 @@
+.demo-button {
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+
+.demo-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+
+.demo-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.demo-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.demo-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

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

@@ -0,0 +1,29 @@
+{
+  "name": "rslib-vue-ts",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build && vue-tsc",
+    "dev": "rslib build --watch"
+  },
+  "devDependencies": {
+    "@rslib/core": "workspace:*",
+    "rsbuild-plugin-unplugin-vue": "^0.1.0",
+    "typescript": "^5.8.3",
+    "vue": "^3.2.0",
+    "vue-tsc": "^2.2.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}

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

@@ -0,0 +1,15 @@
+import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
+
+export default defineConfig({
+  lib: [
+    {
+      bundle: false,
+      format: 'esm',
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginUnpluginVue()],
+});

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import './style.css';
+
+interface Props {
+  primary?: boolean;
+  backgroundColor?: string;
+  size?: 'small' | 'medium' | 'large';
+  label: string;
+  onClick?: () => void;
+}
+
+const {
+  primary = false,
+  backgroundColor = undefined,
+  size = 'medium',
+  label,
+  onClick = undefined,
+} = defineProps<Props>();
+
+const mode = computed(() =>
+  primary ? 'demo-button--primary' : 'demo-button--secondary',
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="['demo-button', `demo-button--${size}`, mode]"
+    :style="{ backgroundColor }"
+    @click="onClick"
+  >
+    {{ label }}
+  </button>
+</template>

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

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue';

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

@@ -0,0 +1,34 @@
+.demo-button {
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+
+.demo-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+
+.demo-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.demo-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.demo-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}