Onu-UI for web glassmorphism components generate by UnoCSS

Overview

Onu-UI (WIP)

Onu-UI for web glassmorphism components generate by UnoCSS.

Usage

npm i onu-ui
npm i unocss -D

Add onu-ui in your main entry file.

// main.ts
import OnuUI from 'onu-ui'
import 'uno.css'
import 'onu-ui/dist/style.css'

createApp(App).use(OnuUI).mount('#app')

Custom your UnoCSS config:

// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetOnu } from 'onu-ui'

export default defineConfig({
  presets: [
    // ...
    presetUno(),
    presetAttributify(),
    presetOnu(),
  ],
})

Refer

UnoCSS

@nuxt/ui

License

MIT

Comments
  • ⏸️ Stop !!!

    ⏸️ Stop !!!

    Let's pause the input of new components, we should optimize the current components and workflow first, and then consider new components. I think so many issues should be optimized, we can review other component code mutually.

    opened by zyyv 23
  • feat: new playground

    feat: new playground

    1.I didn't delete the old playground in the project, and I temporarily put the new playground in the play folder. I think how to manage it needs to be discussed. Usually when developing components, we need an environment that can hot update the code for us to debug. The old playground is satisfied, and the new playground is based on vue-repl, which can set different dependency versions. It is pulled from cdn, so it is If it does not meet the needs of our development (I don't know if there is a better way to make it compatible), it usually exists as a feedback issue to provide minimal reproduction.

    2.The CDN used are free from abroad, so the access will be delayed a little.

    3.In vue-repl, the dependencies are pulled from cdn, which is isolated from the dependencies and styles of the upper-level project, which requires that the dependencies can be run directly on the browser, although unocss provides the ability to run directly on the browser. Running runtime, but it seems that some preset plugins cannot be run, such as the icon component of onu-ui depends on. Of course, unocss may have other ways that I don't know. So here I send the node rendered by the iframe to the upper-level project through postMessage, use unocss to compile the css information and send it back, so as to realize the normal display of the icon. But this process adds cdn time, so it will be slower when it is first opened.

    1. At present welcome.vue has written more components, which can be simplified later.

    1.项目中旧的 playground 我没有删除,而新的 playground 我暂时放在了 play 文件夹内,如何管理我认为是需要讨论的。通常在开发组件时,我们需要一个环境能够热更新代码供我们调试,这一点旧 playground 是满足的,而新 playground 基于 vue-repl,可以设置不同依赖版本,它是从 cdn 拉取的所以它是不满足我们开发时的需求的(不知道有没有更好的办法做兼容),通常作为反馈 issun 时提供最小复现而存在的。

    2.使用的 cdn 均为国外免费的,所以访问上会延迟一点。

    3.在 vue-repl 中依赖是从 cdn 拉取的,与上层项目的依赖、样式都有隔离,这要求依赖可以直接在浏览器上运行,尽管 unocss 提供了可以直接在浏览器运行的 runtime,但是似乎对一些预设插件,无法运行,比如图标依赖,当然 unocss可能有其他方式是我不知道的,所以这里我用 postMessag,将 iframe 渲染的节点发送到上层项目,使用 unocss 编译出 css 信息后再发送回去,实现了图标的正常显示。但是这个过程 加上 cdn 时间,所以在初次打开时会比较慢。

    1. 目前模板里welcome.vue 写了比较多的组件,后期可以考虑简化.

    .... 总之,先有一版吧 😂

    opened by baiwusanyu-c 5
  • refactor/docs

    refactor/docs

    I refactored the onu-ui documentation and added some vitepress components, temporarily updated the documentation for the button component.Other component's documents are being added 😃. @chris-zhu

    Here is the link to the preview of the documentation after the refactoring:https://63188fac9695f00008b845d4--creative-valkyrie-bd21c8.netlify.app/components/button.html

    opened by yzh990918 4
  • feat: pref build components library production

    feat: pref build components library production

    Using volar's vue-tsc can avoid a lot of trouble caused by the vue component build. There were some bugs in the previous vite-plugin-dts build, for example, it could not properly generate the props for the component, for example, it set the type to any whenever a problem was encountered. I think the current scheme has been a relatively perfect package component library scheme.

    https://github.com/qmhc/vite-plugin-dts/issues/129

    By the way,I hope you can try it locally, I hope you like it. One more thing, we should be careful about updating the dependent version to the latest one, as this may result in API incompatibilities between some frameworks or plug-ins, resulting in some errors.

    opened by yzh990918 3
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • .github/workflows/ci.yml (github-actions)
    • .github/workflows/release.yml (github-actions)
    • docs/package.json (npm)
    • package.json (npm)
    • packages/cli/package.json (npm)
    • packages/components/package.json (npm)
    • packages/onu-ui/package.json (npm)
    • packages/preset/package.json (npm)
    • packages/utils/package.json (npm)
    • playground/package.json (npm)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Enable Renovate Dependency Dashboard creation.
    • If Renovate detects semantic commits, it will use semantic commit type fix for dependencies and chore for all others.
    • Ignore node_modules, bower_components, vendor and various test/tests directories.
    • Autodetect whether to pin dependencies or maintain ranges.
    • Rate limit PR creation to a maximum of two per hour.
    • Limit to maximum 10 open PRs at any time.
    • Group known monorepo packages together.
    • Use curated list of recommended non-monorepo package groupings.
    • A collection of workarounds for known problems with packages.

    🔡 Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.


    What to Expect

    With your current configuration, Renovate will create 10 Pull Requests:

    chore(deps): pin dependencies
    chore(deps): update dependency unplugin-vue-components to v0.22.8
    • Schedule: ["at any time"]
    • Branch name: renovate/unplugin-vue-components-0.x
    • Merge into: main
    • Upgrade unplugin-vue-components to 0.22.8
    chore(deps): update dependency vitepress to v1.0.0-alpha.21
    • Schedule: ["at any time"]
    • Branch name: renovate/vitepress-1.x
    • Merge into: main
    • Upgrade vitepress to 1.0.0-alpha.21
    chore(deps): update dependency @​vitest/coverage-c8 to v0.24.3
    • Schedule: ["at any time"]
    • Branch name: renovate/vitest-coverage-c8-0.x
    • Merge into: main
    • Upgrade @vitest/coverage-c8 to 0.24.3
    chore(deps): update dependency @​vitest/ui to v0.24.3
    • Schedule: ["at any time"]
    • Branch name: renovate/vitest-ui-0.x
    • Merge into: main
    • Upgrade @vitest/ui to 0.24.3
    chore(deps): update dependency eslint to v8.25.0
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-8.x
    • Merge into: main
    • Upgrade eslint to 8.25.0
    chore(deps): update dependency unbuild to v0.9.4
    • Schedule: ["at any time"]
    • Branch name: renovate/unbuild-0.x
    • Merge into: main
    • Upgrade unbuild to 0.9.4
    chore(deps): update dependency vite-plugin-pages to v0.26.0
    • Schedule: ["at any time"]
    • Branch name: renovate/vite-plugin-pages-0.x
    • Merge into: main
    • Upgrade vite-plugin-pages to 0.26.0
    chore(deps): update pnpm to v7.13.5
    • Schedule: ["at any time"]
    • Branch name: renovate/pnpm-7.x
    • Merge into: main
    • Upgrade pnpm to 7.13.5
    fix(deps): update dependency @​unocss/reset to v0.45.29
    • Schedule: ["at any time"]
    • Branch name: renovate/unocss-reset-0.x
    • Merge into: main
    • Upgrade @unocss/reset to 0.45.29

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 3
  • [BUG]: pnpm run play 失败

    [BUG]: pnpm run play 失败

    Describe the bug

    我用ni安装完项目依赖,执行nr play后,显示以下报错: image

    我发现在packages/componentspackages/onu-uipackages/preset中,并没有build生成的dist文件夹,所以我分别在这三个项目中去执行build生成dist。然后再执行nr play,结果显示另外一个错误。如下图所示: image

    Reproduction

    No response

    System Info

    System:
        OS: Windows 10 10.0.19044
        CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700 @ 2.50GHz
        Memory: 3.27 GB / 15.72 GB
      Binaries:
        Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
        Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
        npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
      Browsers:
        Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.53)
        Internet Explorer: 11.0.19041.1566
      npmPackages:
        vue: ^3.2.39 => 3.2.39
    

    Used Package Manager

    pnpm

    Validations

    • [X] Read the Contributing Guidelines.
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Make sure this is a OnuUI issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
    • [X] The provided reproduction is a minimal reproducible example of the bug.
    bug 
    opened by chenjiezi 3
  • 📌 Components & Feature todo list

    📌 Components & Feature todo list

    |Feature Name | Mentioned | Progression(🚧 ✅ 🆕❌ ) | | :------------: | :--------------------: | :------------: | | Build production optimization | #65 | 🚧 | | Carousel | #47 | 🚧 | | Collapse | #54| ✅ | | Popup | #59 |✅ | | Tooltip | #46 | 🚧 | | Radio | #56 | 🚧 | | Input | #41 | 🚧 | | Dialog | | 🚧 | | Switch | #18 |✅ | | Rate | #62 |✅ | | Message | #43 | ✅ | | Checkbox | #27 | ✅ | | Avatar | #17 | ✅ | | Card | #25 | ✅ | | Icon | | ✅ | | Tag | #39 | ✅ | | Alert | #32 | ✅ | | Button | #2 | ✅ |

    opened by zyyv 3
Releases(v1.0.13-beta.0)
Owner
Onu-UI
Glassmorphism component library by UnoCSS
Onu-UI
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
(Developing) Twitter Clone made with Remix, EdgeDB & UnoCSS.

Twitter Clone Twitter clone made with Remix, EdgeDB & UnoCSS. Demo: twitter-clone.poke.dev Features Signup/Login (With GitHub OAuth) Create tweets Fol

Poke 13 Jan 3, 2023
Using UnoCSS in Applet(UniApp...)

unocss-applet Using UnoCSS in Applet(UniApp...). Presets and Plugins @unocss-applet/preset-applet - The default preset (right now it's equivalent to @

null 33 Jan 2, 2023
Generate deterministic fake values: The same input will always generate the same fake-output.

import { copycat } from '@snaplet/copycat' copycat.email('foo') // => '[email protected]' copycat.email('bar') // => 'Thurman.Schowalter668@

Snaplet 201 Dec 30, 2022
🦄 A CLI tool to quickly generate Next.js components

?? nextrate A CLI tool for quickly generating Next.js components. ✨ Features Automatically add the file type to the component name using the folder na

Kira 9 Aug 19, 2022
A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Yuthan K 8 Dec 7, 2022
Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron 334 Dec 29, 2022
Web Components engine based on JSX & TypeScript

WebCell Web Components engine based on JSX & TypeScript Usage Demo & GitHub template: https://web-cell.dev/scaffold/ Project bootstrap Command npm ini

null 162 Nov 17, 2022
A modular front-end framework - inspired by the server-side and Web Components.

The NX framework Home page, Docs NX is a modular front-end framework - built with ES6 and Web Components. The building blocks of NX are the core, the

NX framework 464 Dec 5, 2022
AppRun is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.

AppRun AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and compon

Yiyi Sun 1.1k Dec 20, 2022
Material Design implemented in Web Components (Custom Elements v1)

Material Web Components Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/ Ge

Danny Moerkerke 110 Nov 14, 2022
High-quality, customizable web components for common user interface patterns

Elix is a community-driven collection of high-quality web components for common user interface patterns. Most applications make use of common, general

Elix 699 Dec 19, 2022
Lightweight web components library built with LitElement.

Aybolit Aybolit is a lightweight, standards-based, framework agnostic UI components library built with LitElement. Aybolit is a fictional character fr

Serhii Kulykov 97 Dec 21, 2022
A JSDOM alternative with support for server side rendering of web components

About A JSDOM alternative with support for server side rendering of web components. Happy DOM aim to support the most common functionality of a web br

David Ortner 1.6k Dec 30, 2022
A-Frame Element is a simple library for building fast, lightweight web components for 3D development

aframe-element is a library inspired from the very nice library Polymer lit to map A-Frame AR / VR / 3D elements on typescript classes like Angular/React/Lit.

null 6 May 31, 2022
NiftyKit's Web Components Collection

NiftyKit Web Components NiftyKit's Web Components Collection Installation Install via npm npm install @niftykit/components Import via CDN <script type

NIFTYKIT, INC. 5 Feb 21, 2022