Skip to content

Commit dbae646

Browse files
TotomIncTotomInc
committed
feat(website): add 1-page website with demo select
1 parent 49647d2 commit dbae646

File tree

12 files changed

+878
-43
lines changed

12 files changed

+878
-43
lines changed

‎package-lock.json‎

Lines changed: 630 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@
3333
"dist"
3434
],
3535
"scripts": {
36-
"dev:playground": "vite --mode playground",
37-
"dev:website": "vite --mode website",
36+
"dev:playground": "vite --mode development:playground",
37+
"dev:website": "vite --mode development:website",
3838
"build": "run-p type-check \"build-only {@}\" --",
39+
"build:website": "vite build --mode website:production",
3940
"build-only": "vite build",
4041
"lint": "eslint .",
4142
"lint:fix": "eslint . --fix",
42-
"preview": "vite preview",
4343
"type-check": "vue-tsc --build --force",
4444
"bumpp": "bumpp package.json"
4545
},
@@ -52,10 +52,14 @@
5252
"@types/node": "20.11.17",
5353
"@vitejs/plugin-vue": "5.0.4",
5454
"@vue/tsconfig": "0.5.1",
55+
"autoprefixer": "10.4.17",
5556
"bumpp": "9.3.0",
57+
"countries-list": "3.0.6",
5658
"eslint": "8.56.0",
5759
"npm-run-all2": "6.1.2",
60+
"postcss": "8.4.35",
5861
"sass": "1.70.0",
62+
"tailwindcss": "3.4.1",
5963
"typescript": "5.3.3",
6064
"vite": "5.1.1",
6165
"vite-plugin-dts": "3.7.2",

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎tailwind.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: [
4+
"./website/index.html",
5+
"./website/**/*.{vue,js,ts,jsx,tsx}",
6+
],
7+
8+
theme: {
9+
extend: {},
10+
},
11+
12+
plugins: [],
13+
};

‎vite.config.ts‎

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,49 @@ const resolve = (path: string) => fileURLToPath(new URL(path, import.meta.url));
99

1010
// https://vitejs.dev/config/
1111
export default defineConfig((configEnv) => {
12+
// Default shared config by all modes.
1213
const config: UserConfig = {
13-
plugins: [
14-
vue(),
15-
vueDevtools(),
16-
dts({
17-
tsconfigPath: "tsconfig.build.json",
18-
cleanVueFileName: true,
19-
}),
20-
],
21-
14+
plugins: [vue()],
2215
resolve: {
23-
alias: {
24-
"@": resolve("./src"),
25-
},
16+
alias: { "@": resolve("./src") },
2617
},
18+
};
2719

28-
build: {
29-
target: "es2015",
30-
lib: {
31-
name: "vue3-select-component",
32-
entry: resolve("./src/index.ts"),
33-
formats: ["es", "umd"],
34-
fileName: (format) => `index.${format}.js`,
35-
},
36-
rollupOptions: {
37-
external: ["vue"],
38-
output: {
39-
globals: { vue: "Vue" },
20+
// Build library when in production mode (npm run build).
21+
if (configEnv.mode === "production") {
22+
return {
23+
...config,
24+
25+
plugins: [
26+
...config.plugins!,
27+
dts({ tsconfigPath: "tsconfig.build.json", cleanVueFileName: true }),
28+
],
29+
30+
build: {
31+
target: "es2015",
32+
lib: {
33+
name: "vue3-select-component",
34+
entry: resolve("./src/index.ts"),
35+
formats: ["es", "umd"],
36+
fileName: (format) => `index.${format}.js`,
37+
},
38+
rollupOptions: {
39+
external: ["vue"],
40+
output: { globals: { vue: "Vue" } },
4041
},
4142
},
42-
},
43-
};
43+
};
44+
}
45+
46+
if (["development", "development:playground", "development:website"].includes(configEnv.mode)) {
47+
config.plugins!.push(vueDevtools());
48+
}
4449

45-
if (configEnv.mode === "playground") {
50+
if (configEnv.mode.includes("playground")) {
4651
config.root = resolve("./playground");
4752
}
4853

49-
if (configEnv.mode === "website") {
54+
if (configEnv.mode.includes("website")) {
5055
config.root = resolve("./website");
5156
}
5257

‎website/CustomOption.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue";
3+
import { countries } from "countries-list";
4+
5+
import VueSelect from "../src";
6+
7+
const options = Object.entries(countries).map(([key, value]) => ({ label: value.name, value: key }));
8+
9+
const selectedCountry = ref<string>("FR");
10+
</script>
11+
12+
<template>
13+
<div class="max-w-sm w-full relative mx-auto mt-8">
14+
<h2 class="text-xl font-medium text-neutral-900 mb-2">
15+
Custom option & menu with default value
16+
</h2>
17+
18+
<p class="mb-0.5 text-sm font-medium text-neutral-900">
19+
Country
20+
</p>
21+
22+
<VueSelect
23+
v-model="selectedCountry"
24+
:options="options"
25+
placeholder="Select a country"
26+
>
27+
<template #value="{ option }">
28+
<div class="flex items-center gap-1.5">
29+
<img :src="`https://flagsapi.com/${option.value}/flat/24.png`" class="block w-6 h-auto">
30+
<span class="text-base font-medium text-neutral-900">{{ option.label }}</span>
31+
</div>
32+
</template>
33+
34+
<template #option="{ option }">
35+
<p class="flex items-center gap-1 text-neutral-900 font-medium">
36+
{{ option.label }} <small class="text-sm text-neutral-600 font-medium">{{ option.value }}</small>
37+
</p>
38+
</template>
39+
</VueSelect>
40+
41+
<p class="mt-1 text-sm text-neutral-700">
42+
Ref value: <span class="font-medium">{{ selectedCountry || "empty" }}</span>
43+
</p>
44+
</div>
45+
</template>

‎website/MultiSelect.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue";
3+
import { countries } from "countries-list";
4+
5+
import VueSelect from "../src";
6+
7+
const options = Object.entries(countries).map(([key, value]) => ({ label: value.name, value: key }));
8+
9+
const selectedCountries = ref<string[]>([]);
10+
</script>
11+
12+
<template>
13+
<div class="max-w-sm w-full relative mx-auto mt-8">
14+
<h2 class="text-xl font-medium text-neutral-900 mb-2">
15+
Multi-select
16+
</h2>
17+
18+
<p class="mb-0.5 text-sm font-medium text-neutral-900">
19+
Countries
20+
</p>
21+
22+
<VueSelect
23+
v-model="selectedCountries"
24+
:options="options"
25+
:is-multi="true"
26+
placeholder="Select at least one country"
27+
/>
28+
29+
<p class="mt-1 text-sm text-neutral-700">
30+
Ref value: <span class="font-medium">{{ selectedCountries.join(",") || "empty" }}</span>
31+
</p>
32+
</div>
33+
</template>

‎website/SingleSelect.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue";
3+
import { countries } from "countries-list";
4+
5+
import VueSelect from "../src";
6+
7+
const options = Object.entries(countries).map(([key, value]) => ({ label: value.name, value: key }));
8+
9+
const selectedCountry = ref<string>("");
10+
</script>
11+
12+
<template>
13+
<div class="max-w-sm w-full relative mx-auto mt-8">
14+
<h2 class="text-xl font-medium text-neutral-900 mb-2">
15+
Single-select
16+
</h2>
17+
18+
<p class="mb-0.5 text-sm font-medium text-neutral-900">
19+
Country
20+
</p>
21+
22+
<VueSelect
23+
v-model="selectedCountry"
24+
:options="options"
25+
placeholder="Select a country"
26+
/>
27+
28+
<p class="mt-1 text-sm text-neutral-700">
29+
Ref value: <span class="font-medium">{{ selectedCountry || "empty" }}</span>
30+
</p>
31+
</div>
32+
</template>

‎website/Website.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
import MultiSelect from "./MultiSelect.vue";
3+
import SingleSelect from "./SingleSelect.vue";
4+
import CustomOption from "./CustomOption.vue";
5+
</script>
6+
7+
<template>
8+
<main class="min-h-screen flex flex-col items-center pt-8 font-sans bg-neutral-100">
9+
<h1 class="text-center text-neutral-950 font-medium text-3xl">
10+
Vue3-Select-Component
11+
</h1>
12+
13+
<p class="text-center text-neutral-700 text-lg mt-4">
14+
A flexible & modern select-input control for Vue 3.
15+
</p>
16+
17+
<a
18+
href="https://github.com/TotomInc/vue3-select-component"
19+
target="_blank"
20+
class="mt-4 border border-neutral-200 bg-white rounded text-sm font-medium px-4 py-2 text-neutral-950 flex items-center self-start mx-auto hover:bg-neutral-50 focus:outline-none gap-1.5"
21+
>
22+
View docs on GitHub
23+
<svg
24+
xmlns="http://www.w3.org/2000/svg"
25+
width="24"
26+
height="24"
27+
viewBox="0 0 24 24"
28+
class="w-5 h-auto"
29+
>
30+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
31+
</svg>
32+
</a>
33+
34+
<MultiSelect />
35+
<SingleSelect />
36+
<CustomOption />
37+
38+
<p class="text-center text-neutral-700 text-sm font-medium mt-4">
39+
Take a look at the GitHub repository for the complete documentation.
40+
</p>
41+
</main>
42+
</template>

‎website/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap');
2+
3+
body {
4+
font-family: "Inter", sans-serif;
5+
}
6+
7+
@tailwind base;
8+
@tailwind components;
9+
@tailwind utilities;

0 commit comments

Comments
 (0)