mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-10 07:52:23 +03:00
Jeff Sagal
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.page-enter-from,
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
filter: blur(0.5rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
@@ -0,0 +1,660 @@
|
||||
export const countries: string[] = [
|
||||
'Afghanistan',
|
||||
'Åland Islands',
|
||||
'Albania',
|
||||
'Algeria',
|
||||
'American Samoa',
|
||||
'Andorra',
|
||||
'Angola',
|
||||
'Anguilla',
|
||||
'Antarctica',
|
||||
'Antigua and Barbuda',
|
||||
'Argentina',
|
||||
'Armenia',
|
||||
'Aruba',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Azerbaijan',
|
||||
'Bahamas',
|
||||
'Bahrain',
|
||||
'Bangladesh',
|
||||
'Barbados',
|
||||
'Belarus',
|
||||
'Belgium',
|
||||
'Belize',
|
||||
'Benin',
|
||||
'Bermuda',
|
||||
'Bhutan',
|
||||
'Bolivia',
|
||||
'Bosnia and Herzegovina',
|
||||
'Botswana',
|
||||
'Bouvet Island',
|
||||
'Brazil',
|
||||
'British Indian Ocean Territory',
|
||||
'Brunei Darussalam',
|
||||
'Bulgaria',
|
||||
'Burkina Faso',
|
||||
'Burundi',
|
||||
'Cambodia',
|
||||
'Cameroon',
|
||||
'Canada',
|
||||
'Cape Verde',
|
||||
'Cayman Islands',
|
||||
'Central African Republic',
|
||||
'Chad',
|
||||
'Chile',
|
||||
'China',
|
||||
'Christmas Island',
|
||||
'Cocos (Keeling) Islands',
|
||||
'Colombia',
|
||||
'Comoros',
|
||||
'Congo',
|
||||
'Congo, The Democratic Republic of The',
|
||||
'Cook Islands',
|
||||
'Costa Rica',
|
||||
"Cote D'ivoire",
|
||||
'Croatia',
|
||||
'Cuba',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Djibouti',
|
||||
'Dominica',
|
||||
'Dominican Republic',
|
||||
'Ecuador',
|
||||
'Egypt',
|
||||
'El Salvador',
|
||||
'Equatorial Guinea',
|
||||
'Eritrea',
|
||||
'Estonia',
|
||||
'Ethiopia',
|
||||
'Falkland Islands (Malvinas)',
|
||||
'Faroe Islands',
|
||||
'Fiji',
|
||||
'Finland',
|
||||
'France',
|
||||
'French Guiana',
|
||||
'French Polynesia',
|
||||
'French Southern Territories',
|
||||
'Gabon',
|
||||
'Gambia',
|
||||
'Georgia',
|
||||
'Germany',
|
||||
'Ghana',
|
||||
'Gibraltar',
|
||||
'Greece',
|
||||
'Greenland',
|
||||
'Grenada',
|
||||
'Guadeloupe',
|
||||
'Guam',
|
||||
'Guatemala',
|
||||
'Guernsey',
|
||||
'Guinea',
|
||||
'Guinea-bissau',
|
||||
'Guyana',
|
||||
'Haiti',
|
||||
'Heard Island and Mcdonald Islands',
|
||||
'Holy See (Vatican City State)',
|
||||
'Honduras',
|
||||
'Hong Kong',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Iran, Islamic Republic of',
|
||||
'Iraq',
|
||||
'Ireland',
|
||||
'Isle of Man',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Jersey',
|
||||
'Jordan',
|
||||
'Kazakhstan',
|
||||
'Kenya',
|
||||
'Kiribati',
|
||||
"Korea, Democratic People's Republic of",
|
||||
'Korea, Republic of',
|
||||
'Kuwait',
|
||||
'Kyrgyzstan',
|
||||
"Lao People's Democratic Republic",
|
||||
'Latvia',
|
||||
'Lebanon',
|
||||
'Lesotho',
|
||||
'Liberia',
|
||||
'Libyan Arab Jamahiriya',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Macao',
|
||||
'Macedonia, The Former Yugoslav Republic of',
|
||||
'Madagascar',
|
||||
'Malawi',
|
||||
'Malaysia',
|
||||
'Maldives',
|
||||
'Mali',
|
||||
'Malta',
|
||||
'Marshall Islands',
|
||||
'Martinique',
|
||||
'Mauritania',
|
||||
'Mauritius',
|
||||
'Mayotte',
|
||||
'Mexico',
|
||||
'Micronesia, Federated States of',
|
||||
'Moldova, Republic of',
|
||||
'Monaco',
|
||||
'Mongolia',
|
||||
'Montenegro',
|
||||
'Montserrat',
|
||||
'Morocco',
|
||||
'Mozambique',
|
||||
'Myanmar',
|
||||
'Namibia',
|
||||
'Nauru',
|
||||
'Nepal',
|
||||
'Netherlands',
|
||||
'Netherlands Antilles',
|
||||
'New Caledonia',
|
||||
'New Zealand',
|
||||
'Nicaragua',
|
||||
'Niger',
|
||||
'Nigeria',
|
||||
'Niue',
|
||||
'Norfolk Island',
|
||||
'Northern Mariana Islands',
|
||||
'Norway',
|
||||
'Oman',
|
||||
'Pakistan',
|
||||
'Palau',
|
||||
'Palestinian Territory, Occupied',
|
||||
'Panama',
|
||||
'Papua New Guinea',
|
||||
'Paraguay',
|
||||
'Peru',
|
||||
'Philippines',
|
||||
'Pitcairn',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Puerto Rico',
|
||||
'Qatar',
|
||||
'Reunion',
|
||||
'Romania',
|
||||
'Russian Federation',
|
||||
'Rwanda',
|
||||
'Saint Helena',
|
||||
'Saint Kitts and Nevis',
|
||||
'Saint Lucia',
|
||||
'Saint Pierre and Miquelon',
|
||||
'Saint Vincent and The Grenadines',
|
||||
'Samoa',
|
||||
'San Marino',
|
||||
'Sao Tome and Principe',
|
||||
'Saudi Arabia',
|
||||
'Senegal',
|
||||
'Serbia',
|
||||
'Seychelles',
|
||||
'Sierra Leone',
|
||||
'Singapore',
|
||||
'Slovakia',
|
||||
'Slovenia',
|
||||
'Solomon Islands',
|
||||
'Somalia',
|
||||
'South Africa',
|
||||
'South Georgia and The South Sandwich Islands',
|
||||
'Spain',
|
||||
'Sri Lanka',
|
||||
'Sudan',
|
||||
'Suriname',
|
||||
'Svalbard and Jan Mayen',
|
||||
'Swaziland',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Syrian Arab Republic',
|
||||
'Taiwan, Province of China',
|
||||
'Tajikistan',
|
||||
'Tanzania, United Republic of',
|
||||
'Thailand',
|
||||
'Timor-leste',
|
||||
'Togo',
|
||||
'Tokelau',
|
||||
'Tonga',
|
||||
'Trinidad and Tobago',
|
||||
'Tunisia',
|
||||
'Turkey',
|
||||
'Turkmenistan',
|
||||
'Turks and Caicos Islands',
|
||||
'Tuvalu',
|
||||
'Uganda',
|
||||
'Ukraine',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'United States',
|
||||
'United States Minor Outlying Islands',
|
||||
'Uruguay',
|
||||
'Uzbekistan',
|
||||
'Vanuatu',
|
||||
'Venezuela',
|
||||
'Viet Nam',
|
||||
'Virgin Islands, British',
|
||||
'Virgin Islands, U.S.',
|
||||
'Wallis and Futuna',
|
||||
'Western Sahara',
|
||||
'Yemen',
|
||||
'Zambia',
|
||||
'Zimbabwe',
|
||||
]
|
||||
|
||||
export const countriesAndCodes: { value: string; label: string }[] = [
|
||||
{ value: 'AF', label: 'Afghanistan' },
|
||||
{ value: 'AX', label: 'Åland Islands' },
|
||||
{ value: 'AL', label: 'Albania' },
|
||||
{ value: 'DZ', label: 'Algeria' },
|
||||
{ value: 'AS', label: 'American Samoa' },
|
||||
{ value: 'AD', label: 'Andorra' },
|
||||
{ value: 'AO', label: 'Angola' },
|
||||
{ value: 'AI', label: 'Anguilla' },
|
||||
{ value: 'AQ', label: 'Antarctica' },
|
||||
{ value: 'AG', label: 'Antigua and Barbuda' },
|
||||
{ value: 'AR', label: 'Argentina' },
|
||||
{ value: 'AM', label: 'Armenia' },
|
||||
{ value: 'AW', label: 'Aruba' },
|
||||
{ value: 'AU', label: 'Australia' },
|
||||
{ value: 'AT', label: 'Austria' },
|
||||
{ value: 'AZ', label: 'Azerbaijan' },
|
||||
{ value: 'BS', label: 'Bahamas' },
|
||||
{ value: 'BH', label: 'Bahrain' },
|
||||
{ value: 'BD', label: 'Bangladesh' },
|
||||
{ value: 'BB', label: 'Barbados' },
|
||||
{ value: 'BY', label: 'Belarus' },
|
||||
{ value: 'BE', label: 'Belgium' },
|
||||
{ value: 'BZ', label: 'Belize' },
|
||||
{ value: 'BJ', label: 'Benin' },
|
||||
{ value: 'BM', label: 'Bermuda' },
|
||||
{ value: 'BT', label: 'Bhutan' },
|
||||
{ value: 'BO', label: 'Bolivia' },
|
||||
{ value: 'BA', label: 'Bosnia and Herzegovina' },
|
||||
{ value: 'BW', label: 'Botswana' },
|
||||
{ value: 'BV', label: 'Bouvet Island' },
|
||||
{ value: 'BR', label: 'Brazil' },
|
||||
{ value: 'IO', label: 'British Indian Ocean Territory' },
|
||||
{ value: 'BN', label: 'Brunei Darussalam' },
|
||||
{ value: 'BG', label: 'Bulgaria' },
|
||||
{ value: 'BF', label: 'Burkina Faso' },
|
||||
{ value: 'BI', label: 'Burundi' },
|
||||
{ value: 'KH', label: 'Cambodia' },
|
||||
{ value: 'CM', label: 'Cameroon' },
|
||||
{ value: 'CA', label: 'Canada' },
|
||||
{ value: 'CV', label: 'Cape Verde' },
|
||||
{ value: 'KY', label: 'Cayman Islands' },
|
||||
{ value: 'CF', label: 'Central African Republic' },
|
||||
{ value: 'TD', label: 'Chad' },
|
||||
{ value: 'CL', label: 'Chile' },
|
||||
{ value: 'CN', label: 'China' },
|
||||
{ value: 'CX', label: 'Christmas Island' },
|
||||
{ value: 'CC', label: 'Cocos (Keeling) Islands' },
|
||||
{ value: 'CO', label: 'Colombia' },
|
||||
{ value: 'KM', label: 'Comoros' },
|
||||
{ value: 'CG', label: 'Congo' },
|
||||
{ value: 'CD', label: 'Congo, The Democratic Republic of The' },
|
||||
{ value: 'CK', label: 'Cook Islands' },
|
||||
{ value: 'CR', label: 'Costa Rica' },
|
||||
{ value: 'CI', label: "Cote D'ivoire" },
|
||||
{ value: 'HR', label: 'Croatia' },
|
||||
{ value: 'CU', label: 'Cuba' },
|
||||
{ value: 'CY', label: 'Cyprus' },
|
||||
{ value: 'CZ', label: 'Czech Republic' },
|
||||
{ value: 'DK', label: 'Denmark' },
|
||||
{ value: 'DJ', label: 'Djibouti' },
|
||||
{ value: 'DM', label: 'Dominica' },
|
||||
{ value: 'DO', label: 'Dominican Republic' },
|
||||
{ value: 'EC', label: 'Ecuador' },
|
||||
{ value: 'EG', label: 'Egypt' },
|
||||
{ value: 'SV', label: 'El Salvador' },
|
||||
{ value: 'GQ', label: 'Equatorial Guinea' },
|
||||
{ value: 'ER', label: 'Eritrea' },
|
||||
{ value: 'EE', label: 'Estonia' },
|
||||
{ value: 'ET', label: 'Ethiopia' },
|
||||
{ value: 'FK', label: 'Falkland Islands (Malvinas)' },
|
||||
{ value: 'FO', label: 'Faroe Islands' },
|
||||
{ value: 'FJ', label: 'Fiji' },
|
||||
{ value: 'FI', label: 'Finland' },
|
||||
{ value: 'FR', label: 'France' },
|
||||
{ value: 'GF', label: 'French Guiana' },
|
||||
{ value: 'PF', label: 'French Polynesia' },
|
||||
{ value: 'TF', label: 'French Southern Territories' },
|
||||
{ value: 'GA', label: 'Gabon' },
|
||||
{ value: 'GM', label: 'Gambia' },
|
||||
{ value: 'GE', label: 'Georgia' },
|
||||
{ value: 'DE', label: 'Germany' },
|
||||
{ value: 'GH', label: 'Ghana' },
|
||||
{ value: 'GI', label: 'Gibraltar' },
|
||||
{ value: 'GR', label: 'Greece' },
|
||||
{ value: 'GL', label: 'Greenland' },
|
||||
{ value: 'GD', label: 'Grenada' },
|
||||
{ value: 'GP', label: 'Guadeloupe' },
|
||||
{ value: 'GU', label: 'Guam' },
|
||||
{ value: 'GT', label: 'Guatemala' },
|
||||
{ value: 'GG', label: 'Guernsey' },
|
||||
{ value: 'GN', label: 'Guinea' },
|
||||
{ value: 'GW', label: 'Guinea-bissau' },
|
||||
{ value: 'GY', label: 'Guyana' },
|
||||
{ value: 'HT', label: 'Haiti' },
|
||||
{ value: 'HM', label: 'Heard Island and Mcdonald Islands' },
|
||||
{ value: 'VA', label: 'Holy See (Vatican City State)' },
|
||||
{ value: 'HN', label: 'Honduras' },
|
||||
{ value: 'HK', label: 'Hong Kong' },
|
||||
{ value: 'HU', label: 'Hungary' },
|
||||
{ value: 'IS', label: 'Iceland' },
|
||||
{ value: 'IN', label: 'India' },
|
||||
{ value: 'ID', label: 'Indonesia' },
|
||||
{ value: 'IR', label: 'Iran, Islamic Republic of' },
|
||||
{ value: 'IQ', label: 'Iraq' },
|
||||
{ value: 'IE', label: 'Ireland' },
|
||||
{ value: 'IM', label: 'Isle of Man' },
|
||||
{ value: 'IL', label: 'Israel' },
|
||||
{ value: 'IT', label: 'Italy' },
|
||||
{ value: 'JM', label: 'Jamaica' },
|
||||
{ value: 'JP', label: 'Japan' },
|
||||
{ value: 'JE', label: 'Jersey' },
|
||||
{ value: 'JO', label: 'Jordan' },
|
||||
{ value: 'KZ', label: 'Kazakhstan' },
|
||||
{ value: 'KE', label: 'Kenya' },
|
||||
{ value: 'KI', label: 'Kiribati' },
|
||||
{ value: 'KP', label: "Korea, Democratic People's Republic of" },
|
||||
{ value: 'KR', label: 'Korea, Republic of' },
|
||||
{ value: 'KW', label: 'Kuwait' },
|
||||
{ value: 'KG', label: 'Kyrgyzstan' },
|
||||
{ value: 'LA', label: "Lao People's Democratic Republic" },
|
||||
{ value: 'LV', label: 'Latvia' },
|
||||
{ value: 'LB', label: 'Lebanon' },
|
||||
{ value: 'LS', label: 'Lesotho' },
|
||||
{ value: 'LR', label: 'Liberia' },
|
||||
{ value: 'LY', label: 'Libyan Arab Jamahiriya' },
|
||||
{ value: 'LI', label: 'Liechtenstein' },
|
||||
{ value: 'LT', label: 'Lithuania' },
|
||||
{ value: 'LU', label: 'Luxembourg' },
|
||||
{ value: 'MO', label: 'Macao' },
|
||||
{ value: 'MK', label: 'Macedonia, The Former Yugoslav Republic of' },
|
||||
{ value: 'MG', label: 'Madagascar' },
|
||||
{ value: 'MW', label: 'Malawi' },
|
||||
{ value: 'MY', label: 'Malaysia' },
|
||||
{ value: 'MV', label: 'Maldives' },
|
||||
{ value: 'ML', label: 'Mali' },
|
||||
{ value: 'MT', label: 'Malta' },
|
||||
{ value: 'MH', label: 'Marshall Islands' },
|
||||
{ value: 'MQ', label: 'Martinique' },
|
||||
{ value: 'MR', label: 'Mauritania' },
|
||||
{ value: 'MU', label: 'Mauritius' },
|
||||
{ value: 'YT', label: 'Mayotte' },
|
||||
{ value: 'MX', label: 'Mexico' },
|
||||
{ value: 'FM', label: 'Micronesia, Federated States of' },
|
||||
{ value: 'MD', label: 'Moldova, Republic of' },
|
||||
{ value: 'MC', label: 'Monaco' },
|
||||
{ value: 'MN', label: 'Mongolia' },
|
||||
{ value: 'ME', label: 'Montenegro' },
|
||||
{ value: 'MS', label: 'Montserrat' },
|
||||
{ value: 'MA', label: 'Morocco' },
|
||||
{ value: 'MZ', label: 'Mozambique' },
|
||||
{ value: 'MM', label: 'Myanmar' },
|
||||
{ value: 'NA', label: 'Namibia' },
|
||||
{ value: 'NR', label: 'Nauru' },
|
||||
{ value: 'NP', label: 'Nepal' },
|
||||
{ value: 'NL', label: 'Netherlands' },
|
||||
{ value: 'AN', label: 'Netherlands Antilles' },
|
||||
{ value: 'NC', label: 'New Caledonia' },
|
||||
{ value: 'NZ', label: 'New Zealand' },
|
||||
{ value: 'NI', label: 'Nicaragua' },
|
||||
{ value: 'NE', label: 'Niger' },
|
||||
{ value: 'NG', label: 'Nigeria' },
|
||||
{ value: 'NU', label: 'Niue' },
|
||||
{ value: 'NF', label: 'Norfolk Island' },
|
||||
{ value: 'MP', label: 'Northern Mariana Islands' },
|
||||
{ value: 'NO', label: 'Norway' },
|
||||
{ value: 'OM', label: 'Oman' },
|
||||
{ value: 'PK', label: 'Pakistan' },
|
||||
{ value: 'PW', label: 'Palau' },
|
||||
{ value: 'PS', label: 'Palestinian Territory, Occupied' },
|
||||
{ value: 'PA', label: 'Panama' },
|
||||
{ value: 'PG', label: 'Papua New Guinea' },
|
||||
{ value: 'PY', label: 'Paraguay' },
|
||||
{ value: 'PE', label: 'Peru' },
|
||||
{ value: 'PH', label: 'Philippines' },
|
||||
{ value: 'PN', label: 'Pitcairn' },
|
||||
{ value: 'PL', label: 'Poland' },
|
||||
{ value: 'PT', label: 'Portugal' },
|
||||
{ value: 'PR', label: 'Puerto Rico' },
|
||||
{ value: 'QA', label: 'Qatar' },
|
||||
{ value: 'RE', label: 'Reunion' },
|
||||
{ value: 'RO', label: 'Romania' },
|
||||
{ value: 'RU', label: 'Russian Federation' },
|
||||
{ value: 'RW', label: 'Rwanda' },
|
||||
{ value: 'SH', label: 'Saint Helena' },
|
||||
{ value: 'KN', label: 'Saint Kitts and Nevis' },
|
||||
{ value: 'LC', label: 'Saint Lucia' },
|
||||
{ value: 'PM', label: 'Saint Pierre and Miquelon' },
|
||||
{ value: 'VC', label: 'Saint Vincent and The Grenadines' },
|
||||
{ value: 'WS', label: 'Samoa' },
|
||||
{ value: 'SM', label: 'San Marino' },
|
||||
{ value: 'ST', label: 'Sao Tome and Principe' },
|
||||
{ value: 'SA', label: 'Saudi Arabia' },
|
||||
{ value: 'SN', label: 'Senegal' },
|
||||
{ value: 'RS', label: 'Serbia' },
|
||||
{ value: 'SC', label: 'Seychelles' },
|
||||
{ value: 'SL', label: 'Sierra Leone' },
|
||||
{ value: 'SG', label: 'Singapore' },
|
||||
{ value: 'SK', label: 'Slovakia' },
|
||||
{ value: 'SI', label: 'Slovenia' },
|
||||
{ value: 'SB', label: 'Solomon Islands' },
|
||||
{ value: 'SO', label: 'Somalia' },
|
||||
{ value: 'ZA', label: 'South Africa' },
|
||||
{ value: 'GS', label: 'South Georgia and The South Sandwich Islands' },
|
||||
{ value: 'ES', label: 'Spain' },
|
||||
{ value: 'LK', label: 'Sri Lanka' },
|
||||
{ value: 'SD', label: 'Sudan' },
|
||||
{ value: 'SR', label: 'Suriname' },
|
||||
{ value: 'SJ', label: 'Svalbard and Jan Mayen' },
|
||||
{ value: 'SZ', label: 'Swaziland' },
|
||||
{ value: 'SE', label: 'Sweden' },
|
||||
{ value: 'CH', label: 'Switzerland' },
|
||||
{ value: 'SY', label: 'Syrian Arab Republic' },
|
||||
{ value: 'TW', label: 'Taiwan, Province of China' },
|
||||
{ value: 'TJ', label: 'Tajikistan' },
|
||||
{ value: 'TZ', label: 'Tanzania, United Republic of' },
|
||||
{ value: 'TH', label: 'Thailand' },
|
||||
{ value: 'TL', label: 'Timor-leste' },
|
||||
{ value: 'TG', label: 'Togo' },
|
||||
{ value: 'TK', label: 'Tokelau' },
|
||||
{ value: 'TO', label: 'Tonga' },
|
||||
{ value: 'TT', label: 'Trinidad and Tobago' },
|
||||
{ value: 'TN', label: 'Tunisia' },
|
||||
{ value: 'TR', label: 'Turkey' },
|
||||
{ value: 'TM', label: 'Turkmenistan' },
|
||||
{ value: 'TC', label: 'Turks and Caicos Islands' },
|
||||
{ value: 'TV', label: 'Tuvalu' },
|
||||
{ value: 'UG', label: 'Uganda' },
|
||||
{ value: 'UA', label: 'Ukraine' },
|
||||
{ value: 'AE', label: 'United Arab Emirates' },
|
||||
{ value: 'GB', label: 'United Kingdom' },
|
||||
{ value: 'US', label: 'United States' },
|
||||
{ value: 'UM', label: 'United States Minor Outlying Islands' },
|
||||
{ value: 'UY', label: 'Uruguay' },
|
||||
{ value: 'UZ', label: 'Uzbekistan' },
|
||||
{ value: 'VU', label: 'Vanuatu' },
|
||||
{ value: 'VE', label: 'Venezuela' },
|
||||
{ value: 'VN', label: 'Viet Nam' },
|
||||
{ value: 'VG', label: 'Virgin Islands, British' },
|
||||
{ value: 'VI', label: 'Virgin Islands, U.S.' },
|
||||
{ value: 'WF', label: 'Wallis and Futuna' },
|
||||
{ value: 'EH', label: 'Western Sahara' },
|
||||
{ value: 'YE', label: 'Yemen' },
|
||||
{ value: 'ZM', label: 'Zambia' },
|
||||
{ value: 'ZW', label: 'Zimbabwe' },
|
||||
]
|
||||
|
||||
export const books: {
|
||||
title: string
|
||||
author: { firstName: string; lastName: string }
|
||||
}[] = [
|
||||
{
|
||||
title: "Old Man's War",
|
||||
author: {
|
||||
firstName: 'John',
|
||||
lastName: 'Scalzi',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Lock Artist',
|
||||
author: {
|
||||
firstName: 'Steve',
|
||||
lastName: 'Hamilton',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'HTML5',
|
||||
author: {
|
||||
firstName: 'Remy',
|
||||
lastName: 'Sharp',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Right Ho Jeeves',
|
||||
author: {
|
||||
firstName: 'P.D',
|
||||
lastName: 'Woodhouse',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Code of the Wooster',
|
||||
author: {
|
||||
firstName: 'P.D',
|
||||
lastName: 'Woodhouse',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Thank You Jeeves',
|
||||
author: {
|
||||
firstName: 'P.D',
|
||||
lastName: 'Woodhouse',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The DaVinci Code',
|
||||
author: {
|
||||
firstName: 'Dan',
|
||||
lastName: 'Brown',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Angels & Demons',
|
||||
author: {
|
||||
firstName: 'Dan',
|
||||
lastName: 'Brown',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Silmarillion',
|
||||
author: {
|
||||
firstName: 'J.R.R',
|
||||
lastName: 'Tolkien',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Syrup',
|
||||
author: {
|
||||
firstName: 'Max',
|
||||
lastName: 'Barry',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Lost Symbol',
|
||||
author: {
|
||||
firstName: 'Dan',
|
||||
lastName: 'Brown',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Book of Lies',
|
||||
author: {
|
||||
firstName: 'Brad',
|
||||
lastName: 'Meltzer',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Lamb',
|
||||
author: {
|
||||
firstName: 'Christopher',
|
||||
lastName: 'Moore',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Fool',
|
||||
author: {
|
||||
firstName: 'Christopher',
|
||||
lastName: 'Moore',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Incompetence',
|
||||
author: {
|
||||
firstName: 'Rob',
|
||||
lastName: 'Grant',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Fat',
|
||||
author: {
|
||||
firstName: 'Rob',
|
||||
lastName: 'Grant',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Colony',
|
||||
author: {
|
||||
firstName: 'Rob',
|
||||
lastName: 'Grant',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Backwards, Red Dwarf',
|
||||
author: {
|
||||
firstName: 'Rob',
|
||||
lastName: 'Grant',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Grand Design',
|
||||
author: {
|
||||
firstName: 'Stephen',
|
||||
lastName: 'Hawking',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Book of Samson',
|
||||
author: {
|
||||
firstName: 'David',
|
||||
lastName: 'Maine',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'The Preservationist',
|
||||
author: {
|
||||
firstName: 'David',
|
||||
lastName: 'Maine',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Fallen',
|
||||
author: {
|
||||
firstName: 'David',
|
||||
lastName: 'Maine',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Monster 1959',
|
||||
author: {
|
||||
firstName: 'David',
|
||||
lastName: 'Maine',
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,257 @@
|
||||
@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 {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
|
||||
/* Search Input */
|
||||
--vs-search-input-color: inherit;
|
||||
--vs-search-input-placeholder-color: inherit;
|
||||
|
||||
/* Font */
|
||||
--vs-font-size: 1rem;
|
||||
--vs-line-height: 1.4;
|
||||
|
||||
/* 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;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
--vs-colors--darkest: rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Search Input */
|
||||
--vs-search-input-color: inherit;
|
||||
--vs-search-input-placeholder-color: inherit;
|
||||
|
||||
/* Font */
|
||||
--vs-font-size: 1rem;
|
||||
--vs-line-height: 1.4;
|
||||
|
||||
/* 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;
|
||||
|
||||
/* 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 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 407 B |
@@ -0,0 +1,7 @@
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 700 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="345" height="385" viewBox="0 0 345 385" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M301.641 385C294.31 385 286.809 383.124 279.989 379.146L21.6512 230.011C0.965987 218.076 -6.19428 191.534 5.79633 170.789C17.7301 150.101 44.2686 142.997 65.0106 154.932L323.349 304.067C344.034 316.002 351.194 342.544 339.203 363.289C331.191 377.157 316.643 384.943 301.641 384.943V385Z"/>
|
||||
<path d="M301.64 235.865C294.31 235.865 286.808 233.99 279.989 230.011L21.6511 80.8761C0.96588 68.884 -6.13756 42.3989 5.79622 21.6541C17.7868 0.909359 44.2685 -6.13817 65.0105 5.79717L323.349 154.932C344.034 166.867 351.194 193.409 339.203 214.154C331.191 228.022 316.643 235.808 301.64 235.808V235.865Z"/>
|
||||
<path d="M54.7249 298.327H43.3026C19.3782 298.327 0 317.708 0 341.635C0 365.563 19.3782 384.943 43.3026 384.943H185.144C190.543 384.943 192.418 377.839 187.758 375.111L54.6681 298.27L54.7249 298.327Z"/>
|
||||
<path d="M290.275 86.6734H301.697C325.622 86.6734 345 67.2926 345 43.3651C345 19.4376 325.622 0.0568848 301.697 0.0568848H159.856C154.457 0.0568848 152.582 7.16125 157.242 9.88933L290.332 86.7302L290.275 86.6734Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 446 B |
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { NuxtLink } from '#components'
|
||||
import ColorThemeSwitcher from '~/components/ThemeSwitcher.vue'
|
||||
import { useWindowScroll } from '@vueuse/core'
|
||||
import SpringloadedLogo from '~/assets/svg/springloaded-logo.svg'
|
||||
|
||||
const { y } = useWindowScroll()
|
||||
|
||||
const isScrolled = computed(() => y.value !== 0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
: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-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
|
||||
: 'dark:bg-transparent',
|
||||
]"
|
||||
>
|
||||
<div class="mr-6 flex lg:hidden">
|
||||
<button type="button" class="relative" aria-label="Open navigation">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
class="h-6 w-6 stroke-slate-500"
|
||||
>
|
||||
<path d="M4 7h16M4 12h16M4 17h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
display: none;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div class="relative flex grow basis-0 items-center">
|
||||
<NuxtLink
|
||||
aria-label="Home page"
|
||||
href="/"
|
||||
class="flex items-center space-x-2"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
class="h-9 w-9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 87 68"
|
||||
>
|
||||
<path
|
||||
class="fill-[#0EE2FF] dark:fill-sky-900"
|
||||
fill-rule="evenodd"
|
||||
d="M62.1429 6.1818H24.8571c-10.2961 0-18.6428 8.3031-18.6428 18.5455v18.5454c0 10.2424 8.3467 18.5455 18.6428 18.5455h37.2858c10.2961 0 18.6428-8.3031 18.6428-18.5455V24.7273c0-10.2424-8.3467-18.5455-18.6428-18.5455ZM24.8571 0C11.1289 0 0 11.0708 0 24.7273v18.5454C0 56.9292 11.1289 68 24.8571 68h37.2858C75.8711 68 87 56.9292 87 43.2727V24.7273C87 11.0708 75.8711 0 62.1429 0H24.8571Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="fill-[#111112] dark:fill-[#0EE2FF]"
|
||||
fill-rule="evenodd"
|
||||
d="M60.1875 9.125h-33.375c-9.2163 0-16.6875 7.4712-16.6875 16.6875V42.5c0 9.2162 7.4712 16.6875 16.6875 16.6875h33.375c9.2162 0 16.6875-7.4713 16.6875-16.6875V25.8125c0-9.2163-7.4713-16.6875-16.6875-16.6875Zm-33.375-5.5625c-12.2883 0-22.25 9.9617-22.25 22.25V42.5c0 12.2883 9.9617 22.25 22.25 22.25h33.375c12.2883 0 22.25-9.9617 22.25-22.25V25.8125c0-12.2883-9.9617-22.25-22.25-22.25h-33.375Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="fill-[#000] dark:fill-sky-50"
|
||||
fill-rule="evenodd"
|
||||
d="M55.0064 22.7105a2.2807 2.2807 0 0 1 .6676 1.6127v9.6758a2.2808 2.2808 0 0 1-2.2803 2.241 2.2802 2.2802 0 0 1-2.2802-2.241v-7.3956h-7.3956a2.2804 2.2804 0 0 1-1.587-3.8788 2.2808 2.2808 0 0 1 1.587-.6817h9.6758a2.2805 2.2805 0 0 1 1.6127.6676ZM34.042 31.7188a2.2807 2.2807 0 0 1 2.2803 2.2802v7.3956h7.3956a2.2804 2.2804 0 0 1 2.241 2.2803 2.2806 2.2806 0 0 1-2.241 2.2803H34.042a2.2808 2.2808 0 0 1-2.2803-2.2803V33.999a2.2807 2.2807 0 0 1 2.2803-2.2802Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span
|
||||
class="font-bold font-display tracking-tight text-sky-900 dark:text-sky-50"
|
||||
>Vue Select</span
|
||||
>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
|
||||
<button
|
||||
type="button"
|
||||
class="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
class="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400"
|
||||
>
|
||||
<path
|
||||
d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span
|
||||
class="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400"
|
||||
>
|
||||
Search docs</span
|
||||
>
|
||||
<kbd
|
||||
class="ml-auto hidden font-medium text-slate-400 dark:text-slate-500 md:block"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd>
|
||||
<kbd class="font-sans">K</kbd>
|
||||
</kbd>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
|
||||
<ColorThemeSwitcher />
|
||||
<a
|
||||
class="group"
|
||||
aria-label="GitHub"
|
||||
target="_blank"
|
||||
href="https://github.com/sagalbot/vue-select"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 16 16"
|
||||
class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
|
||||
>
|
||||
<path
|
||||
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="group"
|
||||
aria-label="Springloaded"
|
||||
target="_blank"
|
||||
href="https://springloaded.co"
|
||||
>
|
||||
<SpringloadedLogo
|
||||
class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, useAttrs } from '#imports'
|
||||
import { NuxtLink } from '#components'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'primary' | 'secondary'
|
||||
}>(),
|
||||
{
|
||||
variant: 'primary',
|
||||
}
|
||||
)
|
||||
|
||||
const styles = computed(
|
||||
() =>
|
||||
({
|
||||
primary:
|
||||
'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-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
|
||||
}[props.variant])
|
||||
)
|
||||
|
||||
const hasTo = computed<boolean>(() => Object.keys(useAttrs()).includes('to'))
|
||||
|
||||
const component = computed(() => (hasTo.value ? NuxtLink : 'button'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Component :is="component" :class="styles"><slot></slot></Component>
|
||||
</template>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '~/components/Button.vue'
|
||||
import TimelineSvg from '~/components/TimelineSvg.vue'
|
||||
import VueSelect from '~/components/VueSelect.vue'
|
||||
import {
|
||||
SparklesIcon,
|
||||
ArrowDownTrayIcon,
|
||||
RocketLaunchIcon,
|
||||
} from '@heroicons/vue/20/solid'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="overflow-hidden bg-slate-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]"
|
||||
>
|
||||
<div class="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
|
||||
<div
|
||||
class="lg:max-w-8xl mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"
|
||||
>
|
||||
<div class="relative z-10 md:text-center lg:text-left">
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
src="~/assets/img/blur-cyan.png"
|
||||
decoding="async"
|
||||
class="absolute bottom-full right-full -mr-72 -mb-56 opacity-50"
|
||||
width="530"
|
||||
height="530"
|
||||
/>
|
||||
<div class="relative">
|
||||
<p
|
||||
class="font-display inline bg-linear-to-r from-indigo-200 via-sky-400 font-bold to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
|
||||
>
|
||||
The complete Vue.js combobox solution.
|
||||
</p>
|
||||
<p class="mt-3 text-2xl tracking-tight text-slate-400">
|
||||
Everything you wish <code><select></code> could do, wrapped
|
||||
up in lightweight, composable Vue component.
|
||||
</p>
|
||||
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
|
||||
<Button variant="primary"> Get started </Button>
|
||||
<Button
|
||||
to="https://github.com/sagalbot/vue-select"
|
||||
variant="secondary"
|
||||
target="_blank"
|
||||
>
|
||||
View on Github
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative lg:static xl:pl-10">
|
||||
<div
|
||||
class="absolute inset-x-[-50vw] -top-32 -bottom-48 [mask-image:linear-gradient(transparent,white,white)] dark:[mask-image:linear-gradient(transparent,white,transparent)] lg:left-[calc(50%+14rem)] lg:right-0 lg:-top-32 lg:-bottom-32 lg:[mask-image:none] lg:dark:[mask-image:linear-gradient(white,white,transparent)]"
|
||||
>
|
||||
<TimelineSvg
|
||||
class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:left-0 lg:translate-x-0 lg:translate-y-[-60%]"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<img
|
||||
alt=""
|
||||
src="~/assets/img/blur-cyan.png"
|
||||
decoding="async"
|
||||
class="absolute -top-64 -right-64"
|
||||
width="530"
|
||||
height="530"
|
||||
/><img
|
||||
alt=""
|
||||
src="~/assets/img/blur-indigo.png"
|
||||
decoding="async"
|
||||
class="absolute -bottom-40 -right-44"
|
||||
width="567"
|
||||
height="567"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-linear-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10 blur-lg"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-linear-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10"
|
||||
></div>
|
||||
<div
|
||||
class="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="absolute -top-px left-20 right-11 h-px bg-linear-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-px left-11 right-20 h-px bg-linear-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
|
||||
></div>
|
||||
<div class="p-4 dark">
|
||||
<div class="flex items-center space-x-4">
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
|
||||
>
|
||||
<ArrowDownTrayIcon class="w-3 h-3 mr-1" />
|
||||
960k installs/month
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
|
||||
>
|
||||
<SparklesIcon class="w-3 h-3 mr-1" />
|
||||
4.5k stars
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
|
||||
>
|
||||
<RocketLaunchIcon class="w-3 h-3 mr-1" />
|
||||
Vue 3
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<VueSelect class="w-full mt-4" :options="['hello']" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.v-select {
|
||||
--vs-border-color: rgba(125, 211, 252, 0.3);
|
||||
--vs-actions-padding: 0.25rem 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import Prose from '~/components/Prose.vue'
|
||||
import type { PageCollections } from '@nuxt/content'
|
||||
|
||||
type PageCollectionItem = PageCollections[keyof PageCollections]
|
||||
|
||||
defineProps<{
|
||||
page: PageCollectionItem
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article>
|
||||
<PageContentHeader :page />
|
||||
<Prose>
|
||||
<ContentRenderer :value="page" :path="$route.path" />
|
||||
</Prose>
|
||||
</article>
|
||||
<PageContentFooterNavigation :page />
|
||||
<PageTableOfContents :toc="page.body.toc" />
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<dl class="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
|
||||
<div class="ml-auto text-right">
|
||||
<dt
|
||||
class="font-display text-sm font-medium text-slate-900 dark:text-white"
|
||||
>
|
||||
Next
|
||||
</dt>
|
||||
<dd class="mt-1">
|
||||
<a
|
||||
class="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
|
||||
href="/docs/installation"
|
||||
>
|
||||
Installation
|
||||
<span aria-hidden="true">→</span></a
|
||||
>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import type { PageCollections } from '@nuxt/content'
|
||||
|
||||
type PageCollectionItem = PageCollections[keyof PageCollections]
|
||||
|
||||
defineProps<{
|
||||
page: PageCollectionItem
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="mb-9 space-y-1">
|
||||
<p v-if="page?.section" class="font-display text-sm font-bold text-sky-500">
|
||||
{{ page?.section }}
|
||||
</p>
|
||||
<h1
|
||||
class="font-display font-bold text-3xl tracking-tight text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ page?.title }}
|
||||
</h1>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import type { MarkdownRoot } from '@nuxt/content'
|
||||
|
||||
defineProps<{
|
||||
toc?: MarkdownRoot['toc']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="toc"
|
||||
class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6"
|
||||
>
|
||||
<nav aria-labelledby="on-this-page-title" class="w-56">
|
||||
<h2
|
||||
id="on-this-page-title"
|
||||
class="font-display text-sm font-medium text-slate-900 dark:text-white"
|
||||
>
|
||||
On this page
|
||||
</h2>
|
||||
<ol role="list" class="mt-4 space-y-3 text-sm">
|
||||
<li v-for="link in toc?.links" :key="link.id">
|
||||
<h3>
|
||||
<a class="text-slate-900 dark:text-white" :href="`#${link.id}`">
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</h3>
|
||||
<ol
|
||||
v-if="link.children"
|
||||
role="list"
|
||||
class="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400"
|
||||
>
|
||||
<li v-for="childLink in link.children" :key="childLink.id">
|
||||
<a
|
||||
class="hover:text-slate-600 dark:hover:text-slate-300"
|
||||
:href="`#${childLink.id}`"
|
||||
>
|
||||
{{ childLink.text }}
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
|
||||
// headings
|
||||
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
|
||||
// lead
|
||||
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
|
||||
// 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,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
|
||||
'dark:prose-hr:border-slate-800',
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script lang="ts" setup>
|
||||
const navigation = [
|
||||
{
|
||||
title: 'Community',
|
||||
links: [
|
||||
{ title: 'Sponsors 🎉', href: '/sponsors' },
|
||||
{ title: 'Contributors', href: '/contributors' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Getting Started',
|
||||
links: [
|
||||
{ href: '/guide/install', title: 'Installation' },
|
||||
{ href: '/guide/options', title: 'Dropdown Options' },
|
||||
{ href: '/guide/values', title: 'Selecting Values' },
|
||||
{ href: '/guide/upgrading', title: 'Upgrade Guide' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Templating & Styling',
|
||||
links: [
|
||||
{ href: '/guide/components', title: 'Child Components' },
|
||||
{ href: '/guide/css', title: 'CSS & Selectors' },
|
||||
{ href: '/guide/slots', title: 'Slots' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Accessibility',
|
||||
links: [
|
||||
{ href: '/guide/accessibility', title: 'WAI-ARIA Spec' },
|
||||
{ href: '/guide/localization', title: 'Localization' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Use Cases',
|
||||
links: [
|
||||
{ href: '/guide/validation', title: 'Validation' },
|
||||
{ href: '/guide/selectable', title: 'Limiting Selections' },
|
||||
{ href: '/guide/pagination', title: 'Pagination' },
|
||||
{ href: '/guide/infinite-scroll', title: 'Infinite Scroll' },
|
||||
{ href: '/guide/vuex', title: 'Vuex' },
|
||||
{ href: '/guide/ajax', title: 'AJAX' },
|
||||
{ href: '/guide/loops', title: 'Using in Loops' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Customizing',
|
||||
links: [
|
||||
{ href: '/guide/keydown', title: 'Keydown Events' },
|
||||
{ href: '/guide/positioning', title: 'Dropdown Position' },
|
||||
{ href: '/guide/opening', title: 'Dropdown Opening' },
|
||||
{ href: '/guide/filtering', title: 'Option Filtering' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API',
|
||||
links: [
|
||||
{ href: '/api/props', title: 'Props' },
|
||||
{ href: '/api/slots', title: 'Slots' },
|
||||
{ href: '/api/events', title: 'Events' },
|
||||
],
|
||||
},
|
||||
]
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="hidden lg:relative lg:block lg:flex-none">
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden"
|
||||
></div>
|
||||
<div
|
||||
class="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-16 pl-0.5"
|
||||
>
|
||||
<div
|
||||
class="absolute top-16 bottom-0 right-0 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block"
|
||||
></div>
|
||||
<div
|
||||
class="absolute top-28 bottom-0 right-0 hidden w-px bg-slate-800 dark:block"
|
||||
></div>
|
||||
<nav class="w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
|
||||
<ul role="list" class="space-y-9">
|
||||
<li v-for="section in navigation" :key="section.title">
|
||||
<h2 class="font-display font-medium text-slate-900 dark:text-white">
|
||||
{{ section.title }}
|
||||
</h2>
|
||||
<ul
|
||||
role="list"
|
||||
class="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200"
|
||||
>
|
||||
<li
|
||||
v-for="link in section?.links"
|
||||
:key="link.href"
|
||||
class="relative"
|
||||
>
|
||||
<NuxtLink
|
||||
:href="link.href"
|
||||
:class="[
|
||||
'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
|
||||
link.href === route.path
|
||||
? 'font-semibold text-sky-500 before:bg-sky-500'
|
||||
: 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
|
||||
]"
|
||||
>
|
||||
{{ link.title }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from '@headlessui/vue'
|
||||
|
||||
import LightIcon from '~/assets/svg/light-icon.svg'
|
||||
import DarkIcon from '~/assets/svg/dark-icon.svg'
|
||||
import SystemIcon from '~/assets/svg/system-icon.svg'
|
||||
|
||||
const themes = [
|
||||
{ name: 'Light', value: 'light', icon: LightIcon },
|
||||
{ name: 'Dark', value: 'dark', icon: DarkIcon },
|
||||
{ name: 'System', value: 'system', icon: SystemIcon },
|
||||
]
|
||||
|
||||
const colorMode = useColorMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative z-10">
|
||||
<Listbox as="div" v-model="colorMode.preference">
|
||||
<ListboxLabel class="sr-only">Theme</ListboxLabel>
|
||||
<ListboxButton
|
||||
class="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
|
||||
>
|
||||
<LightIcon
|
||||
v-show="colorMode.value === 'light'"
|
||||
class="h-4 w-4 fill-sky-400"
|
||||
/>
|
||||
<DarkIcon
|
||||
v-show="colorMode.value === 'dark'"
|
||||
class="h-4 w-4 fill-sky-400"
|
||||
/>
|
||||
</ListboxButton>
|
||||
<ListboxOptions
|
||||
class="absolute top-full left-1/2 mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-slot="{ active, selected }"
|
||||
v-for="{ name, value, icon } in themes"
|
||||
:key="value"
|
||||
:value="value"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
|
||||
{
|
||||
'text-sky-500': selected,
|
||||
'text-slate-900 dark:text-white': active && !selected,
|
||||
'text-slate-700 dark:text-slate-400': !active && !selected,
|
||||
'bg-slate-100 dark:bg-slate-900/40': active,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div
|
||||
class="rounded-md bg-white p-1 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
|
||||
>
|
||||
<Component
|
||||
:is="icon"
|
||||
:class="[
|
||||
'h-4 w-4',
|
||||
selected
|
||||
? 'fill-sky-400 dark:fill-sky-400'
|
||||
: 'fill-slate-400',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">{{ name }}</div>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</Listbox>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 668 1069"
|
||||
width="668"
|
||||
height="1069"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id=":R1l6:-clip-path">
|
||||
<path
|
||||
fill="#fff"
|
||||
transform="rotate(-180 334 534.4)"
|
||||
d="M0 0h668v1068.8H0z"
|
||||
></path>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g opacity=".4" clip-path="url(#:R1l6:-clip-path)" stroke-width="4">
|
||||
<path
|
||||
opacity=".3"
|
||||
d="M584.5 770.4v-474M484.5 770.4v-474M384.5 770.4v-474M283.5 769.4v-474M183.5 768.4v-474M83.5 767.4v-474"
|
||||
stroke="#334155"
|
||||
></path>
|
||||
<path
|
||||
d="M83.5 221.275v6.587a50.1 50.1 0 0 0 22.309 41.686l55.581 37.054a50.102 50.102 0 0 1 22.309 41.686v6.587M83.5 716.012v6.588a50.099 50.099 0 0 0 22.309 41.685l55.581 37.054a50.102 50.102 0 0 1 22.309 41.686v6.587M183.7 584.5v6.587a50.1 50.1 0 0 0 22.31 41.686l55.581 37.054a50.097 50.097 0 0 1 22.309 41.685v6.588M384.101 277.637v6.588a50.1 50.1 0 0 0 22.309 41.685l55.581 37.054a50.1 50.1 0 0 1 22.31 41.686v6.587M384.1 770.288v6.587a50.1 50.1 0 0 1-22.309 41.686l-55.581 37.054A50.099 50.099 0 0 0 283.9 897.3v6.588"
|
||||
stroke="#334155"
|
||||
></path>
|
||||
<path
|
||||
d="M384.1 770.288v6.587a50.1 50.1 0 0 1-22.309 41.686l-55.581 37.054A50.099 50.099 0 0 0 283.9 897.3v6.588M484.3 594.937v6.587a50.1 50.1 0 0 1-22.31 41.686l-55.581 37.054A50.1 50.1 0 0 0 384.1 721.95v6.587M484.3 872.575v6.587a50.1 50.1 0 0 1-22.31 41.686l-55.581 37.054a50.098 50.098 0 0 0-22.309 41.686v6.582M584.501 663.824v39.988a50.099 50.099 0 0 1-22.31 41.685l-55.581 37.054a50.102 50.102 0 0 0-22.309 41.686v6.587M283.899 945.637v6.588a50.1 50.1 0 0 1-22.309 41.685l-55.581 37.05a50.12 50.12 0 0 0-22.31 41.69v6.59M384.1 277.637c0 19.946 12.763 37.655 31.686 43.962l137.028 45.676c18.923 6.308 31.686 24.016 31.686 43.962M183.7 463.425v30.69c0 21.564 13.799 40.709 34.257 47.529l134.457 44.819c18.922 6.307 31.686 24.016 31.686 43.962M83.5 102.288c0 19.515 13.554 36.412 32.604 40.645l235.391 52.309c19.05 4.234 32.605 21.13 32.605 40.646M83.5 463.425v-58.45M183.699 542.75V396.625M283.9 1068.8V945.637M83.5 363.225v-141.95M83.5 179.524v-77.237M83.5 60.537V0M384.1 630.425V277.637M484.301 830.824V594.937M584.5 1068.8V663.825M484.301 555.275V452.988M584.5 622.075V452.988M384.1 728.537v-56.362M384.1 1068.8v-20.88M384.1 1006.17V770.287M283.9 903.888V759.85M183.699 1066.71V891.362M83.5 1068.8V716.012M83.5 674.263V505.175"
|
||||
stroke="#334155"
|
||||
></path>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="384.1"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 384.1)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="200.399"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 200.399)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="81.412"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 81.412)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="183.699"
|
||||
cy="375.75"
|
||||
r="10.438"
|
||||
transform="rotate(-180 183.699 375.75)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="183.699"
|
||||
cy="563.625"
|
||||
r="10.438"
|
||||
transform="rotate(-180 183.699 563.625)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="651.3"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 651.3)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="484.301"
|
||||
cy="574.062"
|
||||
r="10.438"
|
||||
transform="rotate(-180 484.301 574.062)"
|
||||
fill="#0EA5E9"
|
||||
fill-opacity=".42"
|
||||
stroke="#0EA5E9"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="749.412"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 749.412)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="1027.05"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 1027.05)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="283.9"
|
||||
cy="924.763"
|
||||
r="10.438"
|
||||
transform="rotate(-180 283.9 924.763)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="183.699"
|
||||
cy="870.487"
|
||||
r="10.438"
|
||||
transform="rotate(-180 183.699 870.487)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="283.9"
|
||||
cy="738.975"
|
||||
r="10.438"
|
||||
transform="rotate(-180 283.9 738.975)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="695.138"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 695.138)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="484.3"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 484.3)"
|
||||
fill="#0EA5E9"
|
||||
fill-opacity=".42"
|
||||
stroke="#0EA5E9"
|
||||
></circle>
|
||||
<circle
|
||||
cx="484.301"
|
||||
cy="432.112"
|
||||
r="10.438"
|
||||
transform="rotate(-180 484.301 432.112)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="584.5"
|
||||
cy="432.112"
|
||||
r="10.438"
|
||||
transform="rotate(-180 584.5 432.112)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="584.5"
|
||||
cy="642.95"
|
||||
r="10.438"
|
||||
transform="rotate(-180 584.5 642.95)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="484.301"
|
||||
cy="851.699"
|
||||
r="10.438"
|
||||
transform="rotate(-180 484.301 851.699)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="256.763"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 256.763)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TimelineSvg',
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
import VueSelect from '../../src/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueSelect v-bind="$attrs" />
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from '#imports'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type?: 'note' | 'warning'
|
||||
title: string
|
||||
}>(),
|
||||
{
|
||||
type: 'note',
|
||||
},
|
||||
)
|
||||
|
||||
const styles = computed(() => {
|
||||
return {
|
||||
note: {
|
||||
container:
|
||||
'bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
|
||||
title: 'text-sky-900 dark:text-sky-400',
|
||||
body: 'text-sky-800 [--tw-prose-background:var(--color-sky-50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300',
|
||||
},
|
||||
warning: {
|
||||
container:
|
||||
'bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
|
||||
title: 'text-amber-900 dark:text-amber-500',
|
||||
body: 'text-amber-800 [--tw-prose-underline:var(--color-amber-400)] [--tw-prose-background:var(--color-amber-50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-sky-700)] dark:prose-code:text-slate-300',
|
||||
},
|
||||
}[props.type]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['my-8 flex rounded-3xl p-6', styles.container]">
|
||||
<!-- <IconComponent class="h-8 w-8 flex-none" />-->
|
||||
<div class="ml-4 flex-auto">
|
||||
<p :class="['m-0 font-display font-bold text-xl', styles.title]">
|
||||
{{ title }}
|
||||
</p>
|
||||
<div :class="['prose mt-2.5', styles.body]">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width: string
|
||||
height: string
|
||||
x: number
|
||||
y: number
|
||||
squares: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg aria-hidden="true" v-bind="$attrs">
|
||||
<defs>
|
||||
<pattern
|
||||
:id="patternId"
|
||||
:width="width"
|
||||
:height="height"
|
||||
patternUnits="userSpaceOnUse"
|
||||
:x="x"
|
||||
:y="y"
|
||||
>
|
||||
<path :d="`M.5 ${height}V.5H${width}`" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
:stroke-width="0"
|
||||
:fill="`url(#${patternId})`"
|
||||
/>
|
||||
<svg v-if="squares" :x="x" :y="y" class="overflow-visible">
|
||||
<rect
|
||||
v-for="square in squares"
|
||||
:key="`${square[0]}-${square[1]}`"
|
||||
width="width + 1"
|
||||
height="height + 1"
|
||||
:x="square[0] * width"
|
||||
:y="square[1] * height"
|
||||
/>
|
||||
</svg>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<p class="lead"><slot mdc-unwrap="p" /></p>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h2 :id="id"><slot /></h2>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h3 :id="id"><slot /></h3>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h4 :id="id"><slot /></h4>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h5 :id="id"><slot /></h5>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h6 :id="id"><slot /></h6>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
icon: string
|
||||
href: string
|
||||
title: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="group relative rounded-xl border border-slate-200 dark:border-slate-800"
|
||||
>
|
||||
<div
|
||||
class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-sky-50)),var(--quick-links-hover-bg,var(--color-sky-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-sky-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]"
|
||||
/>
|
||||
<div class="relative overflow-hidden rounded-xl p-6">
|
||||
<slot name="icon" />
|
||||
<h2
|
||||
class="mt-4 font-display font-bold text-base text-slate-900 dark:text-white"
|
||||
>
|
||||
<NuxtLink :to="href">
|
||||
<span class="absolute -inset-px rounded-xl" />
|
||||
{{ title }}
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
|
||||
<slot mdc-unwrap="p" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<slot> </slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
import VueSelect from '~/components/VueSelect.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueSelect v-bind="$attrs" />
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
hero?: boolean
|
||||
}>()
|
||||
|
||||
useHead({
|
||||
bodyAttrs: { class: 'bg-white dark:bg-slate-900' },
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ApplicationHeader />
|
||||
<Hero v-if="hero" />
|
||||
<div
|
||||
class="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12"
|
||||
>
|
||||
<SidebarNavigation />
|
||||
<div
|
||||
class="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<h1>Contributors</h1>
|
||||
|
||||
<p>
|
||||
Vue Select is supported by a community of awesome contributors! Without
|
||||
their contributions, the package would not be what it is today.
|
||||
</p>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
|
||||
const { data: page } = await useAsyncData(route.path, () => {
|
||||
return queryCollection('guide').path(route.path).first()
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: page.value?.title,
|
||||
description: page.value?.description,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article>
|
||||
<PageContent :page v-if="page" />
|
||||
</article>
|
||||
</template>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import '../src/css/vue-select.css'
|
||||
|
||||
useHead({
|
||||
title: 'Vue Select',
|
||||
})
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout :hero="true" name="default">
|
||||
<Prose>
|
||||
<Lead>
|
||||
Vue Select is a feature rich combobox component. You might know it as a
|
||||
dropdown or typeahead select. They're a staple on the web, and they're
|
||||
notoriously tough to get right!
|
||||
</Lead>
|
||||
|
||||
<p>
|
||||
Vue Select provides a default template that fits most use cases. The
|
||||
component is designed to be as lightweight as possible, while
|
||||
maintaining high standards for accessibility, developer experience, and
|
||||
customization.
|
||||
</p>
|
||||
|
||||
<QuickLinks>
|
||||
<QuickLink title="Installation" href="/guide/install">
|
||||
Step-by-step instructions to install Vue Select in your project.
|
||||
Couple lines and you're done!
|
||||
<template #icon>
|
||||
<svg
|
||||
data-name="arrow-down-tray"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2.25a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V3a.75.75 0 01.75-.75zm-9 13.5a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</QuickLink>
|
||||
|
||||
<QuickLink title="Options and Selections" href="/">
|
||||
You'll need to register some options so your users can select them.
|
||||
<template #icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</QuickLink>
|
||||
|
||||
<QuickLink title="Customizing" href="/">
|
||||
Vue Select is plug-and-play by design, but you can always customize
|
||||
the look and feel.
|
||||
<template #icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</QuickLink>
|
||||
|
||||
<QuickLink title="Premium Resources" href="/">
|
||||
Pre-built Vue Select instances with custom themes and features.
|
||||
Infinite scroll, remote option loading and more.
|
||||
<template #icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</QuickLink>
|
||||
</QuickLinks>
|
||||
|
||||
<section>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>Tagging</li>
|
||||
<li>Filtering / Searching</li>
|
||||
<li>Vuex Support</li>
|
||||
<li>AJAX Support</li>
|
||||
<li>SSR Support</li>
|
||||
<li>Accessible</li>
|
||||
<li>~20kb Total / ~5kb CSS / ~15kb JS</li>
|
||||
<li>Select Single/Multiple Options</li>
|
||||
<li>Customizable with slots and SCSS variables</li>
|
||||
<li>Zero dependencies</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/sagalbot/vue-select">GitHub</a></li>
|
||||
<li>
|
||||
<a href="http://codepen.io/sagalbot/pen/NpwrQO">CodePen Template</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</Prose>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2>Sponsors</h2>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user