@birtycom/omniaui-vue (英语)

OmniaCSS的Vue 3组件:一个单文件组件(<script setup lang="ts">每个组成部分和每个区块。 标记和类是 HTML 片断中的 @birdycom/omniaui 财务报告和审定财务报表 @birdycom/omniaui-blocks; CSS 包拥有所有样式, SFC 没有样式.

npm install @birdycom/omniaui-vue @birdycom/omniaui @birdycom/omniaui-blocks vue

import { createApp } from 'vue'
import { OmniaVue } from '@birdycom/omniaui-vue'

createApp(App).use(OmniaVue).mount('#app') // registers every Oc* component globally

<script setup lang="ts">
import { ref } from 'vue'
import { OcButton, OcModal, OcToastContainer, useToast } from '@birdycom/omniaui-vue'
const open = ref(false)
const toast = useToast()
</script>

<template>
  <OcButton variant="outline" size="sm" @click="open = true">Open</OcButton>
  <OcModal v-model:open="open" title="Are you sure?">
    <template #footer="{ close }"><OcButton @click="close(); toast.success('Done')">OK</OcButton></template>
  </OcModal>
  <OcToastContainer />
</template>

• 向修饰者推荐映射 : variant, (中文(简体) ), size (sm / md / lg),布林为旗帜. 将映射到片段槽.
• v-model 输入、选择、切换、复选框、分块、分页、标记输入、OTP、彩色字段、空投区; v-model:open 在模式,提醒对话框,工作表,可折叠,向导.
• 对话框的使用 <dialog> + 键 showModal(),菜单和弹出 popover 属性、手风琴 <details name>。 。 。 .
• 完全参考文件:文档网站中的Vue页(ui/frameworks-vue.html) (中文(简体) ).

拥有密码

src/ 也已经公布。 复制 src/components/OcButton.vue (加上 src/composables/* 文件导入到您的项目中,或从 @birdycom/omniaui-vue/src/components/OcButton.vue。 。 。 . manifest.json 将每个项目列表为 { name, kind, file, snippet }。 。 。 .

发展

npm run generate -w @birdycom/omniaui-vue   # rewrite src/index.ts and manifest.json from the SFC folders
npm run build -w @birdycom/omniaui-vue      # generate + vite library build + .d.ts
npm test -w @birdycom/omniaui-vue           # vitest + @vue/test-utils (jsdom)