From a843ed951a4c8d1e330a9c8bd15f99e5c7a2167c Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Tue, 30 May 2023 17:34:35 -0700 Subject: [PATCH 01/20] Organizing docs --- index.html | 32 +++++++++++++------ src/App.vue | 6 ++-- src/components/docs/index.ts | 23 ------------- .../DocsComponent.vue | 2 +- .../MenuComponent.vue | 0 src/{ => documentation}/layout/AppBar.vue | 0 .../sections}/DependenciesComponent.vue | 0 .../sections}/DescriptionComponent.vue | 0 .../sections}/EventsComponent.vue | 0 .../sections}/ExampleComponent.vue | 0 .../sections}/LegalComponent.vue | 0 .../sections}/LicenseComponent.vue | 0 .../sections}/PropsComponent.vue | 0 .../sections}/SassVariables.vue | 0 .../sections}/SlotsComponent.vue | 0 .../sections}/UsageComponent.vue | 0 src/documentation/sections/index.ts | 23 +++++++++++++ src/playground/configs/PlaygroundApp.vue | 2 +- 18 files changed, 50 insertions(+), 38 deletions(-) delete mode 100644 src/components/docs/index.ts rename src/{components => documentation}/DocsComponent.vue (98%) rename src/{components => documentation}/MenuComponent.vue (100%) rename src/{ => documentation}/layout/AppBar.vue (100%) rename src/{components/docs => documentation/sections}/DependenciesComponent.vue (100%) rename src/{components/docs => documentation/sections}/DescriptionComponent.vue (100%) rename src/{components/docs => documentation/sections}/EventsComponent.vue (100%) rename src/{components/docs => documentation/sections}/ExampleComponent.vue (100%) rename src/{components/docs => documentation/sections}/LegalComponent.vue (100%) rename src/{components/docs => documentation/sections}/LicenseComponent.vue (100%) rename src/{components/docs => documentation/sections}/PropsComponent.vue (100%) rename src/{components/docs => documentation/sections}/SassVariables.vue (100%) rename src/{components/docs => documentation/sections}/SlotsComponent.vue (100%) rename src/{components/docs => documentation/sections}/UsageComponent.vue (100%) create mode 100644 src/documentation/sections/index.ts diff --git a/index.html b/index.html index 143557b..924934e 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,25 @@ - - - - - Vite + Vue + TS - - -
- - + + + + + + Vuetify Inline Fields + + + + + + + + + + +
+ + + diff --git a/src/App.vue b/src/App.vue index 60452b9..1cd2684 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,9 +26,9 @@ + + diff --git a/src/documentation/sections/DependenciesComponent.vue b/src/documentation/sections/DependenciesComponent.vue index e449f8d..0dd5049 100644 --- a/src/documentation/sections/DependenciesComponent.vue +++ b/src/documentation/sections/DependenciesComponent.vue @@ -18,12 +18,23 @@ Vuetify v3 + > + Vuetify v3 +
Vue 3 + > + Vue 3 + +
+ + VueUse + @@ -34,7 +45,7 @@ import { inject } from 'vue'; import { useCoreStore } from '@/stores/index'; -const classes = inject('classes'); +const classes = inject('classes'); const store = useCoreStore(); diff --git a/src/documentation/sections/DescriptionComponent.vue b/src/documentation/sections/DescriptionComponent.vue index 13638dd..f89462f 100644 --- a/src/documentation/sections/DescriptionComponent.vue +++ b/src/documentation/sections/DescriptionComponent.vue @@ -25,6 +25,7 @@ diff --git a/src/documentation/sections/EventsComponent.vue b/src/documentation/sections/EventsComponent.vue index 530647d..2ac5d4b 100644 --- a/src/documentation/sections/EventsComponent.vue +++ b/src/documentation/sections/EventsComponent.vue @@ -13,6 +13,13 @@ Events + For component specific events, please refer to the Vuetify documentation. + + + @@ -65,8 +72,11 @@ diff --git a/src/documentation/sections/LegalComponent.vue b/src/documentation/sections/LegalComponent.vue index 120dba2..a650a2b 100644 --- a/src/documentation/sections/LegalComponent.vue +++ b/src/documentation/sections/LegalComponent.vue @@ -28,5 +28,6 @@ diff --git a/src/documentation/sections/LicenseComponent.vue b/src/documentation/sections/LicenseComponent.vue index 41eb192..a77652a 100644 --- a/src/documentation/sections/LicenseComponent.vue +++ b/src/documentation/sections/LicenseComponent.vue @@ -38,6 +38,7 @@ import { inject } from 'vue'; import { useCoreStore } from '@/stores/index'; + const classes = inject('classes'); const store = useCoreStore(); diff --git a/src/documentation/sections/PropsComponent.vue b/src/documentation/sections/PropsComponent.vue index 62045d0..41da11c 100644 --- a/src/documentation/sections/PropsComponent.vue +++ b/src/documentation/sections/PropsComponent.vue @@ -13,160 +13,91 @@ Props - - TBD - - - - -

- # - Additional props -

- - +
+ Most of the Vuetify props for each component work as intended. Any specified props below may have different + default values. Please refer to the Vuetify documentation for each components specific props. +
+ - - - - - - + - - + - + - + + - - - - - + - - -

- # - Props with partial and/or no support -

- - + - - - - - + - + - - - - - - + ] +]; - diff --git a/src/documentation/components/CheckboxComponent.vue b/src/documentation/components/CheckboxComponent.vue new file mode 100644 index 0000000..6819b8d --- /dev/null +++ b/src/documentation/components/CheckboxComponent.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/documentation/components/PropsTable.vue b/src/documentation/components/PropsTable.vue index 1cd7411..73e5f85 100644 --- a/src/documentation/components/PropsTable.vue +++ b/src/documentation/components/PropsTable.vue @@ -1,80 +1,78 @@ + + diff --git a/src/documentation/components/SwitchComponent.vue b/src/documentation/components/SwitchComponent.vue new file mode 100644 index 0000000..6bfe31d --- /dev/null +++ b/src/documentation/components/SwitchComponent.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/documentation/components/TextFieldComponent.vue b/src/documentation/components/TextFieldComponent.vue new file mode 100644 index 0000000..d037d35 --- /dev/null +++ b/src/documentation/components/TextFieldComponent.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/documentation/components/TextareaComponent.vue b/src/documentation/components/TextareaComponent.vue new file mode 100644 index 0000000..77c4e21 --- /dev/null +++ b/src/documentation/components/TextareaComponent.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/documentation/components/index.js b/src/documentation/components/index.js new file mode 100644 index 0000000..b9dc699 --- /dev/null +++ b/src/documentation/components/index.js @@ -0,0 +1,15 @@ +import CheckboxComponent from './CheckboxComponent'; +import PropsTable from './PropsTable'; +import SelectComponent from './SelectComponent'; +import SwitchComponent from './SwitchComponent'; +import TextFieldComponent from './TextFieldComponent'; +import TextareaComponent from './TextareaComponent'; + +export { + CheckboxComponent, + PropsTable, + SelectComponent, + SwitchComponent, + TextFieldComponent, + TextareaComponent, +}; diff --git a/src/documentation/layout/AppBar.vue b/src/documentation/layout/AppBar.vue index 62d309b..8ea6de9 100644 --- a/src/documentation/layout/AppBar.vue +++ b/src/documentation/layout/AppBar.vue @@ -12,7 +12,6 @@ :width="iconSize.width" @click.stop="toggleDrawer" > - - - Github - - - - VCheckbox - - - - VSelect - - - - VSwitch - - - - VTextField - - - - - + + import { onMounted, ref } from 'vue'; import { useCoreStore } from '@/stores/index'; +import { useMenuStore } from '@/stores/menu'; import { useTheme } from 'vuetify'; const emit = defineEmits(['changedTheme', 'updatedDrawer']); @@ -166,6 +109,11 @@ defineProps({ }, }); +onMounted(() => { + getTheme(); +}); + +const menuStore = useMenuStore(); const store = useCoreStore(); const theme = useTheme(); @@ -173,15 +121,13 @@ const links = store.links; const themeName = ref('dark'); const drawer = ref(true); +const menuItems = [...menuStore.vuetifyLinks, ...menuStore.componentItems]; + const iconSize = ref({ height: 32, width: 32, }); -onMounted(() => { - getTheme(); -}); - function getTheme() { themeName.value = store.getTheme(); if (!themeName.value) { diff --git a/src/documentation/sections/ComponentsSection.vue b/src/documentation/sections/ComponentsSection.vue new file mode 100644 index 0000000..fdb6dd0 --- /dev/null +++ b/src/documentation/sections/ComponentsSection.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/documentation/sections/PropsComponent.vue b/src/documentation/sections/PropsComponent.vue index 41da11c..c9208d4 100644 --- a/src/documentation/sections/PropsComponent.vue +++ b/src/documentation/sections/PropsComponent.vue @@ -21,603 +21,45 @@ >Vuetify documentation for each components specific props. - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/documentation/sections/index.ts b/src/documentation/sections/index.ts index 9cac0b6..0b25bbd 100644 --- a/src/documentation/sections/index.ts +++ b/src/documentation/sections/index.ts @@ -8,8 +8,10 @@ import PropsComponent from './PropsComponent.vue'; import SassVariables from './SassVariables.vue'; import SlotsComponent from './SlotsComponent.vue'; import UsageComponent from './UsageComponent.vue'; +import ComponentsSection from './ComponentsSection.vue'; export { + ComponentsSection, DependenciesComponent, DescriptionComponent, EventsComponent, diff --git a/src/stores/index.ts b/src/stores/index.ts index ce7276e..4293990 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -1,64 +1,60 @@ import { defineStore } from 'pinia'; import packageJson from '@root/package.json'; -const packageName = packageJson.name; +export const useCoreStore = defineStore('core', () => { + const packageName = packageJson.name; + const storageName = 'vuetify-inline-fields'; -// Links // -const repoBaseUrl = `https://github.com/webdevnerdstuff/${packageName}`; -const links = { - changeLog: `${repoBaseUrl}/blob/main/CHANGELOG.md`, - github: repoBaseUrl, - githubProfile: 'https://github.com/webdevnerdstuff', - license: `${repoBaseUrl}/blob/main/LICENSE.md`, - npm: `https://www.npmjs.com/package/${packageName}`, - vue: 'https://vuejs.org/', - vueUse: 'https://vueuse.org/', - vuetify: 'https://vuetifyjs.com/', - vuetifyGithub: 'https://github.com/vuetifyjs/vuetify', -}; + // Links // + const repoBaseUrl = `https://github.com/webdevnerdstuff/${packageName}`; + const links = { + changeLog: `${repoBaseUrl}/blob/main/CHANGELOG.md`, + github: repoBaseUrl, + githubProfile: 'https://github.com/webdevnerdstuff', + license: `${repoBaseUrl}/blob/main/LICENSE.md`, + npm: `https://www.npmjs.com/package/${packageName}`, + vue: 'https://vuejs.org/', + vueUse: 'https://vueuse.org/', + vuetify: 'https://vuetifyjs.com/', + vuetifyGithub: 'https://github.com/vuetifyjs/vuetify', + }; -interface State { - links: object; - package: object; - pluginVersion: string | number; - storageName: string; -} - -export const useCoreStore = defineStore('core', { - actions: { + const actions = { setLocalStorage(val: string): string { - const oldValue = localStorage.getItem(this.storageName); + const oldValue = localStorage.getItem(storageName); const newValue = val ?? oldValue; - localStorage.setItem(this.storageName, newValue); + localStorage.setItem(storageName, newValue); return newValue; }, setTheme(val: string): string { const themeName = val === 'dark' ? 'light' : 'dark'; - const currentTheme = localStorage.getItem(`${this.storageName}-theme`); + const currentTheme = localStorage.getItem(`${storageName}-theme`); const newTheme = themeName ?? currentTheme; - localStorage.setItem(`${this.storageName}-theme`, newTheme); + localStorage.setItem(`${storageName}-theme`, newTheme); return newTheme; }, - }, - getters: { - getLocalStorage: (state: State) => (): unknown => { - const value = localStorage.getItem(state.storageName); + }; + + const getters = { + getLocalStorage: () => (): unknown => { + const value = localStorage.getItem(storageName); return value; }, - getTheme: (state: State) => (): unknown => { - const value = localStorage.getItem(`${state.storageName}-theme`); + getTheme: () => { + const value = localStorage.getItem(`${storageName}-theme`); return value; }, - }, - state: (): State => { - return { - links, - package: packageJson, - pluginVersion: packageJson.version, - storageName: 'vuetify-inline-fields', - }; - }, + }; + + return { + ...actions, + ...getters, + links, + package: packageJson, + pluginVersion: packageJson.version, + storageName, + }; }); diff --git a/src/stores/menu.ts b/src/stores/menu.ts new file mode 100644 index 0000000..8280501 --- /dev/null +++ b/src/stores/menu.ts @@ -0,0 +1,157 @@ +import { defineStore } from 'pinia'; +import { useCoreStore } from './index'; + + +export const useMenuStore = defineStore('menu', () => { + const coreStore = useCoreStore(); + const links = coreStore.links; + + const componentItems = [ + { + href: '#components-v-inline-checkbox', + icon: 'mdi:mdi-checkbox-outline', + key: 'v-checkbox', + link: `${links.vuetify}en/api/v-checkbox/`, + title: 'VCheckbox', + }, + { + href: '#components-v-inline-select', + icon: 'mdi:mdi-format-list-bulleted', + key: 'v-select', + link: `${links.vuetify}en/api/v-select/`, + title: 'VSelect', + }, + { + href: '#components-v-inline-switch', + icon: 'mdi:mdi-toggle-switch-off-outline', + key: 'v-switch', + link: `${links.vuetify}en/api/v-switch/`, + title: 'VSwitch', + }, + { + href: '#components-v-inline-textarea', + icon: 'mdi:mdi-text-long', + key: 'v-textarea', + link: `${links.vuetify}en/api/v-textarea/`, + title: 'VTextarea', + }, + { + href: '#components-v-inline-text-field', + icon: 'mdi:mdi-minus', + key: 'v-text-field', + link: `${links.vuetify}en/api/v-text-field/`, + title: 'VTextField', + }, + ]; + + const vuetifyLinks = [ + { + icon: 'mdi:mdi-github', + key: 'vuetify-github', + link: links.vuetifyGithub, + title: 'Github', + }, + { + key: 'vuetify', + link: `${links.vuetify}en/components/all/`, + title: 'Vuetify Components', + }, + ]; + + const menuItems = [ + { + href: '#home', + icon: 'mdi:mdi-home', + title: 'Home', + }, + { + href: '#installation', + icon: 'mdi:mdi-plus-thick', + title: 'Installation', + }, + { + href: '#description', + icon: 'mdi:mdi-information-outline', + title: 'Description', + }, + { + href: '#props', + icon: 'mdi:mdi-cog', + items: [ + { + href: '#props', + icon: 'mdi:mdi-cog', + key: 'shared-props', + title: 'Props', + }, + { + href: '#props-shared', + icon: 'mdi:mdi-share-all', + key: 'shared-props', + title: 'Shared', + }, + { + href: '#props-save-and-loading-icon', + icon: 'mdi:mdi-content-save', + key: 'props-save-and-loading-icon', + title: 'Save & Loading', + }, + { + href: '#props-true-false-icon', + icon: 'mdi:mdi-content-save', + key: 'props-true-false-icon', + title: 'True/False Icons', + }, + ], + title: 'Props', + }, + { + href: '#components', + icon: 'mdi:mdi-cog', + items: componentItems, + key: 'components', + title: 'Components', + }, + { + href: '#events', + icon: 'mdi:mdi-calendar-star', + title: 'Events', + }, + { + href: '#slots', + icon: 'mdi:mdi-slot-machine', + title: 'Slots', + }, + { + href: '#sass-variables', + icon: 'mdi:mdi-sass', + title: 'SASS Variables', + }, + { + href: '#example', + icon: 'mdi:mdi-code-json', + title: 'Example', + }, + { + href: '#dependencies', + icon: 'mdi:mdi-asterisk-circle-outline', + title: 'Dependencies', + }, + { + href: '#license', + icon: 'mdi:mdi-card-account-details-outline', + title: 'License', + }, + { + href: '#legal', + icon: 'mdi:mdi-scale-balance', + title: 'Legal', + }, + ]; + + return { + componentItems, + menuItems, + vuetifyLinks, + }; +}); diff --git a/src/stores/props.ts b/src/stores/props.ts new file mode 100644 index 0000000..40e01a4 --- /dev/null +++ b/src/stores/props.ts @@ -0,0 +1,512 @@ +import { defineStore } from 'pinia'; + + +const propsSupported = { + headers: [ + { + align: 'start', + filterable: true, + key: 'name', + sortable: true, + title: 'Name', + width: '15%', + }, + { + align: 'start', + filterable: false, + key: 'type', + sortable: false, + title: 'Type', + width: '20%', + }, + { + align: 'start', + filterable: false, + key: 'default', + sortable: false, + title: 'Default', + }, + { + align: 'start', + filterable: false, + key: 'desc', + sortable: false, + title: 'Description', + }, + ], + items: [ + { + default: 'TBD', + desc: 'TBD', + name: 'TBD', + type: 'TBD', + }, + ], +}; + +const colorDesc = 'Applies specified color to the'; +const densityDesc = 'Adjusts the vertical height used by the component'; +const variantDesc = 'Applies a distinct style to the'; + +const sharedProps = [ + { + default: 'undefined', + desc: 'The api route to save the field if the doNotSave prop is set to false', + name: 'apiRoute', + type: 'string | undefined', + }, + { + default: 'default', + desc: `${colorDesc} cancel button`, + name: 'cancelButtonColor', + type: "VBtn['$props']['color']", + }, + { + default: 'x-small', + desc: 'Sets the height and width of the cancel button', + name: 'cancelButtonSize', + type: "VBtn['$props']['size']", + }, + { + default: 'Cancel', + desc: 'The title of the cancel button', + name: 'cancelButtonTitle', + type: 'string | undefined', + }, + { + default: 'tonal', + desc: `${variantDesc} cancel button`, + name: 'cancelButtonVariant', + type: "VBtn['$props']['variant']", + }, + { + default: 'mdi:mdi-close', + desc: 'The icon to use to cancel', + name: 'cancelIcon', + type: 'string', + }, + { + default: 'default', + desc: `${colorDesc} cancel icon`, + name: 'cancelIconColor', + type: 'string', + }, + { + default: false, + desc: 'If true, the field will close when the user opens another inline form element', + name: 'closeSiblings', + type: 'boolean', + }, + { + default: 'primary', + desc: `${colorDesc} control`, + name: 'color', + type: 'string', + }, + { + default: 'compact', + desc: densityDesc, + name: 'density', + type: 'string', + }, + { + default: false, + desc: 'Disables the field', + name: 'disabled', + type: 'boolean', + }, + { + default: true, + desc: 'If true the component will not use axios to attempt to save the value. The prop apiRoute is required if this prop is set to false', + name: 'doNotSave', + type: 'boolean', + }, + { + default: 'empty', + desc: 'Text to display when the field is empty', + name: 'emptyText', + type: 'string', + }, + { + default: false, + desc: 'If set to true will only show the field', + name: 'fieldOnly', + type: 'boolean', + }, + { + default: true, + desc: 'Hides hint and validation errors. When set to auto messages will be rendered only if there\'s a message (hint, error message, counter value etc) to display', + name: 'hideDetails', + type: 'boolean' + }, + { + default: () => ({}), + desc: 'The item object', + name: 'item', + type: 'Record', + }, + { + default: 'undefined', + desc: 'Sets the text of the v-label or v-field-label component', + name: 'label', + type: 'string', + }, + { + default: 'PUT', + desc: 'The http method to use when saving the text field', + name: 'method', + type: 'string', + }, + { + default: 'undefined', + desc: "Sets the component's name attribute.", + name: 'name', + type: 'string', + }, + { + default: 'primary', + desc: `${colorDesc} display value underline`, + name: 'underlineColor', + type: 'string', + }, + { + default: 'dotted', + desc: 'The style of the display value underline', + name: 'underlineStyle', + type: 'string', + }, + { + default: '1px', + desc: 'The width of the display value underline', + name: 'underlineWidth', + type: 'string', + }, + { + default: true, + desc: 'Displays/Hides the display value underline', + name: 'underlined', + type: 'boolean', + }, + { + default: 'default', + desc: `${colorDesc} value`, + name: 'valueColor', + type: 'string', + }, +]; + +const autofocusProp = [ + { + default: false, + desc: 'If true, the field will autofocus', + name: 'autofocus', + type: 'boolean', + }, +]; + +const saveAndLoadingIconProps = [ + { + default: false, + desc: 'Displays/Hides the save icon', + name: 'hideSaveIcon', + type: 'boolean', + }, + { + default: 'mdi:mdi-loading mdi:mdi-spin', + desc: 'The icon to use when loading', + name: 'loadingIcon', + type: 'string', + }, + { + default: 'primary', + desc: `${colorDesc} loading icon`, + name: 'loadingIconColor', + type: 'string', + }, + { + default: 'primary', + desc: `${colorDesc} save button`, + name: 'saveButtonColor', + type: "VBtn['$props']['color']", + }, + { + default: 'x-small', + desc: 'Sets the height and width of the save button', + name: 'saveButtonSize', + type: "VBtn['$props']['size']", + }, + { + default: 'Save', + desc: 'The title of the save button', + name: 'saveButtonTitle', + type: 'string | undefined', + }, + { + default: 'text', + desc: `${variantDesc} save button`, + name: 'saveButtonVariant', + type: "VBtn['$props']['variant']", + }, + { + default: 'mdi:mdi-content-save', + desc: 'The icon to use to save', + name: 'saveIcon', + type: 'string', + }, + { + default: 'primary', + desc: `${colorDesc} save icon`, + name: 'saveIconColor', + type: 'string', + }, +]; + +const trueFalseIconProps = [ + { + default: false, + desc: 'Sets value for falsy state', + name: 'falseValue', + type: 'boolean | string', + }, + { + default: 'mdi:mdi-close', + desc: 'The false icon', + name: 'iconFalse', + type: 'string', + }, + { + default: 'danger', + desc: `${colorDesc} icon when false`, + name: 'iconFalseColor', + type: 'string', + }, + { + default: 'No', + desc: 'The title of the false icon', + name: 'iconFalseTitle', + type: 'string | undefined', + }, + { + default: 'mdi:mdi-check', + desc: 'The true icon', + name: 'iconTrue', + type: 'string', + }, + { + default: 'success', + desc: `${colorDesc} icon when true`, + name: 'iconTrueColor', + type: 'string', + }, + { + default: 'Yes', + desc: 'The title of the true icon', + name: 'iconTrueTitle', + type: 'string | undefined', + }, + { + default: true, + desc: 'Displays/Hides the icons', + name: 'icons', + type: 'boolean', + }, + { + default: true, + desc: 'Sets value for truthy state', + name: 'trueValue', + type: 'boolean | string', + }, +]; + +const truncateProps = [ + { + default: 0, + desc: 'The number of characters to truncate the displayed value', + name: 'truncateLength', + type: 'number | undefined', + }, + { + default: '...', + desc: 'The suffix to use when truncating the displayed value', + name: 'truncateSuffix', + type: 'string | undefined', + }, +]; + +const vInlineCheckboxProps = [ + ...sharedProps, + ...trueFalseIconProps, + ...[ + { + default: 'compact', + desc: densityDesc, + name: 'density', + type: "VCheckbox['$props']['density']", + }, + { + default: 'mdi:mdi-checkbox-blank-outline', + desc: 'The icon of the field when false', + name: 'falseIcon', + type: "VCheckbox['$props']['falseIcon']", + }, + { + default: 'mdi:mdi-checkbox-outline', + desc: 'The icon of the field when true', + name: 'trueIcon', + type: "VCheckbox['$props']['trueIcon']", + }, + { + default: true, + desc: 'Displays/Hides the icons', + name: 'icons', + type: 'boolean', + }, + ] +]; + +const vInlineSelectProps = [ + ...sharedProps, + ...autofocusProp, + ...saveAndLoadingIconProps, + ...[ + { + default: 'mdi:mdi-close-circle-outline', + desc: 'The icon to use to clear the field', + name: 'clearIcon', + type: "VSelect['$props']['clearIcon']", + }, + { + default: false, + desc: 'Allows for the component to be cleared', + name: 'clearable', + type: "VSelect['$props']['clearable']", + }, + { + default: 'compact', + desc: densityDesc, + name: 'density', + type: "VSelect['$props']['density']", + }, + { + default: true, + desc: 'Hides the selected items', + name: 'hideSelected', + type: "VSelect['$props']['hideSelected']", + }, + { + default: 'title', + desc: 'The item title', + name: 'itemTitle', + type: "VSelect['$props']['itemTitle']", + }, + { + default: 'value', + desc: 'The item value', + name: 'itemValue', + type: "VSelect['$props']['itemValue']", + }, + { + default: () => ([]), + desc: 'The select list items', + name: 'items', + type: "VSelect['$props']['items']", + }, + { + default: 'underlined', + desc: `${variantDesc} component`, + name: 'variant', + type: "VSelect['$props']['variant']", + }, + ] +]; + +const vInlineSwitchProps = [ + ...sharedProps, + ...trueFalseIconProps, + ...[ + { + default: 'compact', + desc: densityDesc, + name: 'density', + type: "VSwitch['$props']['density']", + }, + { + default: 'mdi:mdi-checkbox-blank-outline', + desc: 'The icon of the field when false', + name: 'falseIcon', + type: "falseIcon['$props']['falseIcon']", + }, + { + default: true, + desc: 'Displays/Hides the icons', + name: 'icons', + type: 'boolean', + }, + ] +]; + +const vInlineTextareaProps = [ + ...sharedProps, + ...autofocusProp, + ...saveAndLoadingIconProps, + ...truncateProps, + ...[ + { + default: true, + desc: 'Automatically grow the textarea depending on amount of text', + name: 'autoGrow', + type: "VTextarea['$props']['autoGrow']", + }, + { + default: 'compact', + desc: densityDesc, + name: 'density', + type: "VTextarea['$props']['density']", + }, + { + default: 'underlined', + desc: `${variantDesc} component`, + name: 'variant', + type: "VTextarea['$props']['variant']", + }, + ] +]; + +const vInlineTextFieldProps = [ + ...sharedProps, + ...autofocusProp, + ...saveAndLoadingIconProps, + ...truncateProps, + ...[ + { + default: 'compact', + desc: densityDesc, + name: 'density', + type: "VTextField['$props']['density']", + }, + { + default: 'underlined', + desc: `${variantDesc} component`, + name: 'variant', + type: "VTextField['$props']['variant']", + }, + ] +]; + +export const usePropsStore = defineStore('props', { + state: () => { + return { + autofocusProp, + propsSupported, + saveAndLoadingIconProps, + sharedProps, + trueFalseIconProps, + truncateProps, + vInlineCheckboxProps, + vInlineSelectProps, + vInlineSwitchProps, + vInlineTextFieldProps, + vInlineTextareaProps, + }; + }, +}); From 0082f534495a5b703b024160ed93df232722033b Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 2 Jun 2023 20:15:45 -0700 Subject: [PATCH 09/20] Changing file names and adjusting --- src/documentation/DocsComponent.vue | 40 +++++++++---------- ...sComponent.vue => DependenciesSection.vue} | 0 ...onComponent.vue => DescriptionSection.vue} | 0 ...{EventsComponent.vue => EventsSection.vue} | 0 ...xampleComponent.vue => ExampleSection.vue} | 0 .../{LegalComponent.vue => LegalSection.vue} | 0 ...icenseComponent.vue => LicenseSection.vue} | 0 .../{PropsComponent.vue => PropsSection.vue} | 0 ...Variables.vue => SassVariablesSection.vue} | 0 .../{SlotsComponent.vue => SlotsSection.vue} | 0 .../{UsageComponent.vue => UsageSection.vue} | 0 src/documentation/sections/index.js | 25 ++++++++++++ src/documentation/sections/index.ts | 25 ------------ 13 files changed, 45 insertions(+), 45 deletions(-) rename src/documentation/sections/{DependenciesComponent.vue => DependenciesSection.vue} (100%) rename src/documentation/sections/{DescriptionComponent.vue => DescriptionSection.vue} (100%) rename src/documentation/sections/{EventsComponent.vue => EventsSection.vue} (100%) rename src/documentation/sections/{ExampleComponent.vue => ExampleSection.vue} (100%) rename src/documentation/sections/{LegalComponent.vue => LegalSection.vue} (100%) rename src/documentation/sections/{LicenseComponent.vue => LicenseSection.vue} (100%) rename src/documentation/sections/{PropsComponent.vue => PropsSection.vue} (100%) rename src/documentation/sections/{SassVariables.vue => SassVariablesSection.vue} (100%) rename src/documentation/sections/{SlotsComponent.vue => SlotsSection.vue} (100%) rename src/documentation/sections/{UsageComponent.vue => UsageSection.vue} (100%) create mode 100644 src/documentation/sections/index.js delete mode 100644 src/documentation/sections/index.ts diff --git a/src/documentation/DocsComponent.vue b/src/documentation/DocsComponent.vue index 7125202..0cf425b 100644 --- a/src/documentation/DocsComponent.vue +++ b/src/documentation/DocsComponent.vue @@ -67,37 +67,37 @@ - + - + - + - + - + - + - + - + - + - + @@ -106,16 +106,16 @@ import { inject, provide, reactive, ref } from 'vue'; import packageInfo from '../../package.json'; import { ComponentsSection, - DependenciesComponent, - DescriptionComponent, - EventsComponent, - ExampleComponent, - LegalComponent, - LicenseComponent, - PropsComponent, - SassVariables, - SlotsComponent, - UsageComponent, + DependenciesSection, + DescriptionSection, + EventsSection, + ExampleSection, + LegalSection, + LicenseSection, + PropsSection, + SassVariablesSection, + SlotsSection, + UsageSection, } from '@/documentation/sections'; const links = inject('links'); diff --git a/src/documentation/sections/DependenciesComponent.vue b/src/documentation/sections/DependenciesSection.vue similarity index 100% rename from src/documentation/sections/DependenciesComponent.vue rename to src/documentation/sections/DependenciesSection.vue diff --git a/src/documentation/sections/DescriptionComponent.vue b/src/documentation/sections/DescriptionSection.vue similarity index 100% rename from src/documentation/sections/DescriptionComponent.vue rename to src/documentation/sections/DescriptionSection.vue diff --git a/src/documentation/sections/EventsComponent.vue b/src/documentation/sections/EventsSection.vue similarity index 100% rename from src/documentation/sections/EventsComponent.vue rename to src/documentation/sections/EventsSection.vue diff --git a/src/documentation/sections/ExampleComponent.vue b/src/documentation/sections/ExampleSection.vue similarity index 100% rename from src/documentation/sections/ExampleComponent.vue rename to src/documentation/sections/ExampleSection.vue diff --git a/src/documentation/sections/LegalComponent.vue b/src/documentation/sections/LegalSection.vue similarity index 100% rename from src/documentation/sections/LegalComponent.vue rename to src/documentation/sections/LegalSection.vue diff --git a/src/documentation/sections/LicenseComponent.vue b/src/documentation/sections/LicenseSection.vue similarity index 100% rename from src/documentation/sections/LicenseComponent.vue rename to src/documentation/sections/LicenseSection.vue diff --git a/src/documentation/sections/PropsComponent.vue b/src/documentation/sections/PropsSection.vue similarity index 100% rename from src/documentation/sections/PropsComponent.vue rename to src/documentation/sections/PropsSection.vue diff --git a/src/documentation/sections/SassVariables.vue b/src/documentation/sections/SassVariablesSection.vue similarity index 100% rename from src/documentation/sections/SassVariables.vue rename to src/documentation/sections/SassVariablesSection.vue diff --git a/src/documentation/sections/SlotsComponent.vue b/src/documentation/sections/SlotsSection.vue similarity index 100% rename from src/documentation/sections/SlotsComponent.vue rename to src/documentation/sections/SlotsSection.vue diff --git a/src/documentation/sections/UsageComponent.vue b/src/documentation/sections/UsageSection.vue similarity index 100% rename from src/documentation/sections/UsageComponent.vue rename to src/documentation/sections/UsageSection.vue diff --git a/src/documentation/sections/index.js b/src/documentation/sections/index.js new file mode 100644 index 0000000..3409fd7 --- /dev/null +++ b/src/documentation/sections/index.js @@ -0,0 +1,25 @@ +import ComponentsSection from './ComponentsSection.vue'; +import DependenciesSection from './DependenciesSection.vue'; +import DescriptionSection from './DescriptionSection.vue'; +import EventsSection from './EventsSection.vue'; +import ExampleSection from './ExampleSection.vue'; +import LegalSection from './LegalSection.vue'; +import LicenseSection from './LicenseSection.vue'; +import PropsSection from './PropsSection.vue'; +import SassVariablesSection from './SassVariablesSection.vue'; +import SlotsSection from './SlotsSection.vue'; +import UsageSection from './UsageSection.vue'; + +export { + ComponentsSection, + DependenciesSection, + DescriptionSection, + EventsSection, + ExampleSection, + LegalSection, + LicenseSection, + PropsSection, + SassVariablesSection, + SlotsSection, + UsageSection, +}; diff --git a/src/documentation/sections/index.ts b/src/documentation/sections/index.ts deleted file mode 100644 index 0b25bbd..0000000 --- a/src/documentation/sections/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import DependenciesComponent from './DependenciesComponent.vue'; -import DescriptionComponent from './DescriptionComponent.vue'; -import EventsComponent from './EventsComponent.vue'; -import ExampleComponent from './ExampleComponent.vue'; -import LegalComponent from './LegalComponent.vue'; -import LicenseComponent from './LicenseComponent.vue'; -import PropsComponent from './PropsComponent.vue'; -import SassVariables from './SassVariables.vue'; -import SlotsComponent from './SlotsComponent.vue'; -import UsageComponent from './UsageComponent.vue'; -import ComponentsSection from './ComponentsSection.vue'; - -export { - ComponentsSection, - DependenciesComponent, - DescriptionComponent, - EventsComponent, - ExampleComponent, - LegalComponent, - LicenseComponent, - PropsComponent, - SassVariables, - SlotsComponent, - UsageComponent, -}; From ee4be77cf5549a414ede39df0c9516ebc4be5edd Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:24:52 -0700 Subject: [PATCH 10/20] Adding and updadting types --- .../{DocsComponent.vue => DocsPage.vue} | 0 .../{ => components}/MenuComponent.vue | 0 src/types/index.ts | 63 ++++++++++++++++++- 3 files changed, 60 insertions(+), 3 deletions(-) rename src/documentation/{DocsComponent.vue => DocsPage.vue} (100%) rename src/documentation/{ => components}/MenuComponent.vue (100%) diff --git a/src/documentation/DocsComponent.vue b/src/documentation/DocsPage.vue similarity index 100% rename from src/documentation/DocsComponent.vue rename to src/documentation/DocsPage.vue diff --git a/src/documentation/MenuComponent.vue b/src/documentation/components/MenuComponent.vue similarity index 100% rename from src/documentation/MenuComponent.vue rename to src/documentation/components/MenuComponent.vue diff --git a/src/types/index.ts b/src/types/index.ts index cb952e6..78a1842 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -21,6 +21,11 @@ import { export type FieldValue = string | boolean | number | object | [] | null | { [key: string]: string | unknown; }; export type TimeOpened = Date | null; +export type GlobalDensity = VCheckbox['$props']['density'] | VSelect['$props']['density'] | VSwitch['$props']['density'] | VTextField['$props']['density'] | VTextarea['$props']['density']; + +export type GlobalVariant = VSelect['$props']['variant'] | VTextField['$props']['variant'] | VTextarea['$props']['variant']; + + // -------------------------------------------------- Props // export interface SharedProps { @@ -49,13 +54,13 @@ export interface SharedProps { iconTrueColor?: string; iconTrueTitle?: string | undefined; icons?: boolean; - item: Record; + item?: Record; label?: string; loadingIcon?: string; loadingIconColor?: string; method?: string; // TODO: Change this to optional. Throw error if using apiRoute and not providing a name. // - name: string; + name?: string; required?: boolean; saveButtonColor?: VBtn['$props']['color']; saveButtonSize?: VBtn['$props']['size']; @@ -63,6 +68,7 @@ export interface SharedProps { saveButtonVariant?: VBtn['$props']['variant']; saveIcon?: string; saveIconColor?: string; + tableField?: boolean; trueValue?: boolean | string; truncateLength?: number | undefined; truncateSuffix?: string | undefined; @@ -108,6 +114,7 @@ export interface VInlineTextareaProps extends Omit { autoGrow?: VTextarea['$props']['autoGrow']; density?: VTextarea['$props']['density']; + rows?: VTextarea['$props']['rows']; rules?: VTextarea['$props']['rules']; variant?: VTextarea['$props']['variant']; } @@ -149,7 +156,46 @@ export interface SaveFieldButtons extends Required | string; + tableField?: SharedProps['tableField']; + }, + ): object; +} + +// ------------------------ Display Value Container // export interface UseDisplayContainerClass { + ( + options: { + density?: GlobalDensity; + field?: Ref | string; + }, + ): object; +} + +export interface UseDisplayInputControlClass { + ( + options: { + density?: GlobalDensity; + variant?: GlobalVariant; + }, + ): object; +} + +export interface UseDisplaySelectionControlClass { + ( + options: { + density?: GlobalDensity; + }, + ): object; +} + +export interface UseDisplayValueClass { ( name: string, valueColor: string, @@ -161,6 +207,17 @@ export interface UseDisplayContainerClass { ): object; } +// ------------------------ Field Container // +export interface UseFieldContainerClass { + ( + options: { + active?: Ref | boolean; + name?: Ref | string; + }, + ): object; +} + +// ------------------------ Other // export interface UseCheckForErrors { ( options: { @@ -174,7 +231,7 @@ export interface UseCheckForErrors { }; } -export interface UseFieldDisplayStyles { +export interface UseDisplayValueStyles { ( options: { color: SharedProps['color']; From ce65af61b00ff738201d13ec64ebd23b696d5fdd Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:25:17 -0700 Subject: [PATCH 11/20] Updating names, adding more methods --- src/plugin/composables/classes.ts | 67 +++++++++++++++++++++++++++++-- src/plugin/composables/styles.ts | 4 +- 2 files changed, 66 insertions(+), 5 deletions(-) diff --git a/src/plugin/composables/classes.ts b/src/plugin/composables/classes.ts index 9484b43..72c92d0 100644 --- a/src/plugin/composables/classes.ts +++ b/src/plugin/composables/classes.ts @@ -1,7 +1,64 @@ -import { UseDisplayContainerClass } from '@/types'; +import { + UseDisplayContainerClass, + UseDisplayInputControlClass, + UseDisplaySelectionControlClass, + UseDisplayValueClass, + UseFieldContainerClass, + UseInlineFieldsContainerClass, +} from '@/types'; import { componentName } from '../utils/globals'; -export const useDisplayContainerClass: UseDisplayContainerClass = (name, valueColor, options) => { + +// ------------------------------------------------ Main Container // +export const useInlineFieldsContainerClass: UseInlineFieldsContainerClass = (options) => { + const { field = '', density = '', tableField = false } = options; + + return { + [`${componentName}--container`]: true, + [`${componentName}--container-inline-${field}`]: true, + [`${componentName}--container-inline-${field}-${density}`]: true, + [`${componentName}--container-inline-table-centered`]: tableField, + }; +}; + + +// ------------------------------------------------ Display Value Container // +export const useDisplayContainerClass: UseDisplayContainerClass = (options) => { + const { field = '', density = '' } = options; + + return { + [`${componentName}`]: true, + [`${componentName}--container-display-container`]: true, + [`${field}`]: true, + 'v-input': true, + [`v-input--density-${density}`]: true, + 'v-input--horizontal': false, + }; +}; + +export const useDisplayInputControlClasses: UseDisplayInputControlClass = (options) => { + const { density = '', variant = '' } = options; + + return { + 'v-input': true, + 'v-input--dirty': true, + 'v-input--horizontal': true, + 'v-text-field': true, + [`v-input--density-${density}`]: true, + [`v-text-field--plain-${variant}`]: true, + }; +}; + +export const useDisplaySelectionControlClasses: UseDisplaySelectionControlClass = (options) => { + const { density = '' } = options; + + return { + 'v-selection-control': true, + [`v-selection-control--density-${density}`]: true, + }; +}; + +export const useDisplayValueClass: UseDisplayValueClass = (name, valueColor, options) => { const { disabled = false, error = false, empty = false } = options; return { @@ -15,7 +72,11 @@ export const useDisplayContainerClass: UseDisplayContainerClass = (name, valueCo }; }; -export const useFieldContainerClass = (name: string, active = false): object => { + +// ------------------------------------------------ Field Container // +export const useFieldContainerClass: UseFieldContainerClass = (options): object => { + const { name, active = false } = options; + return { [`${componentName}`]: true, [`${componentName}--field-value-${name}`]: true, diff --git a/src/plugin/composables/styles.ts b/src/plugin/composables/styles.ts index 0226174..2e04f2b 100644 --- a/src/plugin/composables/styles.ts +++ b/src/plugin/composables/styles.ts @@ -1,8 +1,8 @@ import { CSSProperties } from 'vue'; -import { UseFieldDisplayStyles } from '@/types'; +import { UseDisplayValueStyles } from '@/types'; // -------------------------------------------------- Value Styles // -export const useFieldDisplayStyles: UseFieldDisplayStyles = (options) => { +export const useDisplayValueStyles: UseDisplayValueStyles = (options) => { const { underlineStyle, underlineWidth, color, error, underlined } = options; let { underlineColor } = options; underlineColor = underlineColor || color; From 5080fb542c0d0b2a321b9b472e8ec09dfd138075 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:26:01 -0700 Subject: [PATCH 12/20] Adding class --- src/plugin/components/BooleanIcons.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/plugin/components/BooleanIcons.vue b/src/plugin/components/BooleanIcons.vue index 1fd16d7..8da2be1 100644 --- a/src/plugin/components/BooleanIcons.vue +++ b/src/plugin/components/BooleanIcons.vue @@ -1,16 +1,18 @@ From d8967140a6aa86f491b510e4e5d81a1d594dc69a Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:26:14 -0700 Subject: [PATCH 13/20] Updatding template --- src/playground/configs/PlaygroundPage.template.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/playground/configs/PlaygroundPage.template.vue b/src/playground/configs/PlaygroundPage.template.vue index 1e1b96f..d55fc1a 100644 --- a/src/playground/configs/PlaygroundPage.template.vue +++ b/src/playground/configs/PlaygroundPage.template.vue @@ -21,6 +21,7 @@ :cancel-icon-text="componentOptions.cancelIconText" :close-siblings="componentOptions.closeSiblings" :color="componentOptions.color" + :density="componentOptions.density" :disabled="componentOptions.disabled" :do-not-save="componentOptions.doNotSave" :field-only="componentOptions.fieldOnly" @@ -51,6 +52,7 @@ :cancel-icon-text="componentOptions.cancelIconText" :close-siblings="componentOptions.closeSiblings" :color="componentOptions.color" + :density="componentOptions.density" :disabled="componentOptions.disabled" :do-not-save="componentOptions.doNotSave" :empty-text="componentOptions.emptyText" @@ -72,6 +74,7 @@ :underline-style="componentOptions.underlineStyle" :underline-width="componentOptions.underlineWidth" :underlined="componentOptions.underlined" + :variant="componentOptions.variant" @error="showError = $event" @loading="loading = $event" @update="updatedValue($event, 'select')" @@ -89,6 +92,7 @@ :cancel-icon-text="componentOptions.cancelIconText" :close-siblings="componentOptions.closeSiblings" :color="componentOptions.color" + :density="componentOptions.density" :disabled="componentOptions.disabled" :do-not-save="componentOptions.doNotSave" :field-only="componentOptions.fieldOnly" @@ -105,6 +109,7 @@ :underline-style="componentOptions.underlineStyle" :underline-width="componentOptions.underlineWidth" :underlined="componentOptions.underlined" + :variant="componentOptions.variant" @error="showError = $event" @loading="loading = $event" @update="updatedValue($event, 'text-field')" @@ -121,6 +126,7 @@ :cancel-icon-text="componentOptions.cancelIconText" :close-siblings="componentOptions.closeSiblings" :color="componentOptions.color" + :density="componentOptions.density" :disabled="componentOptions.disabled" :do-not-save="componentOptions.doNotSave" :field-only="componentOptions.fieldOnly" @@ -137,6 +143,7 @@ :underline-style="componentOptions.underlineStyle" :underline-width="componentOptions.underlineWidth" :underlined="componentOptions.underlined" + :variant="componentOptions.variant" @error="showError = $event" @loading="loading = $event" @update="updatedValue($event, 'textarea')" @@ -154,6 +161,7 @@ :cancel-icon-text="componentOptions.cancelIconText" :close-siblings="componentOptions.closeSiblings" :color="componentOptions.color" + :density="componentOptions.density" :disabled="componentOptions.disabled" :do-not-save="componentOptions.doNotSave" :field-only="componentOptions.fieldOnly" @@ -209,6 +217,7 @@ const componentOptions = reactive({ cancelIconText: 'Cancel', closeSiblings: true, color: 'primary', + density: 'compact', disabled: false, doNotSave: false, emptyText: 'empty', @@ -236,6 +245,7 @@ const componentOptions = reactive({ underlineStyle: 'dotted', underlineWidth: '1px', underlined: true, + variant: 'underlined', }); const headers = [ @@ -249,7 +259,7 @@ const headers = [ align: 'start', key: 'active', title: 'Active', - width: 100, + width: 125, }, { align: 'start', From acda0f88571145aa34b650d863f320eedc18fbd3 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:26:27 -0700 Subject: [PATCH 14/20] Addign props --- src/plugin/utils/props.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/plugin/utils/props.ts b/src/plugin/utils/props.ts index 4f21cff..02641b4 100644 --- a/src/plugin/utils/props.ts +++ b/src/plugin/utils/props.ts @@ -57,6 +57,9 @@ export const sharedProps = { // ? The column name of the field - [ All Fields ] // name: '', + // ? If the field is used in a table this will remove the top padding // + tableField: true, + // ? The color of the underline - [ All Fields ] // underlineColor: 'primary', @@ -210,6 +213,9 @@ const textareaProps = { // ? Automatically grow the textarea depending on amount of text // autoGrow: true, + // ? The height of the textarea when autoGrow is false // + rows: 1, + // ? The variant of the field // variant: 'underlined' as const, }, From 78d1f99cf5375a3565cc37c771f62770e24b7e35 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:26:58 -0700 Subject: [PATCH 15/20] Updating classes and styles to fix table cell alignment quirks --- src/plugin/VInlineCheckbox.vue | 197 ++++++++++++++++++-------------- src/plugin/VInlineSelect.vue | 191 ++++++++++++++++++------------- src/plugin/VInlineSwitch.vue | 196 +++++++++++++++++-------------- src/plugin/VInlineTextField.vue | 187 +++++++++++++++++------------- src/plugin/VInlineTextarea.vue | 185 +++++++++++++++++------------- src/plugin/styles/main.scss | 135 +++++++++++++++++++++- 6 files changed, 685 insertions(+), 406 deletions(-) diff --git a/src/plugin/VInlineCheckbox.vue b/src/plugin/VInlineCheckbox.vue index dabb4be..2c40bee 100644 --- a/src/plugin/VInlineCheckbox.vue +++ b/src/plugin/VInlineCheckbox.vue @@ -1,89 +1,95 @@ @@ -102,10 +108,13 @@ import { useToggleField, } from './composables/methods'; import { - useFieldContainerClass, useDisplayContainerClass, + useDisplaySelectionControlClasses, + useDisplayValueClass, + useFieldContainerClass, + useInlineFieldsContainerClass, } from './composables/classes'; -import { useFieldDisplayStyles } from './composables/styles'; +import { useDisplayValueStyles } from './composables/styles'; import inlineEmits from './utils/emits'; @@ -130,8 +139,27 @@ const displayValue = computed(() => { // ------------------------------------------------ Class & Styles // -const fieldContainerClass = computed(() => useFieldContainerClass('checkbox', showField.value)); -const fieldDisplayClass = computed(() => useDisplayContainerClass( +const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ + density: settings.density, + field: 'v-checkbox', + tableField: settings.tableField, +})); + +const displayContainerClass = computed(() => useDisplayContainerClass({ + density: settings.density, + field: 'v-checkbox', +})); + +const displaySelectionControlClasses = useDisplaySelectionControlClasses({ + density: settings.density, +}); + +const fieldContainerClass = computed(() => useFieldContainerClass({ + active: showField.value, + name: 'checkbox', +})); + +const displayValueClass = computed(() => useDisplayValueClass( 'checkbox', settings.valueColor, { @@ -139,7 +167,8 @@ const fieldDisplayClass = computed(() => useDisplayContainerClass( error, } )); -const fieldDisplayStyle = computed(() => useFieldDisplayStyles({ + +const displayValueStyle = computed(() => useDisplayValueStyles({ color: settings.color, error, underlineColor: settings.underlineColor, diff --git a/src/plugin/VInlineSelect.vue b/src/plugin/VInlineSelect.vue index 5b76aa6..ef11345 100644 --- a/src/plugin/VInlineSelect.vue +++ b/src/plugin/VInlineSelect.vue @@ -1,83 +1,88 @@ @@ -98,10 +103,13 @@ import { useToggleField, } from './composables/methods'; import { - useFieldContainerClass, useDisplayContainerClass, + useDisplayInputControlClasses, + useDisplayValueClass, + useFieldContainerClass, + useInlineFieldsContainerClass, } from './composables/classes'; -import { useFieldDisplayStyles } from './composables/styles'; +import { useDisplayValueStyles } from './composables/styles'; import inlineEmits from './utils/emits'; @@ -143,8 +151,28 @@ watchEffect(() => { // ------------------------------------------------ Class & Styles // -const fieldContainerClass = computed(() => useFieldContainerClass('select', showField.value)); -const fieldDisplayClass = computed(() => useDisplayContainerClass( +const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ + density: settings.density, + field: 'v-select', + tableField: settings.tableField, +})); + +const displayContainerClass = computed(() => useDisplayContainerClass({ + density: settings.density, + field: 'v-select', +})); + +const displayInputControlClasses = useDisplayInputControlClasses({ + density: settings.density, + variant: settings.variant, +}); + +const fieldContainerClass = computed(() => useFieldContainerClass({ + active: showField.value, + name: 'select', +})); + +const displayValueClass = computed(() => useDisplayValueClass( 'select', settings.valueColor, { @@ -153,7 +181,8 @@ const fieldDisplayClass = computed(() => useDisplayContainerClass( error, } )); -const fieldDisplayStyle = computed(() => useFieldDisplayStyles({ + +const displayValueStyle = computed(() => useDisplayValueStyles({ color: settings.color, error, underlineColor: settings.underlineColor, diff --git a/src/plugin/VInlineSwitch.vue b/src/plugin/VInlineSwitch.vue index fb7ac68..33edf75 100644 --- a/src/plugin/VInlineSwitch.vue +++ b/src/plugin/VInlineSwitch.vue @@ -1,90 +1,95 @@ @@ -103,10 +108,13 @@ import { useToggleField, } from './composables/methods'; import { - useFieldContainerClass, useDisplayContainerClass, + useDisplaySelectionControlClasses, + useDisplayValueClass, + useFieldContainerClass, + useInlineFieldsContainerClass, } from './composables/classes'; -import { useFieldDisplayStyles } from './composables/styles'; +import { useDisplayValueStyles } from './composables/styles'; import inlineEmits from './utils/emits'; @@ -131,8 +139,27 @@ const displayValue = computed(() => { // ------------------------------------------------ Class & Styles // -const fieldContainerClass = computed(() => useFieldContainerClass('switch', showField.value)); -const fieldDisplayClass = computed(() => useDisplayContainerClass( +const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ + density: settings.density, + field: 'v-switch', + tableField: settings.tableField, +})); + +const displayContainerClass = computed(() => useDisplayContainerClass({ + density: settings.density, + field: 'v-switch', +})); + +const displaySelectionControlClasses = useDisplaySelectionControlClasses({ + density: settings.density, +}); + +const fieldContainerClass = computed(() => useFieldContainerClass({ + active: showField.value, + name: 'switch', +})); + +const displayValueClass = computed(() => useDisplayValueClass( 'switch', settings.valueColor, { @@ -140,7 +167,8 @@ const fieldDisplayClass = computed(() => useDisplayContainerClass( error, } )); -const fieldDisplayStyle = computed(() => useFieldDisplayStyles({ + +const displayValueStyle = computed(() => useDisplayValueStyles({ color: settings.color, error, underlineColor: settings.underlineColor, diff --git a/src/plugin/VInlineTextField.vue b/src/plugin/VInlineTextField.vue index d79594a..b68583c 100644 --- a/src/plugin/VInlineTextField.vue +++ b/src/plugin/VInlineTextField.vue @@ -1,80 +1,87 @@ @@ -95,10 +102,13 @@ import { useTruncateText, } from './composables/methods'; import { - useFieldContainerClass, useDisplayContainerClass, + useDisplayInputControlClasses, + useDisplayValueClass, + useFieldContainerClass, + useInlineFieldsContainerClass, } from './composables/classes'; -import { useFieldDisplayStyles } from './composables/styles'; +import { useDisplayValueStyles } from './composables/styles'; import inlineEmits from './utils/emits'; @@ -140,8 +150,28 @@ const displayValue = computed(() => { // ------------------------------------------------ Class & Styles // -const fieldContainerClass = computed(() => useFieldContainerClass('text-field', showField.value)); -const fieldDisplayClass = computed(() => useDisplayContainerClass( +const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ + density: settings.density, + field: 'v-text-field', + tableField: settings.tableField, +})); + +const displayContainerClass = computed(() => useDisplayContainerClass({ + density: settings.density, + field: 'v-text-field', +})); + +const displayInputControlClasses = useDisplayInputControlClasses({ + density: settings.density, + variant: settings.variant, +}); + +const fieldContainerClass = computed(() => useFieldContainerClass({ + active: showField.value, + name: 'text-field', +})); + +const displayValueClass = computed(() => useDisplayValueClass( 'text-field', settings.valueColor, { @@ -150,7 +180,8 @@ const fieldDisplayClass = computed(() => useDisplayContainerClass( error, } )); -const fieldDisplayStyle = computed(() => useFieldDisplayStyles({ + +const displayValueStyle = computed(() => useDisplayValueStyles({ color: settings.color, error, underlineColor: settings.underlineColor, diff --git a/src/plugin/VInlineTextarea.vue b/src/plugin/VInlineTextarea.vue index 1a2805a..c466e5f 100644 --- a/src/plugin/VInlineTextarea.vue +++ b/src/plugin/VInlineTextarea.vue @@ -1,79 +1,86 @@ @@ -94,10 +101,13 @@ import { useTruncateText, } from './composables/methods'; import { - useFieldContainerClass, useDisplayContainerClass, + useDisplayInputControlClasses, + useDisplayValueClass, + useFieldContainerClass, + useInlineFieldsContainerClass, } from './composables/classes'; -import { useFieldDisplayStyles } from './composables/styles'; +import { useDisplayValueStyles } from './composables/styles'; import inlineEmits from './utils/emits'; @@ -139,8 +149,28 @@ const displayValue = computed(() => { // ------------------------------------------------ Class & Styles // -const fieldContainerClass = computed(() => useFieldContainerClass('textarea', showField.value)); -const fieldDisplayClass = computed(() => useDisplayContainerClass( +const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ + density: settings.density, + field: 'v-textarea', + tableField: settings.tableField, +})); + +const displayContainerClass = computed(() => useDisplayContainerClass({ + density: settings.density, + field: 'v-textarea', +})); + +const displayInputControlClasses = useDisplayInputControlClasses({ + density: settings.density, + variant: settings.variant, +}); + +const fieldContainerClass = computed(() => useFieldContainerClass({ + active: showField.value, + name: 'textarea', +})); + +const displayValueClass = computed(() => useDisplayValueClass( 'textarea', settings.valueColor, { @@ -149,7 +179,8 @@ const fieldDisplayClass = computed(() => useDisplayContainerClass( error, } )); -const fieldDisplayStyle = computed(() => useFieldDisplayStyles({ + +const displayValueStyle = computed(() => useDisplayValueStyles({ color: settings.color, error, underlineColor: settings.underlineColor, diff --git a/src/plugin/styles/main.scss b/src/plugin/styles/main.scss index db87cbd..d881a47 100644 --- a/src/plugin/styles/main.scss +++ b/src/plugin/styles/main.scss @@ -1,7 +1,121 @@ +:root { + --v-inline-fields-top-padding-compact: 13px; + --v-inline-fields-top-padding-comfortable: 17px; + --v-inline-fields-top-padding-default: 21px; +} + .v-inline-fields { + &--container { + &-inline { + + // tableField prop // + &-table-centered { + --v-inline-fields-top-padding-compact: 0; + --v-inline-fields-top-padding-comfortable: 0; + --v-inline-fields-top-padding-default: 0; + + .v-inline-fields--field-value-text-field { + .v-input--density-compact { + + // Variants - plain & underlined // + .v-field--variant-plain, + .v-field--variant-underlined { + .v-field__input { + min-height: unset !important; + padding-bottom: 0; + padding-top: 3px; + } + } + } + + .v-input--density-comfortable { + + // Variants - plain & underlined // + .v-field--variant-plain, + .v-field--variant-underlined { + .v-field__input { + min-height: unset !important; + padding-bottom: 0; + padding-top: 2px; + } + } + } + + .v-input--density-default { + + // Variants - plain & underlined // + .v-field--variant-plain, + .v-field--variant-underlined { + .v-field__input { + min-height: unset !important; + padding-bottom: 0; + padding-top: 1px; + } + } + } + } + } + + // Checkbox & Switch // + &-v-checkbox, + &-v-switch { + &-compact { + padding-top: var(--v-inline-fields-top-padding-compact); + } + + &-comfortable { + padding-top: var(--v-inline-fields-top-padding-comfortable); + } + + &-default { + padding-top: var(--v-inline-fields-top-padding-default); + } + + .v-selection-control { + padding-bottom: 1px; + } + } + + // Select & Textarea & Text Field // + &-v-select, + &-v-textarea, + &-v-text-field { + &-compact { + .v-inline-fields--container-display-container-fields { + padding-top: var(--v-inline-fields-top-padding-compact); + + > div { + line-height: 1.5rem; + } + } + } + + &-comfortable { + .v-inline-fields--container-display-container-fields { + padding-top: var(--v-inline-fields-top-padding-comfortable); + + > div { + padding-bottom: 0; + } + } + } + + &-default { + .v-inline-fields--container-display-container-fields { + padding-top: var(--v-inline-fields-top-padding-default); + + > div { + line-height: 1.5rem; + padding-bottom: 5px; + } + } + } + } + } + } + &--display { &-value { - border-bottom-width: 10px; cursor: pointer; &-empty { @@ -12,14 +126,24 @@ } &--field-value { - &-checkbox { + + // Checkbox & Switch // + &-checkbox, + &-switch { .v-input { + display: flex; + &__append { margin-left: 0; } } + + :deep(.v-input__control) { + display: inline-flex !important; + } } + // Select & Textarea & Text Field // &-select, &-textarea, &-text-field { @@ -41,4 +165,11 @@ &--save-fields-container { height: 100%; } + + &--boolean-icons { + font-size: calc(var(--v-icon-size-multiplier) * 1em); + font-weight: bold; + line-height: 1.5rem; + padding-bottom: 2px; + } } From 49ad0d88b7a501f72b5a005407d97c5a4a91d3d5 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:27:18 -0700 Subject: [PATCH 16/20] Updating docs --- src/stores/menu.ts | 26 ++++++++++++++++---------- src/stores/props.ts | 14 +++++++++++++- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/stores/menu.ts b/src/stores/menu.ts index 8280501..cbf0d72 100644 --- a/src/stores/menu.ts +++ b/src/stores/menu.ts @@ -10,37 +10,43 @@ export const useMenuStore = defineStore('menu', () => { { href: '#components-v-inline-checkbox', icon: 'mdi:mdi-checkbox-outline', - key: 'v-checkbox', + key: 'v-inline-checkbox', link: `${links.vuetify}en/api/v-checkbox/`, - title: 'VCheckbox', + title: 'VInlineCheckbox', + topTitle: 'VCheckbox', + }, { href: '#components-v-inline-select', icon: 'mdi:mdi-format-list-bulleted', - key: 'v-select', + key: 'v-inline-select', link: `${links.vuetify}en/api/v-select/`, - title: 'VSelect', + title: 'VInlineSelect', + topTitle: 'VSelect', }, { href: '#components-v-inline-switch', icon: 'mdi:mdi-toggle-switch-off-outline', - key: 'v-switch', + key: 'v-inline-switch', link: `${links.vuetify}en/api/v-switch/`, - title: 'VSwitch', + title: 'VInlineSwitch', + topTitle: 'VSwitch', }, { href: '#components-v-inline-textarea', icon: 'mdi:mdi-text-long', - key: 'v-textarea', + key: 'v-inline-textarea', link: `${links.vuetify}en/api/v-textarea/`, - title: 'VTextarea', + title: 'VInlineTextarea', + topTitle: 'VTextarea', }, { href: '#components-v-inline-text-field', icon: 'mdi:mdi-minus', - key: 'v-text-field', + key: 'v-inline-text-field', link: `${links.vuetify}en/api/v-text-field/`, - title: 'VTextField', + title: 'VInlineTextField', + topTitle: 'VTextField', }, ]; diff --git a/src/stores/props.ts b/src/stores/props.ts index 40e01a4..226a4b0 100644 --- a/src/stores/props.ts +++ b/src/stores/props.ts @@ -159,10 +159,16 @@ const sharedProps = [ }, { default: 'undefined', - desc: "Sets the component's name attribute.", + desc: "Sets the component's name attribute", name: 'name', type: 'string', }, + { + default: true, + desc: 'Adjusts padding to help the field to be vertically centered in the table cell', + name: 'tableField', + type: 'boolean', + }, { default: 'primary', desc: `${colorDesc} display value underline`, @@ -463,6 +469,12 @@ const vInlineTextareaProps = [ name: 'density', type: "VTextarea['$props']['density']", }, + { + default: 1, + desc: 'Default row count', + name: 'rows', + type: "VTextarea['$props']['rows']", + }, { default: 'underlined', desc: `${variantDesc} component`, From 12d36ca34a905b98bddf2bde7acab3245910e3e0 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 3 Jun 2023 19:27:35 -0700 Subject: [PATCH 17/20] Adjusting names --- src/App.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index 064d9f7..4c962e7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -17,7 +17,7 @@ - + @@ -27,8 +27,8 @@