diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 0694053f2..000000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-env node */ -require('@rushstack/eslint-patch/modern-module-resolution') - -module.exports = { - root: true, - extends: [ - 'plugin:vue/vue3-essential', - 'eslint:recommended', - '@vue/eslint-config-typescript/recommended', - '@vue/eslint-config-prettier', - ], - env: { - 'vue/setup-compiler-macros': true, - }, -} diff --git a/.github/actions/install/action.yml b/.github/actions/install/action.yml new file mode 100644 index 000000000..7e7aeee70 --- /dev/null +++ b/.github/actions/install/action.yml @@ -0,0 +1,28 @@ +name: "Install Dependencies" +description: "Install cached dependencies" + +runs: + using: "composite" + steps: + - uses: pnpm/action-setup@v3 + with: + version: 9 + run_install: false + + - uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'pnpm' + + - name: Restore node_modules cache + uses: actions/cache@v4 + id: pnpm-cache + with: + path: '**/node_modules' + key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm- + + - name: Install dependencies + shell: bash + run: pnpm install --frozen-lockfile diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index cc71f711b..1a8827ba7 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,34 +1,25 @@ name: Release + on: push: branches: - master - next - beta + jobs: release: - runs-on: ubuntu-18.04 + runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - cache: yarn - - uses: actions/cache@v3 - id: yarn-cache - with: - path: node_modules - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: ${{ runner.os }}-yarn- + - uses: actions/checkout@v4 - - name: Install dependencies - run: yarn install --frozen-lockfile + - uses: ./.github/actions/install - name: Test - run: yarn test + run: pnpm run test - name: Build - run: yarn build + run: pnpm run build - name: Release env: diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 2cd15a6b0..f633b91d9 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,61 +1,42 @@ name: Test & Build + on: [pull_request] + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: ${{ github.ref != 'refs/heads/main' }} + jobs: test: - runs-on: ubuntu-18.04 + runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - cache: yarn - - uses: actions/cache@v3 - id: yarn-cache - with: - path: node_modules - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: ${{ runner.os }}-yarn- + - uses: actions/checkout@v4 - - name: Install dependencies - run: yarn install --frozen-lockfile + - uses: ./.github/actions/install - name: Test with Coverage - run: yarn coverage + run: pnpm run coverage - name: ESLint - run: yarn eslint + run: pnpm run lint - name: Report Coverage - uses: coverallsapp/github-action@master + uses: coverallsapp/github-action@v2 with: github-token: ${{ secrets.GITHUB_TOKEN }} build: - runs-on: ubuntu-18.04 + runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - cache: yarn - - uses: actions/cache@v3 - id: yarn-cache - with: - path: '**/node_modules' - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: ${{ runner.os }}-yarn- + - uses: actions/checkout@v4 - - name: Install dependencies - run: yarn install --frozen-lockfile --prefer-offline + - uses: ./.github/actions/install - name: Build Dist - run: yarn build + run: pnpm run build - name: Bundlewatch run: npx bundlewatch - name: Build Docs - run: | - cd docs - yarn install --frozen-lockfile --prefer-offline - yarn build + run: pnpm run build:docs diff --git a/docs/.data/content/contents.sqlite b/docs/.data/content/contents.sqlite new file mode 100644 index 000000000..8a45c1919 Binary files /dev/null and b/docs/.data/content/contents.sqlite differ diff --git a/docs/.gitignore b/docs/.gitignore index 438cb0860..58cd12c7b 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -5,4 +5,5 @@ node_modules .cache .output .env +.data dist diff --git a/docs/assets/styles/main.css b/docs/assets/styles/main.css index 9df1a93b1..8c5aa8b26 100644 --- a/docs/assets/styles/main.css +++ b/docs/assets/styles/main.css @@ -1,70 +1,133 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; +@plugin '@tailwindcss/typography'; + +@custom-variant dark (&:is(.dark *)); + +@theme { + --text-*: initial; + --text-xs: 0.75rem; + --text-xs--line-height: 1rem; + --text-sm: 0.875rem; + --text-sm--line-height: 1.5rem; + --text-base: 1rem; + --text-base--line-height: 2rem; + --text-lg: 1.125rem; + --text-lg--line-height: 1.75rem; + --text-xl: 1.25rem; + --text-xl--line-height: 2rem; + --text-2xl: 1.5rem; + --text-2xl--line-height: 2.5rem; + --text-3xl: 2rem; + --text-3xl--line-height: 2.5rem; + --text-4xl: 2.5rem; + --text-4xl--line-height: 3rem; + --text-5xl: 3rem; + --text-5xl--line-height: 3.5rem; + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; + --text-7xl: 4.5rem; + --text-7xl--line-height: 1; + --text-8xl: 6rem; + --text-8xl--line-height: 1; + --text-9xl: 8rem; + --text-9xl--line-height: 1; + + --font-sans: Public Sans, Inter var, Inter, sans-serif; + --font-display: Satoshi, Public Sans, Inter var, Inter, sans-serif; + + --container-8xl: 88rem; +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ @layer base { - html { - @apply scroll-smooth; + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); } +} - @font-face { - font-family: 'Satoshi'; - src: - url('~/assets/fonts/Satoshi-Light.woff2') format('woff2'), - url('~/assets/fonts/Satoshi-Light.woff') format('woff'), - url('~/assets/fonts/Satoshi-Light.ttf') format('truetype'); - font-weight: 300; - font-display: swap; - font-style: normal; - } +@utility dark { + & .v-select { + --vs-colors--lightest: rgba(60, 60, 60, 0.26); + --vs-colors--light: rgba(60, 60, 60, 0.5); + --vs-colors--dark: #333; + --vs-colors--darkest: rgba(0, 0, 0, 0.15); - @font-face { - font-family: 'Satoshi'; - src: - url('~/assets/fonts/Satoshi-Regular.woff2') format('woff2'), - url('~/assets/fonts/Satoshi-Regular.woff') format('woff'), - url('~/assets/fonts/Satoshi-Regular.ttf') format('truetype'); - font-weight: 400; - font-display: swap; - font-style: normal; - } + /* Search Input */ + --vs-search-input-color: inherit; + --vs-search-input-placeholder-color: inherit; - @font-face { - font-family: 'Satoshi'; - src: - url('~/assets/fonts/Satoshi-Medium.woff2') format('woff2'), - url('~/assets/fonts/Satoshi-Medium.woff') format('woff'), - url('~/assets/fonts/Satoshi-Medium.ttf') format('truetype'); - font-weight: 500; - font-display: swap; - font-style: normal; - } + /* Font */ + --vs-font-size: 1rem; + --vs-line-height: 1.4; - @font-face { - font-family: 'Satoshi'; - src: - url('~/assets/fonts/Satoshi-Bold.woff2') format('woff2'), - url('~/assets/fonts/Satoshi-Bold.woff') format('woff'), - url('~/assets/fonts/Satoshi-Bold.ttf') format('truetype'); - font-weight: 700; - font-display: swap; - font-style: normal; - } + /* Disabled State */ + --vs-state-disabled-bg: rgb(248, 248, 248); + --vs-state-disabled-color: var(--vs-colors--light); + --vs-state-disabled-controls-color: var(--vs-colors--light); + --vs-state-disabled-cursor: not-allowed; - @font-face { - font-family: 'Satoshi'; - src: - url('~/assets/fonts/Satoshi-Black.woff2') format('woff2'), - url('~/assets/fonts/Satoshi-Black.woff') format('woff'), - url('~/assets/fonts/Satoshi-Black.ttf') format('truetype'); - font-weight: 900; - font-display: swap; - font-style: normal; + /* Borders */ + --vs-border-color: #24292e; + --vs-border-width: 1px; + --vs-border-style: solid; + --vs-border-radius: 4px; + + /* Actions: house the component controls */ + --vs-actions-padding: 4px 6px 0 3px; + + /* Component Controls: Clear, Open Indicator */ + --vs-controls-color: #c9c2c2; + --vs-controls-size: 1; + --vs-controls--deselect-text-shadow: 0 1px 0 #fff; + + /* Selected */ + --vs-selected-bg: #f0f0f0; + --vs-selected-color: #fff; + --vs-selected-border-color: var(--vs-border-color); + --vs-selected-border-style: var(--vs-border-style); + --vs-selected-border-width: var(--vs-border-width); + + /* Dropdown */ + --vs-dropdown-bg: #343434; + --vs-dropdown-color: inherit; + --vs-dropdown-z-index: 1000; + --vs-dropdown-min-width: 160px; + --vs-dropdown-max-height: 350px; + --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest); + + /* Options */ + --vs-dropdown-option-bg: #000; + --vs-dropdown-option-color: #fff; + --vs-dropdown-option-padding: 3px 20px; + + /* Active State */ + --vs-dropdown-option--active-bg: #5897fb; + --vs-dropdown-option--active-color: #fff; + + /* Deselect State */ + --vs-dropdown-option--deselect-bg: #fb5858; + --vs-dropdown-option--deselect-color: #fff; + + /* Transitions */ + --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855); + --vs-transition-duration: 150ms; } } -@layer components { - .dark .v-select { +@utility v-select { + .dark & { --vs-colors--lightest: rgba(60, 60, 60, 0.26); --vs-colors--light: rgba(60, 60, 60, 0.5); --vs-colors--dark: #333; @@ -131,3 +194,64 @@ --vs-transition-duration: 150ms; } } + +@layer base { + html { + @apply scroll-smooth; + } + + @font-face { + font-family: 'Satoshi'; + src: + url('~/assets/fonts/Satoshi-Light.woff2') format('woff2'), + url('~/assets/fonts/Satoshi-Light.woff') format('woff'), + url('~/assets/fonts/Satoshi-Light.ttf') format('truetype'); + font-weight: 300; + font-display: swap; + font-style: normal; + } + + @font-face { + font-family: 'Satoshi'; + src: + url('~/assets/fonts/Satoshi-Regular.woff2') format('woff2'), + url('~/assets/fonts/Satoshi-Regular.woff') format('woff'), + url('~/assets/fonts/Satoshi-Regular.ttf') format('truetype'); + font-weight: 400; + font-display: swap; + font-style: normal; + } + + @font-face { + font-family: 'Satoshi'; + src: + url('~/assets/fonts/Satoshi-Medium.woff2') format('woff2'), + url('~/assets/fonts/Satoshi-Medium.woff') format('woff'), + url('~/assets/fonts/Satoshi-Medium.ttf') format('truetype'); + font-weight: 500; + font-display: swap; + font-style: normal; + } + + @font-face { + font-family: 'Satoshi'; + src: + url('~/assets/fonts/Satoshi-Bold.woff2') format('woff2'), + url('~/assets/fonts/Satoshi-Bold.woff') format('woff'), + url('~/assets/fonts/Satoshi-Bold.ttf') format('truetype'); + font-weight: 700; + font-display: swap; + font-style: normal; + } + + @font-face { + font-family: 'Satoshi'; + src: + url('~/assets/fonts/Satoshi-Black.woff2') format('woff2'), + url('~/assets/fonts/Satoshi-Black.woff') format('woff'), + url('~/assets/fonts/Satoshi-Black.ttf') format('truetype'); + font-weight: 900; + font-display: swap; + font-style: normal; + } +} diff --git a/docs/components/ApplicationHeader.vue b/docs/components/ApplicationHeader.vue index a2c8ac45b..018d60358 100644 --- a/docs/components/ApplicationHeader.vue +++ b/docs/components/ApplicationHeader.vue @@ -14,7 +14,7 @@ const isScrolled = computed(() => y.value !== 0) :class="[ 'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8', isScrolled - ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75' + ? 'dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75' : 'dark:bg-transparent', ]" > @@ -46,7 +46,7 @@ const isScrolled = computed(() => y.value !== 0) " > -
+
y.value !== 0)
-
+
({ primary: - 'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500', + 'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500', secondary: - 'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400', + 'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400', }[props.variant]) ) diff --git a/docs/components/Hero.vue b/docs/components/Hero.vue index 2164a671c..b697dde52 100644 --- a/docs/components/Hero.vue +++ b/docs/components/Hero.vue @@ -29,7 +29,7 @@ import { />

The complete Vue.js combobox solution.

@@ -74,19 +74,19 @@ import { height="567" />
diff --git a/docs/components/PageContent.vue b/docs/components/PageContent.vue index 85f8ca7cf..aa498393a 100644 --- a/docs/components/PageContent.vue +++ b/docs/components/PageContent.vue @@ -20,7 +20,7 @@ import PageTableOfContents from '~/components/PageTableOfContents.vue' // links 'prose-a:font-semibold dark:prose-a:text-sky-400', // link underline - 'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]', + 'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-sky-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:var(--color-slate-900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-sky-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]', // pre 'prose-pre:rounded-xl prose-pre:border-2 prose-pre:bg-white dark:prose-pre:border-0 dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-lg dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10', // hr diff --git a/docs/components/SidebarNavigation.vue b/docs/components/SidebarNavigation.vue index f947c9f75..1876714aa 100644 --- a/docs/components/SidebarNavigation.vue +++ b/docs/components/SidebarNavigation.vue @@ -73,7 +73,7 @@ const router = { pathname: '' } class="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-16 pl-0.5" >