dlzn-ui 1.17.0 → 1.20.0

package/assets/css/element-plus-reset.css

@@ -0,0 +1,79 @@
+/* stylelint-disable selector-class-pattern */
+body {
+  .el-popper__arrow {
+    display: none;
+  }
+
+  .el-input__icon {
+    &.clear-icon {
+      font-size: 16px;
+    }
+  }
+
+  .el-date-editor {
+    &.is-focus .el-input__wrapper {
+      /* 非range focus */
+      box-shadow: 0 0 0 2px var(--el-input-focus-border-color) inset;
+    }
+
+    &.t-is-success {
+      .el-input__wrapper {
+        --el-input-border-color: var(--td-success-color);
+        --el-input-hover-border-color: var(--td-success-color);
+        --el-input-focus-border-color: var(--td-success-color);
+      }
+    }
+
+    &.t-is-warning {
+      .el-input__wrapper {
+        --el-input-border-color: var(--td-warning-color);
+        --el-input-hover-border-color: var(--td-warning-color);
+        --el-input-focus-border-color: var(--td-warning-color);
+      }
+    }
+
+    &.t-is-error {
+      .el-input__wrapper {
+        --el-input-border-color: var(--td-error-color);
+        --el-input-hover-border-color: var(--td-error-color);
+        --el-input-focus-border-color: var(--td-error-color);
+      }
+    }
+  }
+
+  .el-range-editor {
+    &.is-active {
+      /* range focus */
+      box-shadow: 0 0 0 2px var(--el-input-focus-border-color) inset !important;
+    }
+  }
+
+  .el-input__wrapper {
+    &.is-focus {
+      /* 时间输入框 focus */
+      box-shadow: 0 0 0 2px var(--el-input-focus-border-color) inset;
+    }
+  }
+
+  .t-form__controls {
+    &.t-is-error {
+      .el-input__wrapper {
+        /* TDatePicker */
+        --el-input-border-color: var(--td-error-color);
+
+        /* TDatePicker */
+        --el-input-hover-border-color: var(--td-error-color);
+
+        /* TDatePicker */
+        --el-input-focus-border-color: var(--td-error-color);
+      }
+    }
+
+    .el-date-editor {
+      --el-date-editor-width: 100%;
+      --el-date-editor-monthrange-width: 100%;
+      --el-date-editor-daterange-width: 100%;
+      --el-date-editor-datetimerange-width: 100%;
+    }
+  }
+}

package/assets/css/index.css

@@ -0,0 +1,5 @@
+@import './tailwindcss-entry.css';
+@import './tdesign-reset.css';
+@import './tdesign-chat-reset.css';
+@import './element-plus-reset.css';
+@import './other.css';

package/assets/css/other.css

@@ -0,0 +1,16 @@
+:root {
+  --bprogress-color: var(--td-brand-color) !important;
+}
+
+.full_screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+  width: 100%;
+  height: 100%;
+}
+
+img {
+  user-select: none;
+}

package/assets/css/tailwindcss-entry.css

@@ -0,0 +1,20 @@
+@import 'tailwindcss';
+
+@theme {
+  --font-sans: blinkmacsystemfont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
+
+  /* stylelint-disable-next-line custom-property-pattern */
+  --color-*: initial;
+
+  /* 自定义变量 */
+
+  /* --color-primary: var(--td-brand-color-active); */
+
+  /* 同tdesign 保持一致 */
+  --breakpoint-xs: 20rem;
+  --breakpoint-sm: 48rem;
+  --breakpoint-md: 62rem;
+  --breakpoint-lg: 75rem;
+  --breakpoint-xl: 87.5rem;
+  --breakpoint-2xl: 117.5rem;
+}

package/assets/css/tdesign-chat-reset.css

@@ -0,0 +1,33 @@
+/* stylelint-disable custom-property-pattern */
+.chatbot_wrapper {
+  --td-chat-item-gap: 12px;
+  --td-chat-item-left-avatar-margin: 0 8px 0 4px;
+  --td-chat-item-right-avatar-margin: 0 4px 0 8px;
+  --td-chat-item-content-padding: 6px 0 0;
+  --td-chat-font-size: var(--td-font-size-body-medium);
+  --td-chat-item-text-padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
+
+  ::part(t-chat__input__content) {
+    border-radius: var(--td-radius-default);
+
+    &:focus-within {
+      box-shadow: 0 0 0 1px var(--td-brand-color) inset;
+    }
+  }
+
+  ::part(t-chat__text--user) {
+    background-color: var(--td-bg-color-container-active);
+  }
+
+  ::part(t-chat__input) {
+    padding: 0 12px 12px;
+  }
+
+  ::part(t-chat__list) {
+    padding: 0 12px;
+  }
+
+  ::part(t-chat__item__inner) {
+    margin-top: 12px;
+  }
+}

package/assets/css/tdesign-reset.css

@@ -0,0 +1,355 @@
+/* stylelint-disable custom-property-pattern */
+
+:root {
+  --td-radius-default: 4px;
+  --td-radius-large: 8px;
+  --td-font-family: var(--font-sans);
+  --td-font-family-medium: var(--font-sans);
+}
+
+:root,
+:root[theme-mode='light'] {
+  --td-font-gray-1: rgb(0 0 0 / 70%);
+  --td-brand-color-1: #f2f3ff;
+  --td-brand-color-2: #cadffc;
+  --td-brand-color-3: #a1cbfa;
+  --td-brand-color-4: #79b7f7;
+  --td-brand-color-5: #51a2f4;
+  --td-brand-color-6: #288ef2;
+  --td-brand-color-7: #007aef;
+  --td-brand-color-8: #005fbb;
+  --td-brand-color-9: #004586;
+  --td-brand-color-10: #002a52;
+  --td-gray-color-1: #fafafa;
+  --td-bg-color-page: rgb(244 245 250);
+  --td-shadow-1:
+    0 2px 2px -1px rgb(58 53 65 / 8%), 0 1px 5px 1px rgb(58 53 65 / 12%),
+    0 1px 8px 1px rgb(58 53 65 / 4%);
+  --td-shadow-2:
+    0 4px 5px -2px rgb(58 53 65 / 8%), 0 2px 10px 1px rgb(58 53 65 / 12%),
+    0 2px 16px 1px rgb(58 53 65 / 4%);
+  --td-shadow-3:
+    0 5px 7px -3px rgb(58 53 65 / 8%), 0 3px 13px 1px rgb(58 53 65 / 12%),
+    0 3px 21px 1px rgb(58 53 65 / 4%);
+  --td-mask-active: rgb(58 53 65 / 32%);
+}
+
+body {
+  > .t-loading__overlay {
+    background-color: rgb(255 255 255 / 10%);
+  }
+
+  .t-list-item {
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .t-radio__input,
+  .t-checkbox__input {
+    width: 20px;
+    height: 20px;
+  }
+
+  .t-radio {
+    &.t-is-checked {
+      .t-radio__input {
+        border-width: 2px;
+      }
+    }
+  }
+
+  .t-checkbox {
+    &.t-is-checked {
+      .t-checkbox__input {
+        transition: none;
+
+        &::after {
+          top: 8px;
+          left: 3px;
+          width: 8px;
+          height: 14px;
+        }
+      }
+    }
+
+    &.t-is-indeterminate {
+      .t-checkbox__input {
+        transition: none;
+
+        &::after {
+          top: 7px;
+          left: -4px;
+          width: 26px;
+        }
+      }
+    }
+  }
+
+  /* 里层的状态干不过外层的状态 */
+  .t-input:not(.t-range-input .t-input), /* input select inputNumber tagInput treeSelect */
+  .t-range-input, /* rangeInput */
+  .t-textarea__inner /* textarea */ {
+    &.t-is-focused,
+    &.t-input--focused {
+      box-shadow: 0 0 0 1px var(--td-brand-color) inset;
+
+      &.t-is-success {
+        box-shadow: 0 0 0 1px var(--td-success-color) inset;
+      }
+
+      &.t-is-warning {
+        box-shadow: 0 0 0 1px var(--td-warning-color) inset;
+      }
+
+      &.t-is-error {
+        box-shadow: 0 0 0 1px var(--td-error-color) inset;
+      }
+    }
+  }
+
+  .t-is-error {
+    .t-form__controls-content {
+      .t-input:not(.t-range-input .t-input),
+      .t-range-input,
+      .t-textarea__inner {
+        &.t-is-focused,
+        &.t-input--focused {
+          box-shadow: 0 0 0 1px var(--td-error-color) inset;
+        }
+      }
+    }
+  }
+
+  .t-tabs {
+    overflow: visible;
+
+    .t-tabs__nav-item {
+      /* stylelint-disable-next-line selector-class-pattern */
+      .remove-btn {
+        position: relative;
+        right: 4px;
+        padding: 2px;
+        margin-left: 0;
+        font-size: 22px;
+      }
+
+      &:not(.t-is-disabled) {
+        /* stylelint-disable-next-line selector-class-pattern */
+        .remove-btn {
+          &:hover {
+            background-color: var(--td-bg-color-container-hover);
+          }
+        }
+
+        &:not(.t-is-active) {
+          &:hover {
+            .t-tabs__nav-item-wrapper {
+              background-color: inherit;
+            }
+          }
+
+          .t-tabs__nav-item-wrapper {
+            &:hover {
+              background-color: var(--td-bg-color-container-hover);
+            }
+          }
+        }
+      }
+    }
+
+    .t-tabs__operations--left,
+    .t-tabs__operations--right {
+      bottom: 0;
+    }
+
+    .t-tabs__content {
+      overflow: visible;
+    }
+  }
+
+  .t-dialog__ctx {
+    .t-dialog__mask {
+      background-color: rgb(58 53 65 / 32%);
+    }
+
+    .t-dialog {
+      min-width: 320px;
+      max-width: calc(100% - 20px);
+      border-radius: var(--td-radius-default);
+      box-shadow:
+        rgb(58 53 65 / 8%) 0 11px 15px -7px,
+        rgb(58 53 65 / 12%) 0 24px 38px 3px,
+        rgb(58 53 65 / 4%) 0 9px 46px 8px;
+
+      &.t-dialog--default {
+        padding: var(--td-size-7);
+      }
+
+      [class^='t-dialog__body'] {
+        &:is(:last-child),
+        &:has(> .t-form:is(:last-child)) {
+          padding-bottom: 0;
+        }
+
+        &:has(> .t-typography:is(:first-child)),
+        &:has(> div:is(:first-child) > .t-typography:is(:first-child)),
+        &:has(> div:is(:first-child) > div:is(:first-child) > .t-typography:is(:first-child)) {
+          padding-top: 0;
+        }
+
+        &:has(.no_dialog_pt) {
+          padding-top: 0;
+        }
+      }
+
+      .t-dialog__footer {
+        @apply pt-0;
+      }
+    }
+
+    .t-dialog--draggable {
+      .t-dialog__header-content {
+        cursor: move;
+      }
+    }
+  }
+
+  .t-link {
+    display: inline;
+
+    .t-link__prefix-icon {
+      display: inline;
+      margin-right: 0;
+    }
+
+    .t-link__suffix-icon {
+      display: inline;
+      margin-left: 0;
+    }
+  }
+
+  .t-tree__icon {
+    &:has(> .t-button) {
+      display: flex;
+      justify-content: center;
+      width: 32px;
+
+      .t-button {
+        left: 2px;
+      }
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .t-tree__item {
+    padding: 0 0 0 calc(32px * var(--level));
+  }
+
+  .t-tree__line {
+    --space: 32px;
+
+    &::before {
+      width: 20px;
+    }
+
+    left: calc(32px * var(--level) - 14px);
+  }
+
+  .t-input-adornment__append,
+  .t-input-adornment__prepend {
+    @apply flex items-center;
+  }
+
+  .t-list__load {
+    font-size: var(--td-font-size-body-small);
+    line-height: var(--td-line-height-body-small);
+    color: var(--td-text-color-placeholder);
+    background: transparent;
+
+    &:not(:empty) {
+      padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
+    }
+
+    &.t-list__load--load-more {
+      cursor: pointer;
+    }
+  }
+
+  .t-list__header,
+  .t-list__footer {
+    padding: 0;
+    background: transparent;
+  }
+
+  .t-input-adornment {
+    .t-input-adornment__prepend,
+    .t-input-adornment__append {
+      &:has(> .t-button) {
+        flex-shrink: 0;
+        overflow: hidden;
+        border: 1px solid var(--td-border-level-2-color);
+
+        .t-button {
+          margin: -1px;
+          border-radius: 0;
+        }
+      }
+
+      &:has(> .t-button.t-button--theme-primary) {
+        border: none;
+      }
+    }
+  }
+
+  .t-drawer {
+    .t-drawer__body {
+      &:has(.no_drawer_body_padding) {
+        padding: 0;
+      }
+    }
+
+    .t-drawer__content-wrapper {
+      &:has(.no_drawer_content_shadow) {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .t-popup {
+    &.t-is-head-menu {
+      .t-menu__item {
+        --td-comp-paddingLR-l: var(--td-size-4);
+
+        .t-menu__content {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .t-popup__content {
+    border: 1px solid var(--td-border-level-2-color);
+    box-shadow: var(--td-shadow-2);
+  }
+
+  .t-empty {
+    @apply flex flex-col justify-center;
+  }
+}
+
+@media (width <= 540px) {
+  .t-dialog {
+    .t-form__item {
+      /* stylelint-disable-next-line selector-class-pattern */
+      &[class*='col-span-'] {
+        @apply col-span-full;
+      }
+    }
+  }
+}

package/package.json

@@ -10,6 +10,7 @@
       "import": "./index.mjs",
       "types": "./index.d.ts"
     },
+    "./assets/css/index.css": "./assets/css/index.css",
     "./const": {
       "import": "./const/index.mjs",
       "types": "./const/index.d.ts"
@@ -20,6 +21,9 @@
     "./utils": {
       "import": "./utils/index.mjs",
       "types": "./utils/index.d.ts"
+    },
+    "./vite-config": {
+      "import": "./vite-config.mjs"
     }
   },
   "keywords": [],
@@ -62,6 +66,6 @@
     "**/*.css"
   ],
   "type": "module",
-  "version": "1.17.0",
+  "version": "1.20.0",
   "scripts": {}
 }

package/prettier-config.mjs

@@ -4,9 +4,20 @@
  */
 // @ts-check
 
-/** @typedef {import('prettier').Config} Config */
+import { existsSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
-/** @type {Config} */
+const here = dirname(fileURLToPath(import.meta.url))
+
+function resolveDefaultCssEntry() {
+  const distCss = resolve(here, 'assets/css/tailwindcss-entry.css')
+  const srcCss = resolve(here, 'src/assets/css/tailwindcss-entry.css')
+
+  return existsSync(distCss) ? distCss : srcCss
+}
+
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
 export default {
   $schema: 'https://json.schemastore.org/prettierrc',
   arrowParens: 'always', // 单参数箭头函数参数周围使用圆括号-eg: (x) => x
@@ -26,7 +37,7 @@ export default {
   singleAttributePerLine: false, // 会在 HTML、JSX、Vue 和 Angular 中格式化为每个属性单独占一行。
   singleQuote: true, // 使用单引号
   tabWidth: 2, // 缩进长度
-  tailwindStylesheet: './src/assets/css/tailwindcss-entry.css',
+  tailwindStylesheet: resolveDefaultCssEntry(),
   trailingComma: 'all',
   useTabs: false, // 使用空格代替tab缩进
   vueIndentScriptAndStyle: false, // 不对vue中的script及style标签缩进

package/vite-config.mjs

@@ -0,0 +1,47 @@
+import { existsSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindAutoReference from 'vite-plugin-vue-tailwind-auto-reference'
+
+/**
+ * @typedef {import('vite').ConfigEnv} ConfigEnv
+ * @typedef {typeof import('vite-plugin-vue-tailwind-auto-reference').default} TailwindAutoReference
+ * @typedef {Parameters<TailwindAutoReference>} TailwindAutoReferenceParameters
+ * @typedef {{ tailwindAutoReferenceParameters?: TailwindAutoReferenceParameters }} DlznViteOptions
+ * @typedef {import('vite').UserConfig} UserConfig
+ */
+
+const here = dirname(fileURLToPath(import.meta.url))
+
+function resolveDefaultCssEntry() {
+  const distCss = resolve(here, 'assets/css/tailwindcss-entry.css')
+  const srcCss = resolve(here, 'src/assets/css/tailwindcss-entry.css')
+
+  return existsSync(distCss) ? distCss : srcCss
+}
+
+/**
+ * @param {ConfigEnv} env
+ * @param {DlznViteOptions} options
+ * @returns {UserConfig} Vite config
+ */
+export default (env, options) => {
+  const tailwindAutoReferenceParameters = [
+    options.tailwindAutoReferenceParameters?.[0] ?? resolveDefaultCssEntry(),
+    ...(options.tailwindAutoReferenceParameters?.slice(1) ?? []),
+  ]
+
+  return {
+    plugins: [
+      vue({
+        // features: {
+        //   optionsAPI: false, // 不能删掉，tdesign 内部使用到了
+        // },
+      }),
+      tailwindAutoReference(...tailwindAutoReferenceParameters),
+      tailwindcss(),
+    ],
+  }
+}