fect-org / fect Goto Github PK
View Code? Open in Web Editor NEWMinimalist UI components built on Vue-next
Home Page: https://www.fect-org.com
License: MIT License
Minimalist UI components built on Vue-next
Home Page: https://www.fect-org.com
License: MIT License
May it support before 1.5.0 .
https://codesandbox.io/s/flamboyant-cache-wz5n8?file=/src/App.vue
[email protected]
@fect-ui/[email protected]
{ min: '900px', max: '1280px' }
时,宽度为6
{ min: '900px', max: '1280px' }
时,宽度仍为12
()=><Form model={ { } }>
<FormItem prop="do" label="thing">
<Input />
</FormItem>
</Form>
The form component should not be too complicated .
fect
. If you find, please contact me.1.3.x
.Add Tree component
1.0.3版本已经发布快一个月了,是否有计划在发布1.0.4版本之前添加树形组件呢?期待树形组件的加入。
Inspired by #166
theme-provide
webpack
.<fe-theme-provide
style={{
'button-primary-color': '#fff'
}}
>
<App />
</fe-theme-provide>
Now I need to write the resolver manually, but I don't know if the code is wrong
function FectUiResolver(): ComponentResolver {
return {
type: 'component',
resolve: (name: string) => {
if (name.match(/^(Fe[A-Z]|fe-[a-z])/)) {
return {
name: name.replace(/^(Fe|fe-)/, ''),
from: '@fect-ui/vue'
};
}
}
};
}
import FectUiResolver from '@fect-ui/vue/resolver'
// config
{
plugins: [
AutoImport({
resolvers: [FectUiResolver()]
}),
Components({
resolvers: [FectUiResolver()]
}),
]
}
WIP
docs
return {
[`--fect-${key}-grow`]: 0,
[`--fect-${key}-display`]: display,
[`--fect-${key}-width`]: `${ratio}`,
[`--fect-${key}-basis`]: `${ratio}`,
}
Variables ratio can be used directly in grid/grid.tsx.
https://codesandbox.io/s/recursing-franklin-k6mzly?file=/src/App.vue
@fect-ui/[email protected]
卡片的边框和边距样式缺失,开发者工具调试未找到对应的css变量
docs
Add a virtual list compoent for display block elements.Improve interactive experience
import { List } from '@fect-ui/vue'
( )=> <List data={mockData} limit={5} />
expect is easy use.
Util now, fect has been iterate for nearly a year, And our neighbor geist
has already enterd the Sclae
system.
It is undeniable that scale
system is a good enough ux
design solution. So, I want to add scale
for fect
.
1.6
or 2.0
.attr
bind to avoid more damage.下拉框无法正常显示
Demo: https://codesandbox.io/s/fect-ui--multi-select-t8wb0y
"@fect-ui/vue": "1.3.6"
"vue": "^3.2.25"
Chrome 版本 98.0.4758.102(正式版本) (64 位)
styles
🛠️Stacking issue when using multiple select in modal
"@fect-ui/vue": "1.2.1"
Microsoft Edge 97
https://codesandbox.io/s/fect-ui--multi-select-modal-lm9de?file=/src/App.vue
在使用VueCli创建的项目中导入安装组件使用没有生效。
FectUI版本1.0.3,Vue版本3.0.0.
使用环境为Mac,Chrome浏览器。
@fect-ui/[email protected]
[email protected]
手动修改active绑定的变量可以切换tab
value
for all form components like switch
,checkbox
,rating
and so onvalue
control component or use v-model
change state automatically.<template>
<div>
<fe-switch :value="checked" @change="changeHandler" />
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked = ref(true)
const changeHandler = (e) => {
checked.value = e.target.checked
}
return {
checked,
changeHandler,
}
},
}
</script>
None .
Add a deployment snapshot to view the ux
effect every time you pr
styles
🛠️Hey, Is it possible to add width
on the button.
I can now only change the button width as shown below:
<div class="search">
<fe-button size="large" ghost>Search</fe-button>
</div>
.search {
button {
min-width: 40px;
}
}
I think we can provide a cli package. May we should create a new repo for it. The current cli is integrated in the main repo. It is very inconvenient when in cli. And i think we can refactor him incidentally
在一个组件中改变theme
const { themeChange } = useTheme();
themeChange();
希望在另一个组件中能够监听到变化
const { theme } = useTheme();
watch(theme, () => {
// 希望这里能够监听到
});
The new website document language switch did not work.I tried to clear the website cache and switch browsers, but the problem still exists.
The website document is now in English by default. I tried to click to switch the language. The route was changed, but the language was not switched.
Language can be switched normally
Error when importing form components on demand using Vite
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: '@fect-ui/vue',
esModule: true,
resolveStyle: (name) => `@fect-ui/vue/es/${name}/index.css`
}
]
})
]
})
temporary method
libs: [
{
libraryName: '@fect-ui/vue',
esModule: true,
resolveStyle: (name) => {
if (name === 'form') {
return
} else {
return `@fect-ui/vue/es/${name}/index.css`
}
},
},
],
"@fect-ui/vue": "1.2.4",
"vue": "^3.2.25",
no error
[vite] Internal server error: Failed to resolve import "F:/**path**/node_modules/.pnpm/
registry.npmmirror.com+@[email protected][email protected]/node_modules/@fect-ui/vue/es/form/index.css" from "src\plugins\ui.ts".
Does the file exist?
Plugin: vite:import-analysis
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.