(Temporarily) replaced @tailwind/vite with @tailwind/postcss to allow styling of components in vitepress documents

Vectrex · Vectrex · commit fa881cb1aa22 · 2025-02-18T20:20:33.000+01:00
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -16,25 +16,35 @@ export default defineConfig({
       {
         text: 'Components',
         items: [
-          { text: 'Accordion', link: '/accordion' },
-          { text: 'Autocomplete', link: '/autocomplete' },
-          { text: 'Confirm', link: '/confirm' },
-          { text: 'DateInput', link: '/date-input' },
-          { text: 'Datepicker', link: '/datepicker' },
-          { text: 'FormFileButton', link: '/form-file-button' },
-          { text: 'FormSelect', link: '/form-select' },
-          { text: 'FormSwitch', link: '/form-switch' },
-          { text: 'MessageToast', link: '/message-toast' },
-          { text: 'Modal', link: '/modal' },
-          { text: 'Pagination', link: '/pagination' },
-          { text: 'PasswordInput', link: '/password-input' },
-          { text: 'SimpleTree', link: '/simple-tree' },
-          { text: 'Sizable', link: '/sizable' },
-          { text: 'Slider', link: '/slider' },
-          { text: 'Sortable', link: '/sortable' },
-          { text: 'SubmitButton', link: '/submit-button' },
-          { text: 'Tabs', link: '/tabs' },
+          { text: 'Accordion', link: '/components/accordion' },
+          { text: 'Autocomplete', link: '/components/autocomplete' },
+          { text: 'Confirm', link: '/components/confirm' },
+          { text: 'DateInput', link: '/components/date-input' },
+          { text: 'Datepicker', link: '/components/datepicker' },
+          { text: 'FormFileButton', link: '/components/form-file-button' },
+          { text: 'FormSelect', link: '/components/form-select' },
+          { text: 'FormSwitch', link: '/components/form-switch' },
+          { text: 'MessageToast', link: '/components/message-toast' },
+          { text: 'Modal', link: '/components/modal' },
+          { text: 'Pagination', link: '/components/pagination' },
+          { text: 'PasswordInput', link: '/components/password-input' },
+          { text: 'SimpleTree', link: '/components/simple-tree' },
+          { text: 'Sizable', link: '/components/sizable' },
+          { text: 'Slider', link: '/components/slider' },
+          { text: 'Sortable', link: '/components/sortable' },
+          { text: 'SubmitButton', link: '/components/submit-button' },
+          { text: 'Tabs', link: '/components/tabs' },
         ]
+      },
+      {
+        text: 'Directives',
+        /*
+        items: [
+          { text: 'v-focus', link: '/directives/focus' },
+          { text: 'v-floating-label', link: '/directives/floating-label' },
+        ]
+
+         */
       }
     ],
     socialLinks: [
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -1,6 +1,8 @@
+@import '../../../src/index.css';
 :root {
     --vp-nav-logo-height: 3rem;
     --vp-c-brand-1: rgb(var(--vxvue-color));
     --vp-c-brand-2: rgb(var(--vxvue-color-600));
     --vp-c-brand-3: rgb(var(--vxvue-color-700));
-}
+}
+
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -1,4 +1,3 @@
 import DefaultTheme from 'vitepress/theme'
-import '../../../src/index.css'
 import './custom.css'
 export default DefaultTheme
diff --git a/docs/components/accordion.md b/docs/components/accordion.md
@@ -1,6 +1,6 @@
 <script setup>
-    import Accordion from "../src/components/accordion.vue"
-    import AccordionPanel from "../src/components/accordion-panel.vue"
+    import Accordion from "../../src/components/accordion.vue"
+    import AccordionPanel from "../../src/components/accordion-panel.vue"
     import { ref } from "vue"
 
     const accordionIndex = ref({ multiple: [1], single: 0 })
diff --git a/docs/components/autocomplete.md b/docs/components/autocomplete.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Autocomplete from "../src/components/autocomplete.vue"
+    import Autocomplete from "../../src/components/autocomplete.vue"
     import { ref } from "vue"
     const pickedItem = ref(null)
     const items = ["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, Plurinational State of", "Bonaire, Sint Eustatius and Saba", "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", "Côte d'Ivoire", "Croatia", "Cuba", "Curaçao", "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", "Libya", "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", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Palestine, State of", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn", "Poland", "Portugal", "Puerto Rico", "Qatar", "Réunion", "Romania", "Russian Federation", "Rwanda", "Saint Barthélemy", "Saint Helena, Ascension and Tristan da Cunha", "Saint Kitts and Nevis", "Saint Lucia", "Saint Martin (French part)", "Saint Pierre and Miquelon", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Sint Maarten (Dutch part)", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia and the South Sandwich Islands", "South Sudan", "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, Bolivarian Republic of", "Viet Nam", "Virgin Islands, British", "Virgin Islands, U.S.", "Wallis and Futuna", "Western Sahara", "Yemen", "Zambia", "Zimbabwe"]
diff --git a/docs/components/confirm.md b/docs/components/confirm.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Confirm from "../src/components/confirm.vue"
+    import Confirm from "../../src/components/confirm.vue"
     import { ref } from "vue"
 
     const confirmDialog = ref(null) 
diff --git a/docs/components/date-input.md b/docs/components/date-input.md
@@ -1,5 +1,5 @@
 <script setup>
-    import DateInput from "../src/components/date-input.vue"
+    import DateInput from "../../src/components/date-input.vue"
     import { ref } from "vue"
     const pickedDate = ref(null)
 </script>
@@ -53,7 +53,7 @@ Attributes are passed on the wrapped input element with the exception of the `cl
 | `modelValue`   | `Date`    |              | The date displayed after applying the output format                          |
 | `inputFormat`  | `String`  | 'YYYY-MM-DD' | The required input format of a string to be interpreted as a date            |
 | `outputFormat` | `String`  | 'YYYY-MM-DD' | The output format of an accepted date                                        |
-| `showToggle`   | `Boolean` | false        | When true a toggle is shown which allows a [datepicker](datepicker) behavior |
+| `showToggle`   | `Boolean` | false        | When true a toggle is shown which allows a [datepicker](datepicker.md) behavior |
 
 ## Events
 | Name                | Arguments                       | Description                                                                                           |
diff --git a/docs/components/datepicker.md b/docs/components/datepicker.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Datepicker from "../src/components/datepicker.vue"
+    import Datepicker from "../../src/components/datepicker.vue"
     import { ref } from "vue"
     const from = (() => {
         let date = new Date(), d = date.getDate()
@@ -18,7 +18,7 @@
 
 # Datepicker
 
-A date picker component which allows the selection of a single date. Wraps a [date-input](/date-input) component (unless the `has-input` property is set to `false`)
+A date picker component which allows the selection of a single date. Wraps a [date-input](date-input.md) component (unless the `has-input` property is set to `false`)
 
 ## Default Component
 ```html
@@ -63,7 +63,7 @@ v-model="pickedDate"
 :::
 
 ## Date Format and Localization
-The `input-format` and `output-format` properties are passed on the [`date-input`](date-input) component and interpreted there.
+The `input-format` and `output-format` properties are passed on the [`date-input`](date-input.md) component and interpreted there.
 
 ```html
 <datepicker
@@ -136,7 +136,7 @@ v-model="dateRangeLarge"
 :::
 
 ## Properties
-Properties of the [dateInput](date-input) component and standard attributes (like `disabled`) component can be declared and are passed on.
+Properties of the [dateInput](date-input.md) component and standard attributes (like `disabled`) component can be declared and are passed on.
 
 | Name                | Type      | Default                                  | Description                                                                                                                                                             |
 |---------------------|-----------|------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -149,7 +149,7 @@ Properties of the [dateInput](date-input) component and standard attributes (lik
 | `dayNames`          | `Array`   | ['S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'] | An array with day names used for labelling the dates grid                                                                                                               |
 | `locale`            | `String`  | 'default'                                | The locale used for rendering month names                                                                                                                               |
 | `startOfWeekIndex`  | `Number`  | 0                                        | Accepts 0 for Sunday and 1 for Monday                                                                                                                                   |
-| `hasInput`          | `Boolean` | true                                     | When true a [date-input](date-input) component with a toggle is rendered; when false the datepicker is always visible                                                   |
+| `hasInput`          | `Boolean` | true                                     | When true a [date-input](date-input.md) component with a toggle is rendered; when false the datepicker is always visible                                                |
 
 ## Events
 | Name                | Arguments           | Description                                                                                    |
diff --git a/docs/components/form-file-button.md b/docs/components/form-file-button.md
@@ -1,5 +1,5 @@
 <script setup>
-    import FormFileButton from "../src/components/form-file-button.vue"
+    import FormFileButton from "../../src/components/form-file-button.vue"
     import { ref } from "vue"
 
     const files = ref([])
diff --git a/docs/components/form-select.md b/docs/components/form-select.md
@@ -1,5 +1,5 @@
 <script setup>
-    import FormSelect from "../src/components/form-select.vue"
+    import FormSelect from "../../src/components/form-select.vue"
     import { ref } from "vue"
     const options = []
     const selection1 = ref(null)
diff --git a/docs/components/form-switch.md b/docs/components/form-switch.md
@@ -1,5 +1,5 @@
 <script setup>
-    import FormSwitch from "../src/components/form-switch.vue"
+    import FormSwitch from "../../src/components/form-switch.vue"
     import { XMarkIcon } from "@heroicons/vue/24/solid"
     import { ref } from "vue"
     const state = ref(false)
diff --git a/docs/components/message-toast.md b/docs/components/message-toast.md
@@ -1,5 +1,5 @@
 <script setup>
-    import MessageToast from "../src/components/message-toast.vue"
+    import MessageToast from "../../src/components/message-toast.vue"
     import { ref } from "vue"
     const defaultToast = ref({ message: '', active: false, title: 'You need to click!' })
     const timeoutToast = ref({ message: 'The default timeout is 5 seconds.', active: false, title: 'You can click or wait!' })
diff --git a/docs/components/modal.md b/docs/components/modal.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Modal from "../src/components/modal.vue"
+    import Modal from "../../src/components/modal.vue"
     import { ref } from "vue"
     const show = ref(false)
 </script>
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Pagination from "../src/components/pagination.vue"
+    import Pagination from "../../src/components/pagination.vue"
     import { computed, ref } from "vue"
 
     const items = ["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, Plurinational State of", "Bonaire, Sint Eustatius and Saba", "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", "Côte d'Ivoire", "Croatia", "Cuba", "Curaçao", "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", "Libya", "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", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Palestine, State of", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn", "Poland", "Portugal", "Puerto Rico", "Qatar", "Réunion", "Romania", "Russian Federation", "Rwanda", "Saint Barthélemy", "Saint Helena, Ascension and Tristan da Cunha", "Saint Kitts and Nevis", "Saint Lucia", "Saint Martin (French part)", "Saint Pierre and Miquelon", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Sint Maarten (Dutch part)", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia and the South Sandwich Islands", "South Sudan", "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, Bolivarian Republic of", "Viet Nam", "Virgin Islands, British", "Virgin Islands, U.S.", "Wallis and Futuna", "Western Sahara", "Yemen", "Zambia", "Zimbabwe"]
diff --git a/docs/components/password-input.md b/docs/components/password-input.md
@@ -1,5 +1,5 @@
 <script setup>
-    import PasswordInput from "../src/components/password-input.vue"
+    import PasswordInput from "../../src/components/password-input.vue"
     import { ref } from "vue"
 
     const password = ref('')
diff --git a/docs/components/simple-tree.md b/docs/components/simple-tree.md
@@ -1,5 +1,5 @@
 <script setup>
-    import SimpleTree from "../src/components/simple-tree.vue"
+    import SimpleTree from "../../src/components/simple-tree.vue"
     import { computed, ref } from "vue"
 
     const tree = ref({
diff --git a/docs/components/sizable.md b/docs/components/sizable.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Sizable from "../src/components/sizable.vue"
+    import Sizable from "../../src/components/sizable.vue"
     import { EllipsisVerticalIcon } from "@heroicons/vue/24/solid"
 </script>
 
diff --git a/docs/components/slider.md b/docs/components/slider.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Slider from "../src/components/slider.vue"
+    import Slider from "../../src/components/slider.vue"
     import { ref } from "vue"
     const slider0 = ref(30)
     const slider1 = ref(10)
diff --git a/docs/components/sortable.md b/docs/components/sortable.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Sortable from "../src/components/sortable.vue"
+    import Sortable from "../../src/components/sortable.vue"
     import { computed, ref } from "vue"
     const cols = [
       { label: 'Name', prop: 'name', sortable: true },
@@ -100,7 +100,7 @@ A most basic example passing only `columns` and `rows` properties.
 :::
 
 ## Component using offset and count
-Useful in combination with a [pagination](/pagination) component. The _Role_ column has sorting disabled.
+Useful in combination with a [pagination](pagination.md) component. The _Role_ column has sorting disabled.
 
 ::: code-group
 ```js
diff --git a/docs/components/submit-button.md b/docs/components/submit-button.md
@@ -1,5 +1,5 @@
 <script setup>
-    import SubmitButton from "../src/components/submit-button.vue"
+    import SubmitButton from "../../src/components/submit-button.vue"
     import { ref } from "vue"
     const busy = ref(false)
     const doSubmit = () => { busy.value = true; setTimeout(() => busy.value = false, 3000) }
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
@@ -1,5 +1,5 @@
 <script setup>
-    import Tabs from "../src/components/tabs.vue"
+    import Tabs from "../../src/components/tabs.vue"
     import { UserIcon, ShieldExclamationIcon } from "@heroicons/vue/24/solid"
     import { ref } from "vue"
 
diff --git a/docs/index.md b/docs/index.md
@@ -10,8 +10,8 @@ hero:
       link: /getting-started
 
 features:
-  - title: 18 UI Components
-    details: Tailored towards simplicity and covering the most common requirements for your "usual" application
+  - title: 18 UI Components and 2 Directives
+    details: Compact code tailored towards simplicity and covering the most common requirements for your "usual" application
   - title: Tailwind Styled
     details: Incorporates easily with Tailwind projects, won't interfere with your custom CSS and is easily configured with a handful of CSS variables
 ---
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/vite.config.js b/vite.config.js
