Add some common picker props at the base level for better usage

Author: webdevnerdstuff

src/documentation/components/PropsTable.vue

@@ -48,8 +48,14 @@
 									class="text-primary"
 									:class="classes.appLink"
 									:href="`#props-${sectionId ? `${sectionId}-${item.name}` : item.name}`"
-								>{{ item.name }}</a>
+								>{{ item.name }} <v-icon
+										v-if="item.pickerProp"
+										class=""
+										color="primary"
+										icon="mdi:mdi-palette"
+									/></a>
 							</span>
+
 						</td>
 					</template>
 

src/documentation/sections/PropsSection.vue

@@ -16,13 +16,27 @@
 				When using the <code class="ic">VTextField</code>, you can use the regular props
 				that are available for that component.
 			</div>
+		</v-col>
 
-			<div>
-				For component specific props, please refer to the <a
-					:href="store.links.vuetify"
-					target="_blank"
-				>Vuetify</a> documentation.
-			</div>
+		<v-col cols="12">
+			<v-alert>
+				Some of the more common <code class="ic">VColorPicker</code> props that have a <v-icon
+					color="primary"
+					icon="mdi:mdi-palette"
+				/>
+				next to them in the prop table below. Any other props can be added to the <code
+					class="ic">color-picker-props</code>
+				prop. Please note that the <code class="ic">color-picker-props</code> have a higher priority than the individual
+				props.
+
+			</v-alert>
+		</v-col>
+
+		<v-col cols="12">
+			For other component specific props, please refer to the <a
+				:href="store.links.vuetify"
+				target="_blank"
+			>Vuetify</a> documentation.
 		</v-col>
 
 		<v-col cols="12">
@@ -31,7 +45,6 @@
 				:items="propsStore.componentProps"
 				section-id="component-props"
 				section-title="Component Props"
-				subtitle="These props are used by the component."
 			/>
 		</v-col>
 	</v-row>

src/playground/configs/templates/PlaygroundPage.vue

@@ -11,6 +11,7 @@
 						v-model="color"
 						:append-icon="VColorFieldProps.appendIcon"
 						:append-inner-icon="VColorFieldProps.appendInnerIcon"
+						:canvasHeight="VColorFieldProps.canvasHeight"
 						:cardFieldWidth="VColorFieldProps.cardFieldWidth"
 						:cardOffsetX="VColorFieldProps.cardOffsetX"
 						:cardOffsetY="VColorFieldProps.cardOffsetY"
@@ -20,12 +21,18 @@
 						:color="VColorFieldProps.color"
 						:color-picker-props="VColorFieldProps.colorPickerProps"
 						:density="VColorFieldProps.density"
+						:dotSize="VColorFieldProps.dotSize"
+						:hideCanvas="VColorFieldProps.hideCanvas"
+						:hideInputs="VColorFieldProps.hideInputs"
+						:hideSliders="VColorFieldProps.hideSliders"
 						:hint="VColorFieldProps.hint"
 						:hint-align="VColorFieldProps.hintAlign"
 						:icon-hover-color="VColorFieldProps.iconHoverColor"
 						:iconSize="VColorFieldProps.iconSize"
 						:label="VColorFieldProps.label"
 						:messages="VColorFieldProps.messages"
+						:mode="VColorFieldProps.mode"
+						:modes="VColorFieldProps.modes"
 						:name="VColorFieldProps.name"
 						:open="VColorFieldProps.open"
 						:persistent-hint="VColorFieldProps.persistentHint"
@@ -43,6 +50,9 @@
 						:readonly="VColorFieldProps.readonly"
 						:readonlyInput="VColorFieldProps.readonlyInput"
 						:required="VColorFieldProps.required"
+						:showSwatches="VColorFieldProps.showSwatches"
+						:swatches="VColorFieldProps.swatches"
+						:swatchesMaxHeight="VColorFieldProps.swatchesMaxHeight"
 						:theme="VColorFieldProps.theme"
 						:variant="VColorFieldProps.variant"
 					>
@@ -88,7 +98,27 @@
 <script setup>
 const color = ref(null);
 
+const colorPickerProps = {
+	canvasHeight: 150,
+	dotSize: 10,
+	hideCanvas: false,
+	hideInputs: false,
+	hideSliders: false,
+	mode: 'rgba',
+	modes: ['rgb', 'rgba', 'hsl', 'hsla', 'hex', 'hexa'],
+	showSwatches: true,
+	// swatches: [
+	// 	['#FF0000', '#AA0000', '#550000'],
+	// 	['#FFFF00', '#AAAA00', '#555500'],
+	// 	['#00FF00', '#00AA00', '#005500'],
+	// 	['#00FFFF', '#00AAAA', '#005555'],
+	// 	['#0000FF', '#0000AA', '#000055'],
+	// ],
+	swatchesMaxHeight: 150,
+};
+
 const VColorFieldProps = ref({
+	...colorPickerProps,
 	appendIcon: undefined,
 	appendInnerIcon: undefined,
 	cardFieldWidth: false,
@@ -105,6 +135,7 @@ const VColorFieldProps = ref({
 	clearable: true,
 	color: '',
 	colorPickerProps: {
+		dotSize: 30,
 		// mode: 'hex',
 		// modes: ['hex'],
 		// showSwatches: true,

src/plugin/VColorField.vue

@@ -300,6 +300,18 @@ const defaults = ref<VuetifyDefaults>({
 	},
 	VColorPicker: {
 		...defaultColorPickerProps,
+		...{
+			canvasHeight: props.canvasHeight,
+			dotSize: props.dotSize,
+			hideCanvas: props.hideCanvas,
+			hideInputs: props.hideInputs,
+			hideSliders: props.hideSliders,
+			mode: props.mode,
+			modes: props.modes,
+			showSwatches: props.showSwatches,
+			swatches: props.swatches,
+			swatchesMaxHeight: props.swatchesMaxHeight,
+		},
 		...props.colorPickerProps,
 	},
 });

src/plugins/vuetify.ts

@@ -26,7 +26,7 @@ export default createVuetify({
 		},
 	},
 	theme: {
-		defaultTheme: 'light',
+		defaultTheme: 'dark',
 		themes: {
 			...defaultThemes,
 		},

src/stores/props.ts

@@ -34,8 +34,82 @@ const propsHeaders = [
 	},
 ];
 
+const colorPickerProps = [
+	{
+		default: '150',
+		desc: 'Height of canvas.',
+		name: 'canvas-height',
+		pickerProp: true,
+		type: `VColorPicker['$props']['canvasHeight']`,
+	},
+	{
+		default: '10',
+		desc: 'Changes the size of the selection dot on the canvas.',
+		name: 'dot-size',
+		pickerProp: true,
+		type: `VColorPicker['$props']['dotSize']`,
+	},
+	{
+		default: 'false',
+		desc: 'Hides canvas.',
+		name: 'hide-canvas',
+		pickerProp: true,
+		type: `VColorPicker['$props']['hideCanvas']`,
+	},
+	{
+		default: 'false',
+		desc: 'Hides inputs.',
+		name: 'hide-inputs',
+		pickerProp: true,
+		type: `VColorPicker['$props']['hideInputs']`,
+	},
+	{
+		default: 'false',
+		desc: 'Hides sliders.',
+		name: 'hide-sliders',
+		pickerProp: true,
+		type: `VColorPicker['$props']['hideSliders']`,
+	},
+	{
+		default: 'rgba',
+		desc: 'The current selected input type.',
+		name: 'mode',
+		pickerProp: true,
+		type: `VColorPicker['$props']['mode']`,
+	},
+	{
+		default: `['rgb', 'rgba', 'hsl', 'hsla', 'hex', 'hexa']`,
+		desc: 'Sets available input types.',
+		name: 'modes',
+		pickerProp: true,
+		type: `VColorPicker['$props']['modes']`,
+	},
+	{
+		default: 'false',
+		desc: 'Displays color swatches.',
+		name: 'show-swatches',
+		pickerProp: true,
+		type: `VColorPicker['$props']['showSwatches']`,
+	},
+	{
+		default: 'undefined',
+		desc: 'Sets the available color swatches to select from. 2D array of rows and columns, accepts any color format the picker does.',
+		name: 'swatches',
+		pickerProp: true,
+		type: `VColorPicker['$props']['swatches']`,
+	},
+	{
+		default: '150',
+		desc: 'Sets the maximum height of the swatches section.',
+		name: 'swatches-max-height',
+		pickerProp: true,
+		type: `VColorPicker['$props']['swatchesMaxHeight']`,
+	},
+];
+
 
 const componentProps = [
+	...colorPickerProps,
 	{
 		default: 'false',
 		desc: 'Sets the <code class="ic">VCard</code> width to the same width as the <code class="ic">VTextField</code> input.',
@@ -141,6 +215,17 @@ const componentProps = [
 ];
 
 
+// canvasHeight: 150,
+// 	dotSize: 10,
+// 	hideCanvas: false,
+// 	hideInputs: false,
+// 	hideSliders: false,
+// 	mode: 'rgba',
+// 	modes: ['rgb', 'rgba', 'hsl', 'hsla', 'hex', 'hexa'],
+// 	showSwatches: true,
+// 	swatchesMaxHeight: 150,
+
+
 export const usePropsStore = defineStore('props', {
 	state: () => {
 		return {

src/types/index.ts

@@ -68,6 +68,18 @@ export interface Props extends PipProps {
 	readonlyInput?: boolean | null | undefined;
 	required?: boolean;
 	theme?: VTextField['$props']['theme'];
+
+	// Color Picker Specific //
+	canvasHeight?: VColorPicker['$props']['canvasHeight'];
+	dotSize?: VColorPicker['$props']['dotSize'];
+	hideCanvas?: VColorPicker['$props']['hideCanvas'];
+	hideInputs?: VColorPicker['$props']['hideInputs'];
+	hideSliders?: VColorPicker['$props']['hideSliders'];
+	mode?: VColorPicker['$props']['mode'];
+	modes?: VColorPicker['$props']['modes'];
+	showSwatches?: VColorPicker['$props']['showSwatches'];
+	swatches?: VColorPicker['$props']['swatches'];
+	swatchesMaxHeight?: VColorPicker['$props']['swatchesMaxHeight'];
 }
 
 export interface PipComponentProps extends PipProps {