GithubHelp home page GithubHelp logo

webdevnerdstuff / vuetify-inline-fields Goto Github PK

View Code? Open in Web Editor NEW
21.0 3.0 1.0 28.66 MB

Vuetify Inline Fields Component Library offers a comprehensive collection of reusable UI components to create elegant and efficient inline form fields within your applications.

Home Page: https://webdevnerdstuff.github.io/vuetify-inline-fields/

License: MIT License

HTML 0.87% Vue 48.27% TypeScript 37.61% CSS 0.58% JavaScript 9.06% Shell 0.34% SCSS 3.27%
vue vuetify vuetify3 component fields form inline vue3 vuejs inline-fields

vuetify-inline-fields's Introduction

Vuetify Logo

Vuetify Inline Fields

NPM Package   @WebDevNerdStuff

Description

Vuetify Inline Fields Component Library offers a comprehensive collection of reusable UI components designed to create elegant and efficient inline form fields within your applications. With seamless integration into Vuetify's UI framework and a wide range of customizable options, developers can effortlessly incorporate inline fields that perfectly align with their application's needs.

Additionally, this library provides enhanced integration specifically tailored for usage within data tables. Developers can seamlessly integrate inline form fields directly into their data table cells, facilitating efficient inline editing and data manipulation. This feature empowers users to make changes directly within the table, streamlining the editing process and improving productivity.

Installation

Using pnpm:

pnpm add @wdns/vuetify-inline-fields

Using npm:

npm i @wdns/vuetify-inline-fields

Documentation

Documentation & Demo

Dependencies

Vuetify v3
Vue 3
VueUse

Change Log

CHANGELOG

License

Copyright (c) 2023 WebDevNerdStuff
Licensed under the MIT license.

Legal

Vuetify and the Vuetify logo are trademarks of Vuetify. This component was not created or endorsed by Vuetify.

vuetify-inline-fields's People

Contributors

dependabot[bot] avatar kingyue737 avatar webdevnerdstuff avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

kingyue737

vuetify-inline-fields's Issues

setupContext error

Faced with this error after installation.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'setupContext')
at getContext (vuetify-inline-fields.js?v=e4c5f66a:2846:12)
at useAttrs (vuetify-inline-fields.js?v=e4c5f66a:2805:10)
at setup (vuetify-inline-fields.js?v=e4c5f66a:8225:51)

[Bug]: VInlineSelect is changing reactive value from null to empty string on mount

Bug description

I'm passing a prop called 'item' to a separate component containing a VInlineSelect.

Some of the fields inside this prop are null by default (default value in my database is null).

When passing this prop the the VInlineSelect component, the value of the field I'm using inside the component is changed from null to an empty string (on mount).

Resulting in watchers and @update:modelValue getting triggered on mount, when the value isn't actually getting changed by the user.

This (as far is I know) not the default behavior of the v-select component.

Steps to reproduce

  1. Create a component with a VInlineSelect element.
  2. Pass a prop to the component (in my case: an object with various fields that can be null)
  3. Use the item prop with the VInlineSelect element.
  4. Add a watcher to item prop or to a certain field of that item
  5. Reload your page and check your console
<template>
  <VInlineSelect
    :model-value="props.item"
    @update:modelValue="(val) => (props.item.input_group = val)"
    item-title="input_group"
    item-value="input_group"
    :items="['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']"
    name="state"
    cell
    :empty-text="undefined"
    return-object
  ></VInlineSelect>
</template>

<script setup>
const props = defineProps({
  item: Object,
});

watch(
  () => props.item.input_group,
  (val) => {
    console.log(val);
  }
);
</script>

Relevant log output

No response

Reproduction link

/

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[Bug]: Save button not working in Nuxt3 projects

Bug description

The save button is not working in Nuxt3.
Nothing really happens, the fields stays open and there are no errors.

I've tested this on a VInlineTextField and VInlineTextArea component.
I assume it's also an issue on the other components.

Please check out the Stackblitz project below.

Steps to reproduce

  1. Create a new Nuxt3 project
  2. Add Vuetify and Vuetify Inline Fields as plugins
  3. Add a Vuetify Inline Fields component
  4. Try saving a new value

Relevant log output

No response

Reproduction link

https://stackblitz.com/edit/github-jk7sle?file=app.vue

Additional context

Enabling defineModel in nuxt.config.ts does not resolve the issue.

vite: { vue: { script: { defineModel: true, }, }, },

Code of Conduct

  • I agree to follow this project's Code of Conduct

[Bug]: Cannot read properties of null (reading 'setupContext')

Bug description

an Uncaught TypeError is thrown: Cannot read properties of null (reading 'setupContext')
"vuetify": "3.2.5",
"vue": "3.2.31",
typescript, composition API

Steps to reproduce

  1. Install using npm package manager
  2. Load all components into App
  3. Use VInlineTextField in the server data table item slot

Relevant log output

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'setupContext')
    at getContext (runtime-core.esm-bundler.js:3200:12)
    at useAttrs (runtime-core.esm-bundler.js:3159:10)
    at setup (vuetify-inline-fields.es.js:3114:45)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7056:29)
    at setupComponent (runtime-core.esm-bundler.js:7012:11)
    at mountComponent (runtime-core.esm-bundler.js:4922:13)
    at processComponent (runtime-core.esm-bundler.js:4897:17)
    at patch (runtime-core.esm-bundler.js:4489:21)
    at mountChildren (runtime-core.esm-bundler.js:4685:13)
getContext @ runtime-core.esm-bundler.js:3200
useAttrs @ runtime-core.esm-bundler.js:3159
setup @ vuetify-inline-fields.es.js:3114
callWithErrorHandling @ runtime-core.esm-bundler.js:155
setupStatefulComponent @ runtime-core.esm-bundler.js:7056
setupComponent @ runtime-core.esm-bundler.js:7012
mountComponent @ runtime-core.esm-bundler.js:4922
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
mountChildren @ runtime-core.esm-bundler.js:4685
processFragment @ runtime-core.esm-bundler.js:4856
patch @ runtime-core.esm-bundler.js:4482
mountChildren @ runtime-core.esm-bundler.js:4685
mountElement @ runtime-core.esm-bundler.js:4594
processElement @ runtime-core.esm-bundler.js:4566
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5037
run @ reactivity.esm-bundler.js:167
setupRenderEffect @ runtime-core.esm-bundler.js:5156
mountComponent @ runtime-core.esm-bundler.js:4939
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
mountChildren @ runtime-core.esm-bundler.js:4685
processFragment @ runtime-core.esm-bundler.js:4856
patch @ runtime-core.esm-bundler.js:4482
mountChildren @ runtime-core.esm-bundler.js:4685
mountElement @ runtime-core.esm-bundler.js:4594
processElement @ runtime-core.esm-bundler.js:4566
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5037
run @ reactivity.esm-bundler.js:167
setupRenderEffect @ runtime-core.esm-bundler.js:5156
mountComponent @ runtime-core.esm-bundler.js:4939
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
mountChildren @ runtime-core.esm-bundler.js:4685
processFragment @ runtime-core.esm-bundler.js:4856
patch @ runtime-core.esm-bundler.js:4482
patchKeyedChildren @ runtime-core.esm-bundler.js:5298
patchChildren @ runtime-core.esm-bundler.js:5205
processFragment @ runtime-core.esm-bundler.js:4886
patch @ runtime-core.esm-bundler.js:4482
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
processFragment @ runtime-core.esm-bundler.js:4886
patch @ runtime-core.esm-bundler.js:4482
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
processFragment @ runtime-core.esm-bundler.js:4886
patch @ runtime-core.esm-bundler.js:4482
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
processFragment @ runtime-core.esm-bundler.js:4886
patch @ runtime-core.esm-bundler.js:4482
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
callWithErrorHandling @ runtime-core.esm-bundler.js:155
flushJobs @ runtime-core.esm-bundler.js:394
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:285
queueJob @ runtime-core.esm-bundler.js:279
(anonymous) @ runtime-core.esm-bundler.js:5139
triggerEffects @ reactivity.esm-bundler.js:359
triggerRefValue @ reactivity.esm-bundler.js:957
set value @ reactivity.esm-bundler.js:1001
SET_EMPLOYER_GROUPS @ employerGroups.ts:55
fetchEmployerGroups @ employerGroups.ts:24
await in fetchEmployerGroups (async)
(anonymous) @ pinia.esm-browser.js:1277
employerGroupsRequest @ ClientEmployerGroups.vue:32
paramsUpdatedHandler @ ClientEmployerGroups.vue:37
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
emit$1 @ runtime-core.esm-bundler.js:718
(anonymous) @ runtime-core.esm-bundler.js:7232
_createVNode.onUpdate:options._cache.<computed>._cache.<computed> @ EmployerGroupList.vue:31
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
emit$1 @ runtime-core.esm-bundler.js:718
watch.deep @ options.ts:40
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
job @ runtime-core.esm-bundler.js:1779
doWatch @ runtime-core.esm-bundler.js:1824
watch @ runtime-core.esm-bundler.js:1665
useOptions @ options.ts:38
setup @ VDataTableServer.tsx:80
setup @ defineComponent.tsx:116
callWithErrorHandling @ runtime-core.esm-bundler.js:155
setupStatefulComponent @ runtime-core.esm-bundler.js:7056
setupComponent @ runtime-core.esm-bundler.js:7012
mountComponent @ runtime-core.esm-bundler.js:4922
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
mountChildren @ runtime-core.esm-bundler.js:4685
mountElement @ runtime-core.esm-bundler.js:4594
processElement @ runtime-core.esm-bundler.js:4566
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5037
run @ reactivity.esm-bundler.js:167
setupRenderEffect @ runtime-core.esm-bundler.js:5156
mountComponent @ runtime-core.esm-bundler.js:4939
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
mountChildren @ runtime-core.esm-bundler.js:4685
processFragment @ runtime-core.esm-bundler.js:4856
patch @ runtime-core.esm-bundler.js:4482
mountChildren @ runtime-core.esm-bundler.js:4685
mountElement @ runtime-core.esm-bundler.js:4594
processElement @ runtime-core.esm-bundler.js:4566
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5037
run @ reactivity.esm-bundler.js:167
setupRenderEffect @ runtime-core.esm-bundler.js:5156
mountComponent @ runtime-core.esm-bundler.js:4939
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
componentUpdateFn @ runtime-core.esm-bundler.js:5037
run @ reactivity.esm-bundler.js:167
setupRenderEffect @ runtime-core.esm-bundler.js:5156
mountComponent @ runtime-core.esm-bundler.js:4939
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
componentUpdateFn @ runtime-core.esm-bundler.js:5037
run @ reactivity.esm-bundler.js:167
setupRenderEffect @ runtime-core.esm-bundler.js:5156
mountComponent @ runtime-core.esm-bundler.js:4939
processComponent @ runtime-core.esm-bundler.js:4897
patch @ runtime-core.esm-bundler.js:4489
mountChildren @ runtime-core.esm-bundler.js:4685
processFragment @ runtime-core.esm-bundler.js:4856
patch @ runtime-core.esm-bundler.js:4482
patchKeyedChildren @ runtime-core.esm-bundler.js:5403
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
processFragment @ runtime-core.esm-bundler.js:4886
patch @ runtime-core.esm-bundler.js:4482
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
patchKeyedChildren @ runtime-core.esm-bundler.js:5262
patchChildren @ runtime-core.esm-bundler.js:5205
patchElement @ runtime-core.esm-bundler.js:4721
processElement @ runtime-core.esm-bundler.js:4569
patch @ runtime-core.esm-bundler.js:4486
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
updateComponent @ runtime-core.esm-bundler.js:4968
processComponent @ runtime-core.esm-bundler.js:4901
patch @ runtime-core.esm-bundler.js:4489
patchBlockChildren @ runtime-core.esm-bundler.js:4806
processFragment @ runtime-core.esm-bundler.js:4867
patch @ runtime-core.esm-bundler.js:4482
componentUpdateFn @ runtime-core.esm-bundler.js:5107
run @ reactivity.esm-bundler.js:167
callWithErrorHandling @ runtime-core.esm-bundler.js:155
flushJobs @ runtime-core.esm-bundler.js:394
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:285
queueJob @ runtime-core.esm-bundler.js:279
(anonymous) @ runtime-core.esm-bundler.js:5139
triggerEffects @ reactivity.esm-bundler.js:359
triggerRefValue @ reactivity.esm-bundler.js:957
set value @ reactivity.esm-bundler.js:1001
set @ reactivity.esm-bundler.js:1016
_createVNode.onUpdate:modelValue._cache.<computed>._cache.<computed> @ Client.vue:141
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
emit$1 @ runtime-core.esm-bundler.js:718
set @ proxiedModel.ts:59
set value @ reactivity.esm-bundler.js:1106
onUpdate:modelValue @ VTabs.tsx:93
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
emit$1 @ runtime-core.esm-bundler.js:718
set @ proxiedModel.ts:59
set value @ reactivity.esm-bundler.js:1106
select @ group.ts:252
toggle @ group.ts:140
onClick @ VBtn.tsx:139
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
invoker @ runtime-dom.esm-bundler.js:366

Reproduction link

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.