@huberyyang/create-todo-vue 1.0.1 → 1.1.0

package/template-vitesse-base/src/components/README.md

@@ -1,9 +0,0 @@
-## Components
-
-Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
-
-### Icons
-
-You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
-
-It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.

package/template-vitesse-base/src/components/TheCounter.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  initial: number
-}>()
-
-const { count, inc, dec } = useCounter(props.initial)
-</script>
-
-<template>
-  <div>
-    {{ count }}
-    <button class="inc" @click="inc()">
-      +
-    </button>
-    <button class="dec" @click="dec()">
-      -
-    </button>
-  </div>
-</template>

package/template-vitesse-base/src/components/TheFooter.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { availableLocales, loadLanguageAsync } from '~/modules/i18n'
-
-const { t, locale } = useI18n()
-
-async function toggleLocales() {
-  // change to some real logic
-  const locales = availableLocales
-  const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
-  await loadLanguageAsync(newLocale)
-  locale.value = newLocale
-}
-</script>
-
-<template>
-  <nav flex="~ gap-4" mt-6 justify-center text-xl>
-    <RouterLink icon-btn to="/" :title="t('button.home')">
-      <div i-carbon-campsite />
-    </RouterLink>
-
-    <button icon-btn :title="t('button.toggle_dark')" @click="toggleDark()">
-      <div i="carbon-sun dark:carbon-moon" />
-    </button>
-
-    <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
-      <div i-carbon-language />
-    </a>
-
-    <RouterLink icon-btn to="/about" :title="t('button.about')" data-test-id="about">
-      <div i-carbon-dicom-overlay />
-    </RouterLink>
-
-    <a icon-btn rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
-      <div i-carbon-logo-github />
-    </a>
-  </nav>
-</template>

package/template-vitesse-base/src/components/TheInput.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const { modelValue } = defineModels<{
-  modelValue: string
-}>()
-</script>
-
-<template>
-  <input
-    id="input"
-    v-model="modelValue"
-    v-bind="$attrs"
-    type="text"
-    p="x-4 y-2"
-    w="250px"
-    text="center"
-    bg="transparent"
-    border="~ rounded gray-200 dark:gray-700"
-    outline="none active:none"
-  >
-</template>

package/template-vitesse-base/src/components.d.ts

@@ -1,17 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    README: typeof import('./components/README.md')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    TheCounter: typeof import('./components/TheCounter.vue')['default']
-    TheFooter: typeof import('./components/TheFooter.vue')['default']
-    TheInput: typeof import('./components/TheInput.vue')['default']
-  }
-}

package/template-vitesse-base/src/composables/dark.ts

@@ -1,4 +0,0 @@
-// these APIs are auto-imported from @vueuse/core
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
-export const preferredDark = usePreferredDark()

package/template-vitesse-base/src/layouts/404.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-const router = useRouter()
-const { t } = useI18n()
-useHead({
-  title: () => t('not-found'),
-})
-</script>
-
-<template>
-  <main p="x4 y10" text="center teal-700 dark:gray-200">
-    <div text-4xl>
-      <div i-carbon-warning inline-block />
-    </div>
-    <RouterView />
-    <div>
-      <button text-sm btn m="3 t8" @click="router.back()">
-        {{ t('button.back') }}
-      </button>
-    </div>
-  </main>
-</template>

package/template-vitesse-base/src/layouts/README.md

@@ -1,14 +0,0 @@
-## Layouts
-
-Vue components in this dir are used as layouts.
-
-By default, `default.vue` will be used unless an alternative is specified in the route meta.
-
-With [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) and [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts), you can specify the layout in the page's SFCs like this:
-
-```vue
-<route lang="yaml">
-meta:
-  layout: home
-</route>
-```

package/template-vitesse-base/src/layouts/default.vue

@@ -1,12 +0,0 @@
-<template>
-  <main
-    px-4 py-10
-    text="center gray-700 dark:gray-200"
-  >
-    <RouterView />
-    <TheFooter />
-    <div mx-auto mt-5 text-center text-sm opacity-50>
-      [Default Layout]
-    </div>
-  </main>
-</template>

package/template-vitesse-base/src/layouts/home.vue

@@ -1,12 +0,0 @@
-<template>
-  <main
-    px-4 py-10
-    text="center gray-700 dark:gray-200"
-  >
-    <RouterView />
-    <TheFooter />
-    <div mx-auto mt-5 text-center text-sm opacity-50>
-      [Home Layout]
-    </div>
-  </main>
-</template>

package/template-vitesse-base/src/main.ts

@@ -1,25 +0,0 @@
-import type { UserModule } from './types'
-
-import { setupLayouts } from 'virtual:generated-layouts'
-import { ViteSSG } from 'vite-ssg'
-import { routes } from 'vue-router/auto-routes'
-import App from './App.vue'
-
-import '@unocss/reset/tailwind.css'
-import './styles/main.css'
-import 'uno.css'
-
-// https://github.com/antfu/vite-ssg
-export const createApp = ViteSSG(
-  App,
-  {
-    routes: setupLayouts(routes),
-    base: import.meta.env.BASE_URL,
-  },
-  (ctx) => {
-    // install all modules under `modules/`
-    Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
-      .forEach(i => i.install?.(ctx))
-    // ctx.app.use(Previewer)
-  },
-)

package/template-vitesse-base/src/modules/README.md

@@ -1,11 +0,0 @@
-## Modules
-
-A custom user module system. Place a `.ts` file with the following template, it will be installed automatically.
-
-```ts
-import type { UserModule } from '~/types'
-
-export const install: UserModule = ({ app, router, isClient }) => {
-  // do something
-}
-```

package/template-vitesse-base/src/modules/i18n.ts

@@ -1,50 +0,0 @@
-import type { Locale } from 'vue-i18n'
-import type { UserModule } from '~/types'
-import { createI18n } from 'vue-i18n'
-
-// Import i18n resources
-// https://vitejs.dev/guide/features.html#glob-import
-//
-// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
-const i18n = createI18n({
-  legacy: false,
-  locale: '',
-  messages: {},
-})
-
-const localesMap = Object.fromEntries(
-  Object.entries(import.meta.glob('../../locales/*.yml'))
-    .map(([path, loadLocale]) => [path.match(/([\w-]*)\.yml$/)?.[1], loadLocale]),
-) as Record<Locale, () => Promise<{ default: Record<string, string> }>>
-
-export const availableLocales = Object.keys(localesMap)
-
-const loadedLanguages: string[] = []
-
-function setI18nLanguage(lang: Locale) {
-  i18n.global.locale.value = lang as any
-  if (typeof document !== 'undefined')
-    document.querySelector('html')?.setAttribute('lang', lang)
-  return lang
-}
-
-export async function loadLanguageAsync(lang: string): Promise<Locale> {
-  // If the same language
-  if (i18n.global.locale.value === lang)
-    return setI18nLanguage(lang)
-
-  // If the language was already loaded
-  if (loadedLanguages.includes(lang))
-    return setI18nLanguage(lang)
-
-  // If the language hasn't been loaded yet
-  const messages = await localesMap[lang]()
-  i18n.global.setLocaleMessage(lang, messages.default)
-  loadedLanguages.push(lang)
-  return setI18nLanguage(lang)
-}
-
-export const install: UserModule = ({ app }) => {
-  app.use(i18n)
-  loadLanguageAsync('en')
-}

package/template-vitesse-base/src/modules/nprogress.ts

@@ -1,14 +0,0 @@
-import type { UserModule } from '~/types'
-import NProgress from 'nprogress'
-
-export const install: UserModule = ({ isClient, router }) => {
-  if (isClient) {
-    router.beforeEach((to, from) => {
-      if (to.path !== from.path)
-        NProgress.start()
-    })
-    router.afterEach(() => {
-      NProgress.done()
-    })
-  }
-}

package/template-vitesse-base/src/modules/pinia.ts

@@ -1,17 +0,0 @@
-import type { UserModule } from '~/types'
-import { createPinia } from 'pinia'
-
-// Setup Pinia
-// https://pinia.vuejs.org/
-export const install: UserModule = ({ isClient, initialState, app }) => {
-  const pinia = createPinia()
-  app.use(pinia)
-  // Refer to
-  // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization
-  // for other serialization strategies.
-  if (isClient)
-    pinia.state.value = (initialState.pinia) || {}
-
-  else
-    initialState.pinia = pinia.state.value
-}

package/template-vitesse-base/src/modules/pwa.ts

@@ -1,14 +0,0 @@
-import type { UserModule } from '~/types'
-
-// https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available
-export const install: UserModule = ({ isClient, router }) => {
-  if (!isClient)
-    return
-
-  router.isReady()
-    .then(async () => {
-      const { registerSW } = await import('virtual:pwa-register')
-      registerSW({ immediate: true })
-    })
-    .catch(() => {})
-}

package/template-vitesse-base/src/pages/README.md

@@ -1,20 +0,0 @@
-## File-based Routing
-
-Routes will be auto-generated for Vue files in this dir with the same file structure.
-Check out [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) for more details.
-
-### Path Aliasing
-
-`~/` is aliased to `./src/` folder.
-
-For example, instead of having
-
-```ts
-import { isDark } from '../../../../composables'
-```
-
-now, you can use
-
-```ts
-import { isDark } from '~/composables'
-```

package/template-vitesse-base/src/pages/[...all].vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-const { t } = useI18n()
-</script>
-
-<template>
-  <div>
-    {{ t('not-found') }}
-  </div>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: 404
-</route>

package/template-vitesse-base/src/pages/about.md

@@ -1,26 +0,0 @@
----
-title: About
----
-
-<script setup>
-const { t } = useI18n()
-useHead({ title: () => t('button.about') })
-</script>
-
-<div class="text-center">
-  <!-- You can use Vue components inside markdown -->
-  <div i-carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
-  <h3>{{ t('button.about') }}</h3>
-</div>
-
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **UnoCSS** for styling and icons.
-
-```js
-// syntax highlighting example
-function vitesse() {
-  const foo = 'bar'
-  console.log(foo)
-}
-```
-
-Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.

package/template-vitesse-base/src/pages/hi/[name].vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-const router = useRouter()
-const route = useRoute('/hi/[name]')
-const user = useUserStore()
-const { t } = useI18n()
-
-watchEffect(() => {
-  user.setNewName(route.params.name)
-})
-useHead({
-  title: () => t('intro.hi', { name: user.savedName }),
-})
-</script>
-
-<template>
-  <div>
-    <div text-4xl>
-      <div i-carbon-pedestrian inline-block />
-    </div>
-    <p>
-      {{ t('intro.hi', { name: user.savedName }) }}
-    </p>
-
-    <p text-sm opacity-75>
-      <em>{{ t('intro.dynamic-route') }}</em>
-    </p>
-
-    <template v-if="user.otherNames.length">
-      <div mt-4 text-sm>
-        <span opacity-75>{{ t('intro.aka') }}:</span>
-        <ul>
-          <li v-for="otherName in user.otherNames" :key="otherName">
-            <RouterLink :to="`/hi/${otherName}`" replace>
-              {{ otherName }}
-            </RouterLink>
-          </li>
-        </ul>
-      </div>
-    </template>
-
-    <div>
-      <button
-        m="3 t6" text-sm btn
-        @click="router.back()"
-      >
-        {{ t('button.back') }}
-      </button>
-    </div>
-  </div>
-</template>

package/template-vitesse-base/src/pages/index.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'IndexPage',
-})
-const user = useUserStore()
-const name = ref(user.savedName)
-
-const router = useRouter()
-function go() {
-  if (name.value)
-    router.push(`/hi/${encodeURIComponent(name.value)}`)
-}
-
-const { t } = useI18n()
-useHead({
-  title: () => t('button.home'),
-})
-</script>
-
-<template>
-  <div>
-    <div text-4xl>
-      <div i-carbon-campsite inline-block />
-    </div>
-    <p>
-      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
-        Vitesse
-      </a>
-    </p>
-    <p>
-      <em text-sm opacity-75>{{ t('intro.desc') }}</em>
-    </p>
-
-    <div py-4 />
-
-    <TheInput
-      v-model="name"
-      :placeholder="t('intro.whats-your-name')"
-      autocomplete="false"
-      @keydown.enter="go"
-    />
-    <label class="hidden" for="input">{{ t('intro.whats-your-name') }}</label>
-
-    <div>
-      <button
-        m-3 text-sm btn
-        :disabled="!name"
-        @click="go"
-      >
-        {{ t('button.go') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: home
-</route>

package/template-vitesse-base/src/shims.d.ts

@@ -1,18 +0,0 @@
-declare interface Window {
-  // extend the window
-}
-
-// with unplugin-vue-markdown, markdown files can be treated as Vue components
-declare module '*.md' {
-  import type { DefineComponent } from 'vue'
-
-  const component: DefineComponent<object, object, any>
-  export default component
-}
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-
-  const component: DefineComponent<object, object, any>
-  export default component
-}

package/template-vitesse-base/src/stores/user.ts

@@ -1,34 +0,0 @@
-import { acceptHMRUpdate, defineStore } from 'pinia'
-
-export const useUserStore = defineStore('user', () => {
-  /**
-   * Current name of the user.
-   */
-  const savedName = ref('')
-  const previousNames = ref(new Set<string>())
-
-  const usedNames = computed(() => Array.from(previousNames.value))
-  const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
-
-  /**
-   * Changes the current name of the user and saves the one that was used
-   * before.
-   *
-   * @param name - new name to set
-   */
-  function setNewName(name: string) {
-    if (savedName.value)
-      previousNames.value.add(savedName.value)
-
-    savedName.value = name
-  }
-
-  return {
-    setNewName,
-    otherNames,
-    savedName,
-  }
-})
-
-if (import.meta.hot)
-  import.meta.hot.accept(acceptHMRUpdate(useUserStore as any, import.meta.hot))

package/template-vitesse-base/src/styles/main.css

@@ -1,29 +0,0 @@
-@import './markdown.css';
-
-html,
-body,
-#app {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-html.dark {
-  background: #121212;
-  color-scheme: dark;
-}
-
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: rgb(13, 148, 136);
-  opacity: 0.75;
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-}

package/template-vitesse-base/src/styles/markdown.css

@@ -1,25 +0,0 @@
-.prose pre:not(.shiki) {
-  padding: 0;
-}
-
-.prose .shiki {
-  font-family: 'DM Mono', monospace;
-  font-size: 1.2em;
-  line-height: 1.4;
-}
-
-.prose img {
-  width: 100%;
-}
-
-.shiki,
-.shiki span {
-  color: var(--shiki-light);
-  background: var(--shiki-light-bg);
-}
-
-html.dark .shiki,
-html.dark .shiki span {
-  color: var(--shiki-dark);
-  background: var(--shiki-dark-bg);
-}

package/template-vitesse-base/src/typed-router.d.ts

@@ -1,27 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
-// It's recommended to commit this file.
-// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
-
-declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'vue-router'
-
-  /**
-   * Route name map generated by unplugin-vue-router
-   */
-  export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
-    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
-    '/hi/[name]': RouteRecordInfo<'/hi/[name]', '/hi/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
-    '/README': RouteRecordInfo<'/README', '/README', Record<never, never>, Record<never, never>>,
-  }
-}

package/template-vitesse-base/src/types.ts

@@ -1,3 +0,0 @@
-import type { ViteSSGContext } from 'vite-ssg'
-
-export type UserModule = (ctx: ViteSSGContext) => void

package/template-vitesse-base/test/__snapshots__/component.test.ts.snap

@@ -1,3 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`component TheCounter.vue > should render 1`] = `"<div>10 <button class="inc"> + </button><button class="dec"> - </button></div>"`;

package/template-vitesse-base/test/basic.test.ts

@@ -1,7 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-describe('tests', () => {
-  it('should works', () => {
-    expect(1 + 1).toEqual(2)
-  })
-})