Update docs

Author: webdevnerdstuff

src/documentation/components/FeaturesTable.vue

@@ -15,6 +15,13 @@
 			cols="12"
 		>
 			<div v-html="subtitle"></div>
+
+			<div v-if="propsTable">Props with the <v-icon
+					color="primary"
+					icon="mdi:mdi-earth"
+					size="x-small"
+				/> icon next to it can be used with <code class="inline-code">createVDrilldownTable</code> as a global property.
+			</div>
 		</v-col>
 	</v-row>
 
@@ -53,7 +60,13 @@
 								class="text-primary"
 								:class="classes.appLink"
 								:href="`#${slugifyString(sectionId, item.name)}`"
-							>{{ item.name }}</a>
+							>{{ item.name }} <v-icon
+									v-if="item.global"
+									class=""
+									color="primary"
+									icon="mdi:mdi-earth"
+									size="x-small"
+								/></a>
 						</div>
 					</template>
 
@@ -95,6 +108,11 @@ defineProps({
 		default: () => [],
 		type: Array,
 	},
+	propsTable: {
+		default: false,
+		required: false,
+		type: Boolean,
+	},
 	sectionId: {
 		default: '',
 		type: String,

src/documentation/sections/PropsSection.vue

@@ -26,6 +26,7 @@
 			<FeaturesTable
 				:headers="store.tableHeaders"
 				:items="propsStore.allProps"
+				props-table
 				section-id="props-all"
 				section-title="All Props"
 				subtitle="These all of the available props"

src/stores/props.ts

@@ -9,12 +9,14 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: 15,
 			desc: 'Sets the percentage change for the header row background color within the drilldown tables.',
+			global: true,
 			name: 'color-percentage-change',
 			type: 'number',
 		},
 		{
 			default: 'desc',
 			desc: 'Sets the direction of the percentage change for the header row background color within the drilldown tables.',
+			global: true,
 			name: 'color-percentage-direction',
 			type: "'asc' | 'desc'",
 		},
@@ -37,24 +39,28 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: '--v-theme-surface',
 			desc: 'Sets the background color of the footer row.',
+			global: true,
 			name: 'footer-background-color',
 			type: 'string',
 		},
 		{
 			default: '--v-theme-on-surface',
 			desc: 'Sets the text color of the footer row.',
+			global: true,
 			name: 'footer-color',
 			type: 'string',
 		},
 		{
 			default: '--v-theme-surface',
 			desc: 'Sets the background color of the header row.',
+			global: true,
 			name: 'header-background-color',
 			type: 'string',
 		},
 		{
 			default: '--v-theme-on-surface',
 			desc: 'Sets the text color of the header row.',
+			global: true,
 			name: 'header-color',
 			type: 'string',
 		},
@@ -70,12 +76,14 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: '',
 			desc: 'Used to bind the props of the <code class="inline-code">VProgressLinear</code>, <code class="inline-code">VProgressCircular</code>, and <code class="inline-code">VSkeletonLoader</code> loaders. See the <a href="#props-table-loader">Table Loader Props</a> for more information.',
+			global: true,
 			name: 'loader-props',
 			type: 'object',
 		},
 		{
 			default: 'linear',
 			desc: 'Sets the type of loader. Available types are <code class="inline-code">linear</code>, <code class="inline-code">circular</code>, <code class="inline-code">text</code> and <code class="inline-code">skelton</code>. You can also use multiple loaders by passing an array of types. The order of the array determines the order of the loaders. To use the <a href="#slots-supported-loader"><code class="inline-code">loader</code></a> slot, set this prop to <code class="inline-code">null</code> or <code class="inline-code">false</code>.',
+			global: true,
 			name: 'loader-type',
 			type: 'string | string[] | false | null',
 		},
@@ -91,6 +99,13 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'column-widths',
 			type: 'object',
 		},
+		{
+			default: 'default',
+			desc: 'Adjusts the vertical height of the table rows.',
+			global: true,
+			name: 'density',
+			type: 'object',
+		},
 		{
 			default: '',
 			desc: 'Internal use only. This holds the drilldown tables data and settings.',
@@ -106,6 +121,7 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: 0,
 			desc: 'Elevation of the table',
+			global: true,
 			name: 'elevation',
 			type: 'string | number | undefined',
 		},
@@ -127,6 +143,13 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'is-drilldown',
 			type: 'boolean',
 		},
+		{
+			default: false,
+			desc: 'Adds a hover effects to a table rows.',
+			global: true,
+			name: 'hover',
+			type: 'boolean',
+		},
 		{
 			default: undefined,
 			desc: 'Internal use only',
@@ -145,6 +168,19 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'items-length',
 			type: 'number',
 		},
+		{
+			default: `<pre class="inline-code"><code>[
+  {value: 10, title: '10'},
+  {value: 25, title: '25'},
+  {value: 50, title: '50'},
+  {value: 100, title: '100'},
+  {value: -1, title: '$vuetify.dataFooter.itemsPerPageAll'}
+]</code></pre>`,
+			desc: 'Array of options to show in the items-per-page dropdown.',
+			global: true,
+			name: 'items-per-page-options',
+			type: 'number',
+		},
 		{
 			default: 1,
 			desc: 'The level of the drilldown (1 = top level)',
@@ -215,6 +251,7 @@ export const usePropsStore = defineStore('props', () => {
 		{
 			default: 'default',
 			desc: 'Enhance the appearance of the table by modifying the borders of the cells',
+			global: true,
 			name: 'separator',
 			type: '\'default\' | \'horizontal\' | \'vertical\' | \'cell\' | undefined',
 		},
@@ -242,6 +279,13 @@ export const usePropsStore = defineStore('props', () => {
 			name: 'show-search',
 			type: 'boolean',
 		},
+		{
+			default: '$sortAsc',
+			desc: 'Icon used for ascending sort button.',
+			global: true,
+			name: 'sort-asc-icon',
+			type: 'any',
+		},
 		{
 			default: 'VDataTable',
 			desc: 'Internal use only',