daisyui-vue

基于 daisyui 封装的 vue 组件库。

Usage

在模板中引入主题：

TODO: 后续计划包括进来

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/daisyui@2.0.9/dist/themes.css"
/>

全局注册：

// main.ts
import daisyui from 'daisyui-vue';
import { createApp, defineComponent } from 'vue';

app.use(daisyui); // 注册

// App.tsx
const App = defineComponent({
  // ...
  setup: () => {
    return () => {
      return (
        <div>
          <dv-button>click</dv-button>
        </div>
      );
    };
  },
});

按需使用：

// main.ts
import { installTheme } from 'daisyui-vue';

const app = createApp({
  // ...
});

app.use(installTheme); // 注册组件库 context，当需要提取首屏样式时使用，否则可以不注册

// App.tsx
import { Button } from 'daisyui-vue';

const App = defineComponent({
  // ...
  setup: () => {
    return () => {
      return (
        <div>
          <Button>click</Button>
        </div>
      );
    };
  },
});

SSR 提取首屏样式，避免 FOUC 问题：

// entry-server.ts

export function render() {
  const app = createApp({
    // ...
  });

  const style = app.config.globalProperties.$daisyui.style.extractStyles(); // <style>...</style>

  const html = renderToString(app);

  return html.replace('<!-- YOUR_STYLE_PLACEHOLDER -->', style);
}

Todo

• style files
  • auto require style conntent when using a component (now css-in-js)
    • it is easy to use in SSR, but there is no style on first render (FOUC, because css inserted by js). Use extractStyles to extract critical css.
• media query & responsive
• refine style insertion detect(maybe use a content hash self-increasing id)
• pre insert all global style
• popper/modal/drawer animation(maybe some preset animations)
  • modal, drawer

Components

• alert
• artboard
• avatar
• badge
• breadcrumb
• button
• button-group
• card
• carousel
• collapse
• countdown
• divider
• drawer - 🛠 refactor
• dropdown - 🛠 refactor(popper inside)
• footer
• hero
• indicator
• kbd
• link
• mask
• menu
• modal
• navbar
• pagination
• progress
• popper - 🆕 new
• swap - 🛠 refactor
• stack
• stat
• steps
• tab
• table
• toggle
• tooltip - 🛠 refactor
• form-checkbox
• form-input
• form-radio
• form-range
• form-select
• form-textarea
• form-toggle
• mockup-code
• mockup-phone
• mockup-window

命名规则

• 事件名称，onNameAction：onMaskClick、onEscKeyDown
• 事件控制，xxxYyable: keyboardCloseable
• 响应式：mobile first