Skip to content

Commit 368f37e

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Reorganizing
1 parent 91e6436 commit 368f37e

File tree

15 files changed

+129
-85
lines changed

15 files changed

+129
-85
lines changed

‎src/documentation/sections/UsageSection.vue

Lines changed: 56 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,45 @@
1111
>#</a>
1212
Usage
1313
</h2>
14+
</v-col>
15+
16+
<v-col cols="12">
17+
<CodeBlock
18+
:code="usageGlobalPlugin"
19+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
20+
lang="javascript"
21+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
22+
:theme="codeBlockSettings.theme"
23+
>
24+
<template #label>
25+
Global Plugin Registration
26+
<br>
27+
<i>Global options have a higher precedence and will override local props</i>
28+
</template>
29+
</CodeBlock>
30+
</v-col>
1431

15-
<v-row>
16-
<v-col cols="12">
17-
<VCodeBlock
18-
:code="usageGlobal"
19-
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
20-
label="Global registration"
21-
lang="javascript"
22-
:prismjs="codeBlockSettings.plugin === 'prismjs'"
23-
:theme="codeBlockSettings.theme"
24-
>
25-
</VCodeBlock>
26-
</v-col>
27-
</v-row>
28-
29-
<v-row>
30-
<v-col cols="12">
31-
<VCodeBlock
32-
:code="usageIndividual"
33-
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
34-
label="Local registration"
35-
lang="html"
36-
:prismjs="codeBlockSettings.plugin === 'prismjs'"
37-
:theme="codeBlockSettings.theme"
38-
>
39-
</VCodeBlock>
40-
</v-col>
41-
</v-row>
32+
<v-col cols="12">
33+
<CodeBlock
34+
:code="usageGlobalComponent"
35+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
36+
label="Global Component Registration"
37+
lang="javascript"
38+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
39+
:theme="codeBlockSettings.theme"
40+
/>
41+
</v-col>
42+
43+
<v-col cols="12">
44+
<CodeBlock
45+
:code="usageIndividual"
46+
F
47+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
48+
label="Local Registration"
49+
lang="html"
50+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
51+
:theme="codeBlockSettings.theme"
52+
/>
4253
</v-col>
4354
</v-row>
4455
</template>
@@ -57,9 +68,21 @@ const props = defineProps({
5768
const codeBlockSettings = computed(() => props.codeBlockOptions);
5869
const classes = inject('classes');
5970
60-
const usageGlobal = `import { createApp } from 'vue';
71+
const usageGlobalPlugin = `import { createApp } from 'vue';
72+
import App from './App.vue';
73+
import { createVColorField } from '@wdns/vuetify-color-field';
74+
75+
const app = createApp(App);
76+
77+
app.use(createVColorField({
78+
// options
79+
}));
80+
81+
app.mount('#app');`;
82+
83+
const usageGlobalComponent = `import { createApp } from 'vue';
6184
import App from './App.vue';
62-
import { VColorField } from '@wdns/vuetify-color-field';
85+
import { VColorField } from '@wdns/vuetify-color-field';
6386
6487
const app = createApp(App);
6588
@@ -68,11 +91,13 @@ app.component('VColorField', VColorField);
6891
app.mount('#app');`;
6992
7093
const usageIndividual = `<template>
71-
<VColorField v-model="color" />
94+
<VColorField
95+
v-model="color"
96+
/>
7297
</template>
7398
7499
\<script setup\>
75-
import { VColorField } from '@wdns/vuetify-color-field';
100+
import VColorField from '@wdns/vuetify-color-field';
76101
77102
const color = ref(null);
78103
\</script\>`;

‎src/index.ts

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/main.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import '@/libraries/fontawesome';
22
import App from './App.vue';
33
import { createVCodeBlock } from '@wdns/vue-code-block';
4+
import { createVColorField } from './plugin/index';
45
import { createApp } from 'vue';
56
import { createPinia } from 'pinia';
67
import { registerPlugins } from './plugins';
78
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
8-
import { VColorField } from './index';
99

1010

1111
const app = createApp(App);
1212

1313
app.use(createVCodeBlock());
14-
14+
app.use(createVColorField());
1515
app.use(createPinia());
16+
1617
app.component('font-awesome-icon', FontAwesomeIcon);
1718
app.component('FaIcon', FontAwesomeIcon);
18-
app.component('VColorField', VColorField);
1919

2020
registerPlugins(app);
2121

‎src/playground/configs/playground.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import { createApp } from 'vue';
44
import { createPinia } from 'pinia';
55
import { registerPlugins } from '../../plugins';
66
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
7-
import VColorField from '../../index';
7+
import { createVColorField } from '../../plugin/index';
88

99

1010
const app = createApp(PlaygroundApp);
1111

12+
app.use(createVColorField());
1213
app.use(createPinia());
1314
app.component('font-awesome-icon', FontAwesomeIcon);
1415
app.component('FaIcon', FontAwesomeIcon);
15-
app.component('VColorField', VColorField);
1616

1717
registerPlugins(app);
1818

‎src/playground/configs/templates/PlaygroundPage.vue

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
:iconSize="VColorFieldProps.iconSize"
3030
:label="VColorFieldProps.label"
3131
:messages="VColorFieldProps.messages"
32-
:mode="VColorFieldProps.mode"
33-
:modes="VColorFieldProps.modes"
32+
:mode="(VColorFieldProps.mode as VColorPicker['mode'])"
33+
:modes="(VColorFieldProps.modes as VColorPicker['modes'])"
3434
:name="VColorFieldProps.name"
3535
:open="VColorFieldProps.open"
3636
:persistent-hint="VColorFieldProps.persistentHint"
@@ -49,7 +49,7 @@
4949
:readonlyInput="VColorFieldProps.readonlyInput"
5050
:required="VColorFieldProps.required"
5151
:showSwatches="VColorFieldProps.showSwatches"
52-
:swatches="VColorFieldProps.swatches"
52+
:swatches="(VColorFieldProps.swatches as VColorPicker['swatches'])"
5353
:swatchesMaxHeight="VColorFieldProps.swatchesMaxHeight"
5454
:theme="VColorFieldProps.theme"
5555
:variant="VColorFieldProps.variant"
@@ -92,7 +92,8 @@
9292
</v-col>
9393
</template>
9494

95-
<script setup>
95+
<script setup lang="ts">
96+
import type { VColorPicker } from 'vuetify/components';
9697
const color = ref(null);
9798
9899
const colorPickerProps = {
@@ -104,6 +105,7 @@ const colorPickerProps = {
104105
mode: 'rgba',
105106
modes: ['rgb', 'rgba', 'hsl', 'hsla', 'hex', 'hexa'],
106107
showSwatches: true,
108+
swatches: undefined,
107109
// swatches: [
108110
// ['#FF0000', '#AA0000', '#550000'],
109111
// ['#FFFF00', '#AAAA00', '#555500'],
@@ -150,10 +152,12 @@ const VColorFieldProps = ref({
150152
open: 'bottom left',
151153
persistentHint: true,
152154
persistentPlaceholder: false,
153-
pip: false,
154-
// pipBorder: 'none',
155-
// pipBorderRadius: '50%',
155+
pip: true,
156+
pipBorder: undefined,
157+
pipBorderRadius: undefined,
158+
pipHeight: undefined,
156159
pipIcon: undefined,
160+
pipRadius: undefined,
157161
pipSlot: undefined,
158162
placeholder: 'Select Color',
159163
prependIcon: undefined,

‎src/plugin/VColorField.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -219,14 +219,14 @@ import {
219219
Props,
220220
TextFieldProperties,
221221
VuetifyDefaults,
222-
} from '@/types';
223-
import { useConvertToUnit } from '@/plugin/composables/helpers';
222+
} from '@/plugin/types';
223+
import { useConvertToUnit } from '@composables/helpers';
224224
import {
225225
useCardClasses,
226226
useTextFieldClasses,
227-
} from '@/plugin/composables/classes';
228-
import ColorPickerIcon from '@/plugin/components/ColorPickerIcon.vue';
229-
import PipComponent from '@/plugin/components/PipComponent.vue';
227+
} from '@composables/classes';
228+
import ColorPickerIcon from '@components/ColorPickerIcon.vue';
229+
import PipComponent from '@components/PipComponent.vue';
230230
import type { VCard } from 'vuetify/components';
231231
import { onClickOutside } from '@vueuse/core';
232232

‎src/plugin/components/ColorPickerIcon.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
</template>
1414

1515
<script setup lang="ts">
16-
import { ColorPickerIconProps } from '@/types';
16+
import { ColorPickerIconProps } from '@/plugin/types';
1717
import { IconOptions } from 'vuetify';
18-
import { useGetIcon } from '@/plugin/composables/icons';
18+
import { useGetIcon } from '@composables/icons';
1919
2020
2121
const emit = defineEmits(['click']);

‎src/plugin/components/PipComponent.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
</template>
1212

1313
<script setup lang="ts">
14-
import type { PipComponentProps } from '@/types';
14+
import type { PipComponentProps } from '@/plugin/types';
1515
import { IconOptions } from 'vuetify';
16-
import { usePipClasses } from '@/plugin/composables/classes';
17-
import { usePipStyles } from '@/plugin/composables/styles';
18-
import { useGetIcon } from '@/plugin/composables/icons';
16+
import { usePipClasses } from '@composables/classes';
17+
import { usePipStyles } from '@composables/styles';
18+
import { useGetIcon } from '@composables/icons';
1919
2020
const emit = defineEmits(['click']);
2121

‎src/plugin/composables/classes.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import {
33
UseHintClasses,
44
UsePipClasses,
55
UseTextFieldClasses,
6-
} from '@/types';
7-
import { componentName } from '../utils/globals';
6+
} from '@/plugin/types';
7+
import { componentName } from '@utils/globals';
88

99

1010
// ------------------------------------------------ Pip //
@@ -17,10 +17,10 @@ export const usePipClasses: UsePipClasses = () => {
1717

1818
// ------------------------------------------------ Text Field //
1919
export const useTextFieldClasses: UseTextFieldClasses = (options) => {
20-
const { name, readonly, readonlyInput } = options;
20+
const { name = '', readonly, readonlyInput } = options;
2121

2222
return {
23-
[`${componentName}--text-field-${name}`]: true,
23+
[`${componentName}--text-field-${name}`]: name !== '',
2424
[`${componentName}--text-field-readonly`]: readonly ?? false,
2525
[`${componentName}--text-field-readonly-input`]: readonlyInput && !readonly ? true : false,
2626
[`${componentName}--text-field`]: true,

‎src/plugin/composables/helpers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
UseConvertToUnit,
3-
} from '@/types';
3+
} from '@/plugin/types';
44

55

66
/**

‎src/plugin/composables/icons.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { UseGetIcon } from '@/types';
1+
import { UseGetIcon } from '@/plugin/types';
22

33
const defaultIcons = {
44
fa: {
@@ -18,20 +18,20 @@ export const useGetIcon: UseGetIcon = (options) => {
1818
return icon;
1919
}
2020

21-
const defaultSet = iconOptions?.defaultSet as string;
21+
const defaultSet = iconOptions?.defaultSet as string ?? '';
2222
let iconAbbv = defaultSet.toLowerCase();
2323

2424
iconAbbv = iconAbbv === 'fa' || iconAbbv === 'fasvg' ? 'fa' : iconAbbv;
2525
const iconSet = defaultIcons[iconAbbv];
2626

2727
if (!iconSet) {
28-
throw new Error(`VColorField: No VColorField default ${iconOptions?.defaultSet} icon set found.`);
28+
throw new Error(`[VColorField]: No VColorField default ${iconOptions?.defaultSet} icon set found.`);
2929
}
3030

3131
const newIcon = iconSet[name];
3232

3333
if (!newIcon) {
34-
throw new Error(`VColorField: No ${name} icon found.`);
34+
throw new Error(`[VColorField]: No ${name} icon found.`);
3535
}
3636

3737
return newIcon;

‎src/plugin/composables/styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CSSProperties } from 'vue';
22
import {
33
UsePipStyle,
4-
} from '@/types';
4+
} from '@/plugin/types';
55

66

77
// ------------------------------------------------ Pip //

‎src/plugin/index.ts

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
1+
import type { App } from 'vue';
2+
import type { GlobalOptions } from './types';
3+
import './styles/main.scss';
14
import VColorField from './VColorField.vue';
25

3-
export {
4-
VColorField
5-
};
6+
7+
export const globalOptions = Symbol();
8+
9+
export function createVColorField(options: GlobalOptions = {}) {
10+
const install = (app: App) => {
11+
app.provide(globalOptions, options);
12+
13+
app.component('VColorField', VColorField);
14+
};
15+
16+
return {
17+
install,
18+
};
19+
}
620

721
export default VColorField;
22+
23+
export {
24+
VColorField,
25+
};

0 commit comments

Comments
 (0)