Comments (6)
This is a good proposal @jd-solanki ! π
I couldn't agree more with the 3 problems you stated above.
Although shadcn-vue
provides a good low level way of constructing a component, however I find it difficult for beginner dev or anyone to "just use" the component with props/event/slot ready.
I had a similar idea in mind to create a UI library that handle this exact problem, which is to provide high level components, and at the same time low level (Radix Vue) component with a consistent theming capabilities.
And with your suggestion of framework guidelines with consistent naming convention, I believe that would reduce the fear of updating major version. π
I do however foresee some challenges regarding implementing a framework guidelines that would be adopt by every framework, but we can definitely start somewhere!
from anu.
Hi, Thanks for the write, I agree with most of the things you mentioned here but one "Mix low-level and high-level API/props"
https://mui.com/material-ui/react-alert/
Component Per Node
is the way β
https://github.com/mui/material-ui/discussions/41085
Mixed props and low-level components β
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>
<template>
<!-- how can I change font-size of description without touching the actual component -->
<Alert title="Heads up!" description="..." />
<!-- this will cause confusion -->
<Alert title="Heads up!" description="...">
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>...</AlertDescription>
</Alert>
</template>
Slots this is not the way
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>
<template>
<Alert :classes="{ root: { class: 'text-red-900' }, title: { class: 'text-red-800' } }">
<template #title>
Heads up!
</template>
<template #description>
...
</template>
<template #icon>...</template>
</Alert>
<Alert>
<template #icon>...</template>
<AlertTitle class="text-red-800">Heads up!</AlertTitle>
<AlertDescription class="bg-green-600">...</AlertDescription>
</Alert>
</template>
We don't need 10 frameworks that does the same thing differently but 1 framework that does things accurately
I can relate to that quote.
Also every UI framework has its own way of doing the code
- Vue script setup
- Vue defineComponent Composition API
- Vue defineComponent Option API
- Vue export default
- TS and defineComponent setup return
- TS and defineComponent Option API render
- TSX and Option API
- TSX and Composition API
- VueVine
- and Whole other possible ways/style of using Vue
Although defineProps
doesn't support node_modules external extended complex types and I'm not fan of defineEmits
, for UI frameworks/libs it's better to stick to the Vue script setup
syntax cause it is more friendly syntax for beginner dev
from anu.
Readers of this issue might be interested in this new repo, Check README.
from anu.
@jd-solanki I'd recommend putting a node at the top of the official docs and GitHub repo to tell people about the state of the ui framework, so they don't start a brand new project with it.
from anu.
Today, I had another thought π
I'll address these issues in framework guidelines/solutions
-
As the framework evolve, Framework author might rename prop, slot or component itself due to name normalization (like initially author introduce
data
prop for table rows but later they deciderows
will be much more better name and rename the prop, Woah you have broken code π¬). There might be case where even component can be renamed in cases where component name is confusing,Sidebar
=>Offcanvas
/SlideOver
. -
There can also be case where prop's value get transformed. Like for list item we can have
icon="i-mdi-home"
initially but later we get option for configuring size as well:icon="{ name: 'i-mdi-home', size: 24 }"
from anu.
Every upgrade to the current front-end project, be it a UI library or tool chain, is a disaster
from anu.
Related Issues (20)
- feat: chip closable advance HOT 2
- Styles are not loaded in the latest Nuxt HOT 7
- [docs] Components such as Select and Radio in the document cannot interact HOT 1
- svelte support HOT 1
- nuxt - anu-vue/volar HOT 3
- update vueuse peerDependencies
- WARN [unocss] include option is deprecated, use content.pipeline.include instead. HOT 2
- Tabs border does not respond to window size change HOT 1
- [unocss] include option is deprecated, use content.pipeline.include instead. But, I didn't use include.
- Colors broken with UnoCSS v0.57 HOT 7
- Have a Bug in the switch component? HOT 3
- typescript types errorοΌ HOT 2
- update vue peerDependencies HOT 1
- How the selection box sets the properties of the display HOT 1
- [Select] Feature request: Groups for the select element
- v1
- List component unusable with TypeScript HOT 4
- ADatatable : event on clicked / hovered
- Style conflict vitepress HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from anu.