Skip to content

chore(playground): setup routes #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 8, 2024
Merged

chore(playground): setup routes #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions .eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
module.exports = {
root: true,
plugins: ['prettier', '@typescript-eslint'],
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'prettier'],
reportUnusedDisableDirectives: true,
parser: '@typescript-eslint/parser',
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
},
Expand All @@ -20,13 +21,20 @@ module.exports = {
},
},
{
files: ['.eslintrc.cjs', '.prettierrc.cjs', 'rollup.config.js', 'web-test-runner.config.js'],
files: [
'.eslintrc.cjs',
'.prettierrc.cjs',
'rollup.config.js',
'web-test-runner.config.js',
'tailwind.config.cjs',
],
env: {
node: true,
},
},
],
rules: {
'prettier/prettier': ['error'],
'vue/multi-word-component-names': 'off',
},
};
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.2",
"eslint-plugin-vue": "^9.22.0",
"prettier": "^3.1.1",
"rollup": "^4.9.1",
"rollup-plugin-copy": "^3.5.0",
Expand Down
18 changes: 18 additions & 0 deletions packages/playground/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
170 changes: 7 additions & 163 deletions packages/playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,170 +2,14 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Playground</title>
<script src="https://cdn.tailwindcss.com"></script>
<title>Vite + Vue + TS</title>
</head>
<body class="min-h-screen flex flex-col items-center justify-center">
<div class="p-4">
<twc-switch>
<button
type="button"
class="group relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 bg-indigo-50 aria-checked:bg-indigo-600"
data-target="twc-switch.trigger"
>
<span class="sr-only">Use setting</span>
<span
aria-hidden="true"
class="pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out translate-x-0 group-aria-checked:translate-x-9"
></span>
</button>
</twc-switch>
</div>

<div>
<twc-popover class="relative">
<twc-floating-panel placement="top" offset-options="8">
<button type="button" data-target="twc-popover.trigger twc-floating-panel.trigger">Toggle</button>
<div
data-target="twc-popover.panel twc-floating-panel.panel"
class="group z-10 hidden w-64 p-4 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
>
<div
class="absolute h-0 w-0 border-x-[10px] border-x-transparent border-t-[10px] border-t-white group-data-[current-placement^='top']:-bottom-2 group-data-[current-placement^='bottom']:-top-2 group-data-[current-placement^='right']:-left-2 group-data-[current-placement^='left']:-right-2"
data-target="twc-floating-panel.arrow"
></div>
<p>This is a popover</p>
<twc-popover class="relative">
<button type="button" data-target="twc-popover.trigger">Toggle nested</button>
<div
data-target="twc-popover.panel"
class="hidden absolute w-64 p-4 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
>
<p>Nested popover</p>
</div>
</twc-popover>
</div>
</twc-floating-panel>
</twc-popover>
</div>

<div class="mt-8">
<twc-dropdown class="relative">
<twc-floating-panel offset-options='{"mainAxis": 40, "crossAxis": 20}'>
<button type="button" data-target="twc-dropdown.trigger twc-floating-panel.trigger">Toggle dropdown</button>
<div
data-target="twc-dropdown.menu twc-floating-panel.panel"
class="py-2 hidden absolute w-64 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
>
<a
href="#dashboard"
data-target="twc-dropdown.menuItems"
class="block w-full py-3 px-3 data-[headlessui-state='active']:bg-gray-100"
aria-disabled="true"
>Dashboard</a
>
<a
href="#settings"
data-target="twc-dropdown.menuItems"
class="block w-full py-3 px-3 data-[headlessui-state='active']:bg-gray-100"
>Settings</a
>
<a
href="#signout"
data-target="twc-dropdown.menuItems"
class="block w-full py-3 px-3 data-[headlessui-state='active']:bg-gray-100"
>Sign out</a
>
</div>
</twc-floating-panel>
</twc-dropdown>
</div>

<div class="mt-8">
<button type="button" data-twc-dialog="dialog1">Open dialog</button>

<twc-dialog id="dialog1">
<dialog data-target="twc-dialog.dialog" class="p-4">
<button type="button" data-twc-dialog="dialog2">Open nested</button>
<twc-dialog id="dialog2">
<dialog data-target="twc-dialog.dialog" class="p-4">
<button type="button" data-action="click->twc-dialog#hide">Hide</button>
</dialog>
</twc-dialog>
</dialog>
</twc-dialog>
</div>

<div class="mt-8">
<twc-popover>
<button type="button" data-target="twc-popover.trigger">Open popover with dialog</button>
<div
data-target="twc-popover.panel"
class="hidden absolute w-64 p-4 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
>
<button type="button" data-twc-dialog="popover-dialog">Open dialog</button>
<twc-dialog id="popover-dialog">
<dialog data-target="twc-dialog.dialog" class="p-4">Contents!</dialog>
</twc-dialog>
</div>
</twc-popover>
</div>

<div class="mt-8">
<twc-tabs>
<twc-tabs-list>
<button type="button" data-target="twc-tabs.triggers" aria-controls="panel1">Tab 1</button>
<button type="button" data-target="twc-tabs.triggers" aria-controls="panel2" data-headlessui-state="selected">
Tab 2
</button>
<button type="button" data-target="twc-tabs.triggers" aria-controls="panel3">Tab 3</button>
</twc-tabs-list>

<div id="panel1" data-target="twc-tabs.panels" class="hidden data-[headlessui-state='selected']:block">
Panel 1
</div>
<div id="panel2" data-target="twc-tabs.panels" class="hidden data-[headlessui-state='selected']:block">
Panel 2
</div>
<div id="panel3" data-target="twc-tabs.panels" class="hidden data-[headlessui-state='selected']:block">
Panel 3
</div>
</twc-tabs>
</div>

<div class="mt-8">
<h2>Floating panel with trigger id</h2>
<div class="mt-2">
<button type="button" id="trigger-id-1">Button 1</button>
<button type="button" id="trigger-id-2">Button 2</button>

<twc-floating-panel trigger-id="trigger-id-1" active placement="bottom">
<div data-target="twc-floating-panel.panel" class="bg-white rounded shadow p-4 border">
Floating contents!
</div>
</twc-floating-panel>
</div>
</div>

<div class="mt-20">
<h2>Tooltip element</h2>
<twc-tooltip>
<twc-floating-panel placement="top" offset-options="8">
<button type="button" data-target="twc-tooltip.trigger twc-floating-panel.trigger">Hover me</button>
<div
data-target="twc-tooltip.panel twc-floating-panel.panel"
class="m-0 group overflow-visible bg-gray-900 rounded text-white py-1 px-2"
>
<div
class="absolute h-0 w-0 border-x-[10px] border-x-transparent border-t-[10px] border-t-gray-900 group-data-[current-placement^='top']:-bottom-2 group-data-[current-placement^='bottom']:-top-2 group-data-[current-placement^='right']:-left-2 group-data-[current-placement^='left']:-right-2"
data-target="twc-floating-panel.arrow"
></div>
Hello, Tooltip!
</div>
</twc-floating-panel>
</twc-tooltip>
</div>
<script type="module" src="/src/index.ts"></script>
<body
class="flex flex-col h-0 min-h-screen supports-[min-height:100dvh]:min-h-[100dvh] bg-white font-sans text-gray-900"
>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
18 changes: 15 additions & 3 deletions packages/playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,23 @@
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@headlessui/tailwindcss": "^0.2.0",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"tailwindcss": "^3.4.1",
"vue": "^3.4.19",
"vue-router": "^4.3.0"
},
"devDependencies": {
"tailwindcss-elements": "^*",
"vite": "^5.0.8"
"@vitejs/plugin-vue": "^5.0.4",
"autoprefixer": "^10.4.18",
"postcss": "^8.4.35",
"typescript": "^5.2.2",
"vite": "^5.1.4",
"vue-tsc": "^1.8.27"
}
}
6 changes: 6 additions & 0 deletions packages/playground/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
9 changes: 9 additions & 0 deletions packages/playground/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script setup lang="ts">
import Layout from './layout.vue';
</script>

<template>
<Layout>
<router-view />
</Layout>
</template>
1 change: 1 addition & 0 deletions packages/playground/src/assets/vue.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions packages/playground/src/components/button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
name: 'GdButton',
});
</script>

<template>
<button
type="button"
class="inline-flex justify-center rounded bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm select-none ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
<slot />
</button>
</template>
17 changes: 0 additions & 17 deletions packages/playground/src/index.ts
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions packages/playground/src/layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<div class="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
<header
class="relative z-10 flex flex-shrink-0 items-center border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8"
>
<router-link to="/">
<h1 class="text-white text-lg">tailwindcss-elements</h1>
</router-link>
</header>
<main class="flex-1 flex flex-col overflow-auto bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
<slot></slot>
</main>
</div>
</template>
9 changes: 9 additions & 0 deletions packages/playground/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { createApp } from 'vue';
import './style.css';
import 'tailwindcss-elements';
import router from './router';
import App from './App.vue';

const app = createApp(App);
app.use(router);
app.mount('#app');
Loading