Skip to content

Commit

Permalink
feat: add plugins
Browse files Browse the repository at this point in the history 
- eslint 等
- 更新 HelloWorld
  • Loading branch information
@tymon42
tymon42 committed May 27, 2023
1 parent e93b7c8 commit 5ec4880
Show file tree
Hide file tree
Showing 6 changed files with 2,761 additions and 233 deletions.
3 changes: 3 additions & 0 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "@antfu"
}
13 changes: 12 additions & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
{
"nuxt.isNuxtApp": false
"nuxt.isNuxtApp": false,
"prettier.enable": false,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"stylelint.enable": true,
"stylelint.validate": [
"css",
"vue",
"html"
]
}
264 changes: 135 additions & 129 deletions components/HelloWorld.vue
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,35 @@
<template>
<UContainer>
<div class="sm:text-center">
<UAvatar size="3xl"
src="https://avatars.githubusercontent.com/u/15265627?s=400&u=d2d9280bdbc5b88bd3573702e5be258dc3c61c2a&v=4"
alt="Harry Wong" chip-color="primary" chip-position="top-right" />
<br />
<UBadge size="lg">Fast</UBadge>
<UBadge size="lg">Light</UBadge>
<UBadge size="lg">Tailwind</UBadge>
<UBadge size="lg">Nuxtlab-UI</UBadge>
<br>
<br>
<UContainer>
<UIcon name="i-heroicons-light-bulb" />
<h1>A fast start Nuxt.js template</h1>
</UContainer>
<br>
<UButtonGroup size="xl">
<UButton label="Button" color="white" />
<UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
<UButton label="Groups" color="white" />
</UButtonGroup>
<UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
<UButton color="white" label="Dropdown" trailing-icon="i-heroicons-chevron-down-20-solid" />
</UDropdown>
<br>
<br>
<UInput loading icon="i-heroicons-magnifying-glass-20-solid" size="xl" color="primary" variant="outline"
placeholder="Search..." />
<UInput icon="i-heroicons-magnifying-glass-20-solid" size="xl" color="primary" variant="outline"
placeholder="Search..." />
<br>
<UTextarea color="primary" variant="outline" placeholder="Textarea" />
<USelect size="sm" color="primary" variant="outline" placeholder="Select"
:options="['United States', 'Canada', 'Mexico']" />

<USelectMenu v-model="selected" :options="people" />
<br>
<UCheckbox label="Label" />
<UCheckbox label="Label" help="Please check this box" />
<UCheckbox label="Label" disabled />
<br>
<URadio label="Label" />
<URadio label="Label" />
<URadio label="Label" />
<br>
<!-- <UToggle /> -->
<!-- <UToggle /> -->
<!-- <UToggle /> -->
<br>
<!-- <UFormGroup label="Email" required>
<UInput placeholder="[email protected]" icon="i-heroicons-envelope" />
</UFormGroup> -->
<br>
<UButtonGroup>
<UButton label="Open Modal" @click="isModalOpen = true" />
<UButton color="red" label="Open Slideover" @click="isSlideoverOpen = true" />
<UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
</UButtonGroup>
<UModal v-model="isModalOpen">
<UContainer>
<h1>Hi, this is a modal</h1>
</UContainer>
</UModal>

<USlideover v-model="isSlideoverOpen">
<!-- Content -->
<UContainer>
<h1>Hi, this is a Slideover</h1>
</UContainer>
</USlideover>

<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<!-- Content -->
<h1>Hi, this is a Popover</h1>
</template>
</UPopover>
<br>
<br>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
<UButton color="gray" label="Hover me" />
</UTooltip>

</div>
</UContainer>
</template>

<!-- eslint-disable no-console -->
<script setup lang="ts">
const items = [
[{
label: 'Profile',
avatar: {
src: "https://avatars.githubusercontent.com/u/15265627?s=400&u=d2d9280bdbc5b88bd3573702e5be258dc3c61c2a&v=4"
// src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}], [{
label: 'Edit',
icon: 'i-heroicons-pencil-square-20-solid',
shortcuts: ['E'],
click: () => {
console.log('Edit')
}
}, {
label: 'Duplicate',
icon: 'i-heroicons-document-duplicate-20-solid',
shortcuts: ['D'],
disabled: true
}], [{
label: 'Archive',
icon: 'i-heroicons-archive-box-20-solid'
}, {
label: 'Move',
icon: 'i-heroicons-arrow-right-circle-20-solid'
}], [{
label: 'Delete',
icon: 'i-heroicons-trash-20-solid',
shortcuts: ['⌘', 'D']
}]
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/15265627?s=400&u=d2d9280bdbc5b88bd3573702e5be258dc3c61c2a&v=4',
// src: 'https://avatars.githubusercontent.com/u/739984?v=4'
},
}], [{
label: 'Edit',
icon: 'i-heroicons-pencil-square-20-solid',
shortcuts: ['E'],
click: () => {
console.log('Edit')
},
}, {
label: 'Duplicate',
icon: 'i-heroicons-document-duplicate-20-solid',
shortcuts: ['D'],
disabled: true,
}], [{
label: 'Archive',
icon: 'i-heroicons-archive-box-20-solid',
}, {
label: 'Move',
icon: 'i-heroicons-arrow-right-circle-20-solid',
}], [{
label: 'Delete',
icon: 'i-heroicons-trash-20-solid',
shortcuts: ['⌘', 'D'],
}],
]

const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
Expand All @@ -129,17 +40,112 @@ const isModalOpen = ref(false)
const isSlideoverOpen = ref(false)

const toast = useToast()
</script>

<template>
<UContainer>
<div class="sm:text-center">
<UAvatar
size="3xl"
src="https://avatars.githubusercontent.com/u/15265627?s=400&u=d2d9280bdbc5b88bd3573702e5be258dc3c61c2a&v=4"
alt="Harry Wong" chip-color="primary" chip-position="top-right"
/>
<br>
<UBadge size="lg">
Fast
</UBadge>
<UBadge size="lg">
Light
</UBadge>
<UBadge size="lg">
Tailwind
</UBadge>
<UBadge size="lg">
Nuxtlab-UI
</UBadge>
<br>
<br>
<UContainer>
<UIcon name="i-heroicons-light-bulb" />
<h1>A fast start Nuxt.js template</h1>
</UContainer>
<br>
<UButtonGroup size="xl">
<UButton label="Button" color="white" />
<UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
<UButton label="Groups" color="white" />
</UButtonGroup>
<UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
<UButton color="white" label="Dropdown" trailing-icon="i-heroicons-chevron-down-20-solid" />
</UDropdown>
<br>
<br>
<UInput
name="input1"
loading icon="i-heroicons-magnifying-glass-20-solid" size="xl" color="primary" variant="outline"
placeholder="Search..."
/>
<UInput
name="input2"
icon="i-heroicons-magnifying-glass-20-solid" size="xl" color="primary" variant="outline"
placeholder="Search..."
/>
<br>
<UTextarea name="textarea" color="primary" variant="outline" placeholder="Textarea" />
<USelect
name="select"
size="sm" color="primary" variant="outline" placeholder="Select"
:options="['United States', 'Canada', 'Mexico']"
/>

<USelectMenu v-model="selected" :options="people" />
<br>
<UCheckbox label="Label" />
<UCheckbox label="Label" help="Please check this box" />
<UCheckbox label="Label" disabled />
<br>
<URadio label="Label" />
<URadio label="Label" />
<URadio label="Label" />
<br>
<!-- <UToggle /> -->
<!-- <UToggle /> -->
<!-- <UToggle /> -->
<br>
<!-- <UFormGroup label="Email" required>
<UInput placeholder="[email protected]" icon="i-heroicons-envelope" />
</UFormGroup> -->
<br>
<UButtonGroup>
<UButton label="Open Modal" @click="isModalOpen = true" />
<UButton color="red" label="Open Slideover" @click="isSlideoverOpen = true" />
<UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
</UButtonGroup>
<UModal v-model="isModalOpen">
<UContainer>
<h1>Hi, this is a modal</h1>
</UContainer>
</UModal>

<USlideover v-model="isSlideoverOpen">
<!-- Content -->
<UContainer>
<h1>Hi, this is a Slideover</h1>
</UContainer>
</USlideover>

<style lang="postcss" scoped>
.center-body {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<!-- Content -->
<h1>Hi, this is a Popover</h1>
</template>
</UPopover>
<br>
<br>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
<UButton color="gray" label="Hover me" />
</UTooltip>
</div>
</UContainer>
</template>
35 changes: 33 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,43 @@
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
"postinstall": "nuxt prepare",
"lint-staged": "lint-staged"
},
"devDependencies": {
"@antfu/eslint-config": "^0.39.3",
"@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^17.6.3",
"@nuxt/devtools": "^0.5.5",
"@nuxthq/ui": "^2.2.0",
"@types/node": "^18",
"nuxt": "^3.5.1"
"commitizen": "^4.3.0",
"cz-git": "^1.6.1",
"eslint": "^8.41.0",
"lint-staged": "^13.2.2",
"nuxt": "^3.5.1",
"postcss-html": "^1.5.0",
"stylelint": "^15.6.2",
"stylelint-config-html": "^1.1.0",
"stylelint-config-recess-order": "^4.0.0",
"stylelint-config-standard": "^33.0.0",
"typescript": "^5.0.4"
},
"lint-staged": {
"*.{js,ts,tsx,jsx}": [
"eslint --fix --ext"
],
"*.vue": [
"eslint --fix --ext",
"stylelint --cache --fix"
],
"*.{css,html}": [
"stylelint --cache --fix"
]
},
"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
}
}
29 changes: 29 additions & 0 deletions style.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// eslint-disable-next-line antfu/no-cjs-exports
module.exports = {
/* 继承某些已有的规则 */
extends: [
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
],
overrides: [
// 扫描 .vue/html 文件中的<style>标签内的样式
{
files: ['**/*.{vue,html}'],
customSyntax: 'postcss-html',
},
],
rules: {
'string-quotes': 'double', // 指定字符串使用单引号或双引号
'color-hex-case': 'lower', // 16 进制颜色全小写
'color-hex-length': 'long', // 禁止16禁止颜色小写
'rule-empty-line-before': 'always', // 在规则之前的空行必须始终有一个空行
'block-opening-brace-space-before': 'always', // 在块的开大括号之前必须有一个空格
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep'],
},
],
},
}
Loading

0 comments on commit 5ec4880

Please sign in to comment.