@sdata/web-vue 4.7.1 → 5.0.0

package/es/trigger/style/index.css

@@ -28,28 +28,28 @@
   z-index: -1;
   display: block;
   box-sizing: border-box;
-  width: 8px;
-  height: 8px;
-  background-color: var(--sd-color-bg-5);
+  width: var(--component-trigger-trigger-size-arrow-width, var(--component-trigger-size-arrow-width, var(--size-2, 8px)));
+  height: var(--component-trigger-trigger-size-arrow-width, var(--component-trigger-size-arrow-width, var(--size-2, 8px)));
+  background-color: var(--component-trigger-trigger-color-arrow-bg, var(--component-trigger-color-arrow-bg, var(--sd-color-bg-5)));
   content: "";
 }
 .sd-trigger-popup[trigger-placement=top] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=tl] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=tr] .sd-trigger-arrow {
   border-top: none;
   border-left: none;
-  border-bottom-right-radius: var(--sd-border-radius-small);
+  border-bottom-right-radius: var(--component-trigger-trigger-border-arrow-radius, var(--component-trigger-border-arrow-radius, var(--sd-border-radius-small)));
 }
 .sd-trigger-popup[trigger-placement=bottom] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=bl] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=br] .sd-trigger-arrow {
   border-right: none;
   border-bottom: none;
-  border-top-left-radius: var(--sd-border-radius-small);
+  border-top-left-radius: var(--component-trigger-trigger-border-arrow-radius, var(--component-trigger-border-arrow-radius, var(--sd-border-radius-small)));
 }
 .sd-trigger-popup[trigger-placement=left] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=lt] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=lb] .sd-trigger-arrow {
   border-bottom: none;
   border-left: none;
-  border-top-right-radius: var(--sd-border-radius-small);
+  border-top-right-radius: var(--component-trigger-trigger-border-arrow-radius, var(--component-trigger-border-arrow-radius, var(--sd-border-radius-small)));
 }
 .sd-trigger-popup[trigger-placement=right] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=rt] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=rb] .sd-trigger-arrow {
   border-top: none;
   border-right: none;
-  border-bottom-left-radius: var(--sd-border-radius-small);
+  border-bottom-left-radius: var(--component-trigger-trigger-border-arrow-radius, var(--component-trigger-border-arrow-radius, var(--sd-border-radius-small)));
 }

package/es/trigger/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -11,3 +12,21 @@ $trigger-color-arrow-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-
 $trigger-size-arrow-width: global.$size-2;
 
 $trigger-border-arrow-radius: global.$radius-small;
+
+// @generated runtime tokens — pnpm theme:generate
+$trigger-color-arrow-bg: theme-runtime.token(
+  'trigger',
+  'trigger-color-arrow-bg',
+  $trigger-color-arrow-bg
+);
+$trigger-size-arrow-width: theme-runtime.token(
+  'trigger',
+  'trigger-size-arrow-width',
+  $trigger-size-arrow-width,
+  'size-2'
+);
+$trigger-border-arrow-radius: theme-runtime.token(
+  'trigger',
+  'trigger-border-arrow-radius',
+  $trigger-border-arrow-radius
+);

package/es/typography/style/index.css

@@ -21,8 +21,8 @@
 /******** 高级配置项 *******/
 /******** 高级配置项 end *******/
 .sd-typography {
-  color: var(--sd-color-text-1);
-  line-height: 1.5715;
+  color: var(--component-typography-typography-color-text, var(--component-typography-color-text, var(--sd-color-text-1)));
+  line-height: var(--component-typography-typography-paragraph-line-height, var(--component-typography-paragraph-line-height, 1.5715));
   white-space: normal;
   overflow-wrap: anywhere;
 }
@@ -32,32 +32,32 @@
 .sd-typography h4.sd-typography,
 .sd-typography h5.sd-typography,
 .sd-typography h6.sd-typography {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  font-weight: 500;
+  margin-top: var(--component-typography-typography-heading-margin-top, var(--component-typography-heading-margin-top, 1em));
+  margin-bottom: var(--component-typography-typography-heading-margin-bottom, var(--component-typography-heading-margin-bottom, 0.5em));
+  font-weight: var(--component-typography-typography-heading-font-weight, var(--component-typography-heading-font-weight, var(--font-weight-500, 500)));
 }
 .sd-typography h1.sd-typography {
-  font-size: 36px;
+  font-size: var(--component-typography-typography-font-size-h-1, var(--component-typography-font-size-h-1, 36px));
   line-height: 1.23;
 }
 .sd-typography h2.sd-typography {
-  font-size: 32px;
+  font-size: var(--component-typography-typography-font-size-h-2, var(--component-typography-font-size-h-2, 32px));
   line-height: 1.25;
 }
 .sd-typography h3.sd-typography {
-  font-size: 28px;
+  font-size: var(--component-typography-typography-font-size-h-3, var(--component-typography-font-size-h-3, 28px));
   line-height: 1.29;
 }
 .sd-typography h4.sd-typography {
-  font-size: 24px;
+  font-size: var(--component-typography-typography-font-size-h-4, var(--component-typography-font-size-h-4, 24px));
   line-height: 1.33;
 }
 .sd-typography h5.sd-typography {
-  font-size: 20px;
+  font-size: var(--component-typography-typography-font-size-h-5, var(--component-typography-font-size-h-5, 20px));
   line-height: 1.4;
 }
 .sd-typography h6.sd-typography {
-  font-size: 16px;
+  font-size: var(--component-typography-typography-font-size-h-6, var(--component-typography-font-size-h-6, 16px));
   line-height: 1.5;
 }
 .sd-typography div.sd-typography,
@@ -66,26 +66,26 @@
   margin-bottom: 1em;
 }
 .sd-typography-primary {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-typography-typography-text-color-text-primary, var(--component-typography-text-color-text-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-typography-secondary {
-  color: var(--sd-color-text-2);
+  color: var(--component-typography-typography-text-color-text-secondary, var(--component-typography-text-color-text-secondary, var(--sd-color-text-2)));
 }
 .sd-typography-success {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-typography-typography-text-color-text-success, var(--component-typography-text-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-typography-warning {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-typography-typography-text-color-text-warning, var(--component-typography-text-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-typography-danger {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-typography-typography-text-color-text-error, var(--component-typography-text-color-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-typography-disabled {
-  color: var(--sd-color-text-4);
+  color: var(--component-typography-typography-text-color-text-disabled, var(--component-typography-text-color-text-disabled, var(--sd-color-text-4)));
   cursor: not-allowed;
 }
 .sd-typography mark {
-  background-color: rgb(var(--sd-yellow-4));
+  background-color: var(--component-typography-typography-text-color-bg-mark, var(--component-typography-text-color-bg-mark, rgb(var(--sd-yellow-4))));
 }
 .sd-typography u {
   text-decoration: underline;
@@ -94,23 +94,23 @@
   text-decoration: line-through;
 }
 .sd-typography b {
-  font-weight: 500;
+  font-weight: var(--component-typography-typography-text-font-weight-bold, var(--component-typography-text-font-weight-bold, var(--font-weight-500, 500)));
 }
 .sd-typography code {
-  margin: 0 2px;
-  padding: 2px 8px;
-  color: var(--sd-color-text-2);
+  margin: 0 var(--component-typography-typography-text-margin-code-horizontal, var(--component-typography-text-margin-code-horizontal, 2px));
+  padding: var(--component-typography-typography-text-padding-code-vertical, var(--component-typography-text-padding-code-vertical, 2px)) var(--component-typography-typography-text-padding-code-horizontal, var(--component-typography-text-padding-code-horizontal, 8px));
+  color: var(--component-typography-typography-text-color-code, var(--component-typography-text-color-code, var(--sd-color-text-2)));
   font-size: 85%;
-  background-color: var(--sd-color-neutral-2);
-  border: 1px solid var(--sd-color-neutral-3);
+  background-color: var(--component-typography-typography-text-color-code-bg, var(--component-typography-text-color-code-bg, var(--sd-color-neutral-2)));
+  border: 1px solid var(--component-typography-typography-text-color-code-border, var(--component-typography-text-color-code-border, var(--sd-color-neutral-3)));
   border-radius: 2px;
 }
 .sd-typography blockquote {
   margin: 0;
   margin-bottom: 1em;
   padding-left: 8px;
-  background-color: var(--sd-color-bg-2);
-  border-left: 2px solid var(--sd-color-neutral-6);
+  background-color: var(--component-typography-typography-color-blockquote-bg, var(--component-typography-color-blockquote-bg, var(--sd-color-bg-2)));
+  border-left: var(--component-typography-typography-color-blockquote-border-width, var(--component-typography-color-blockquote-border-width, 2px)) solid var(--component-typography-typography-color-blockquote-border-left, var(--component-typography-color-blockquote-border-left, var(--sd-color-neutral-6)));
 }
 .sd-typography ol, .sd-typography ul {
   margin: 0;
@@ -123,46 +123,46 @@
   list-style: circle;
 }
 .sd-typography-spacing-close {
-  line-height: 1.3;
+  line-height: var(--component-typography-typography-paragraph-line-height-close, var(--component-typography-paragraph-line-height-close, 1.3));
 }
 .sd-typography-operation-copy, .sd-typography-operation-copied {
-  margin-left: 2px;
+  margin-left: var(--component-typography-typography-operation-margin-left, var(--component-typography-operation-margin-left, var(--spacing-1, 2px)));
   padding: 2px;
 }
 .sd-typography-operation-copy {
-  color: var(--sd-color-text-2);
-  background-color: transparent;
+  color: var(--component-typography-typography-color-icon-copy, var(--component-typography-color-icon-copy, var(--sd-color-text-2)));
+  background-color: var(--component-typography-typography-color-bg-icon-copy, var(--component-typography-color-bg-icon-copy, var(--color-transparent, var(--sd-color-transparent, transparent))));
   border-radius: 2px;
   cursor: pointer;
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-typography-operation-copy:hover {
-  color: var(--sd-color-text-2);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-typography-typography-color-icon-copy-hover, var(--component-typography-color-icon-copy-hover, var(--sd-color-text-2)));
+  background-color: var(--component-typography-typography-color-bg-icon-copy-hover, var(--component-typography-color-bg-icon-copy-hover, var(--sd-color-fill-2)));
 }
 .sd-typography-operation-copied {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-typography-typography-color-icon-copy-copied, var(--component-typography-color-icon-copy-copied, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-typography-operation-edit {
-  margin-left: 2px;
+  margin-left: var(--component-typography-typography-operation-margin-left, var(--component-typography-operation-margin-left, var(--spacing-1, 2px)));
   padding: 2px;
-  color: var(--sd-color-text-2);
-  background-color: transparent;
+  color: var(--component-typography-typography-color-icon-edit, var(--component-typography-color-icon-edit, var(--sd-color-text-2)));
+  background-color: var(--component-typography-typography-color-bg-icon-edit, var(--component-typography-color-bg-icon-edit, var(--color-transparent, var(--sd-color-transparent, transparent))));
   border-radius: 2px;
   cursor: pointer;
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-typography-operation-edit:hover {
-  color: var(--sd-color-text-2);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-typography-typography-color-icon-edit-hover, var(--component-typography-color-icon-edit-hover, var(--sd-color-text-2)));
+  background-color: var(--component-typography-typography-color-bg-icon-edit-hover, var(--component-typography-color-bg-icon-edit-hover, var(--sd-color-fill-2)));
 }
 .sd-typography-operation-expand {
   margin: 0 4px;
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-typography-typography-color-expand-text, var(--component-typography-color-expand-text, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   cursor: pointer;
 }
 .sd-typography-operation-expand:hover {
-  color: rgb(var(--sd-primary-5));
+  color: var(--component-typography-typography-color-expand-text-hover, var(--component-typography-color-expand-text-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
 }
 .sd-typography-edit-content {
   position: relative;

package/es/typography/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -71,3 +72,222 @@ $typography-color-blockquote-bg: var(string.unquote('#{global.$sd-cssvars-prefix
 
 $typography-heading-margin-top: 1em;
 $typography-heading-margin-bottom: 0.5em;
+
+// @generated runtime tokens — pnpm theme:generate
+$typography-font-size-h1: theme-runtime.token(
+  'typography',
+  'typography-font-size-h-1',
+  $typography-font-size-h1
+);
+$typography-font-size-h2: theme-runtime.token(
+  'typography',
+  'typography-font-size-h-2',
+  $typography-font-size-h2
+);
+$typography-font-size-h3: theme-runtime.token(
+  'typography',
+  'typography-font-size-h-3',
+  $typography-font-size-h3
+);
+$typography-font-size-h4: theme-runtime.token(
+  'typography',
+  'typography-font-size-h-4',
+  $typography-font-size-h4
+);
+$typography-font-size-h5: theme-runtime.token(
+  'typography',
+  'typography-font-size-h-5',
+  $typography-font-size-h5
+);
+$typography-font-size-h6: theme-runtime.token(
+  'typography',
+  'typography-font-size-h-6',
+  $typography-font-size-h6
+);
+$typography-heading-font-weight: theme-runtime.token(
+  'typography',
+  'typography-heading-font-weight',
+  $typography-heading-font-weight,
+  'font-weight-500'
+);
+$typography-color-text: theme-runtime.token(
+  'typography',
+  'typography-color-text',
+  $typography-color-text
+);
+$typography-text-color-text-primary: theme-runtime.token(
+  'typography',
+  'typography-text-color-text-primary',
+  $typography-text-color-text-primary,
+  'color-primary-6'
+);
+$typography-text-color-text-secondary: theme-runtime.token(
+  'typography',
+  'typography-text-color-text-secondary',
+  $typography-text-color-text-secondary
+);
+$typography-text-color-text-success: theme-runtime.token(
+  'typography',
+  'typography-text-color-text-success',
+  $typography-text-color-text-success,
+  'color-success-6'
+);
+$typography-text-color-text-warning: theme-runtime.token(
+  'typography',
+  'typography-text-color-text-warning',
+  $typography-text-color-text-warning,
+  'color-warning-6'
+);
+$typography-text-color-text-error: theme-runtime.token(
+  'typography',
+  'typography-text-color-text-error',
+  $typography-text-color-text-error,
+  'color-danger-6'
+);
+$typography-text-color-text_disabled: theme-runtime.token(
+  'typography',
+  'typography-text-color-text-disabled',
+  $typography-text-color-text_disabled
+);
+$typography-text-color-bg-mark: theme-runtime.token(
+  'typography',
+  'typography-text-color-bg-mark',
+  $typography-text-color-bg-mark
+);
+$typography-text-font-weight-bold: theme-runtime.token(
+  'typography',
+  'typography-text-font-weight-bold',
+  $typography-text-font-weight-bold,
+  'font-weight-500'
+);
+$typography-text-color-code: theme-runtime.token(
+  'typography',
+  'typography-text-color-code',
+  $typography-text-color-code
+);
+$typography-text-color-code-border: theme-runtime.token(
+  'typography',
+  'typography-text-color-code-border',
+  $typography-text-color-code-border
+);
+$typography-text-color-code-bg: theme-runtime.token(
+  'typography',
+  'typography-text-color-code-bg',
+  $typography-text-color-code-bg
+);
+$typography-text-padding-code-vertical: theme-runtime.token(
+  'typography',
+  'typography-text-padding-code-vertical',
+  $typography-text-padding-code-vertical
+);
+$typography-text-padding-code-horizontal: theme-runtime.token(
+  'typography',
+  'typography-text-padding-code-horizontal',
+  $typography-text-padding-code-horizontal
+);
+$typography-text-margin-code-horizontal: theme-runtime.token(
+  'typography',
+  'typography-text-margin-code-horizontal',
+  $typography-text-margin-code-horizontal
+);
+$typography-paragraph-line-height: theme-runtime.token(
+  'typography',
+  'typography-paragraph-line-height',
+  $line-height-base
+);
+$typography-paragraph-line-height-close: theme-runtime.token(
+  'typography',
+  'typography-paragraph-line-height-close',
+  $typography-paragraph-line-height-close
+);
+$typography-operation-margin-left: theme-runtime.token(
+  'typography',
+  'typography-operation-margin-left',
+  $typography-operation-margin-left,
+  'spacing-1'
+);
+$typography-color-icon-copy: theme-runtime.token(
+  'typography',
+  'typography-color-icon-copy',
+  $typography-color-icon-copy
+);
+$typography-color-bg-icon-copy: theme-runtime.token(
+  'typography',
+  'typography-color-bg-icon-copy',
+  $typography-color-bg-icon-copy,
+  'color-transparent'
+);
+$typography-color-icon-copy_hover: theme-runtime.token(
+  'typography',
+  'typography-color-icon-copy-hover',
+  $typography-color-icon-copy_hover
+);
+$typography-color-bg-icon-copy_hover: theme-runtime.token(
+  'typography',
+  'typography-color-bg-icon-copy-hover',
+  $typography-color-bg-icon-copy_hover
+);
+$typography-color-icon-copy_copied: theme-runtime.token(
+  'typography',
+  'typography-color-icon-copy-copied',
+  $typography-color-icon-copy_copied,
+  'color-success-6'
+);
+$typography-color-icon-edit: theme-runtime.token(
+  'typography',
+  'typography-color-icon-edit',
+  $typography-color-icon-edit
+);
+$typography-color-bg-icon-edit: theme-runtime.token(
+  'typography',
+  'typography-color-bg-icon-edit',
+  $typography-color-bg-icon-edit,
+  'color-transparent'
+);
+$typography-color-icon-edit_hover: theme-runtime.token(
+  'typography',
+  'typography-color-icon-edit-hover',
+  $typography-color-icon-edit_hover
+);
+$typography-color-bg-icon-edit_hover: theme-runtime.token(
+  'typography',
+  'typography-color-bg-icon-edit-hover',
+  $typography-color-bg-icon-edit_hover
+);
+$typography-color-expand-text: theme-runtime.token(
+  'typography',
+  'typography-color-expand-text',
+  $typography-color-expand-text,
+  'color-primary-6'
+);
+$typography-color-expand-text_hover: theme-runtime.token(
+  'typography',
+  'typography-color-expand-text-hover',
+  $typography-color-expand-text_hover,
+  'color-primary-5'
+);
+$typography-color-blockquote-border-width: theme-runtime.token(
+  'typography',
+  'typography-color-blockquote-border-width',
+  $typography-color-blockquote-border-width
+);
+$typography-color-blockquote-border-left: theme-runtime.token(
+  'typography',
+  'typography-color-blockquote-border-left',
+  $typography-color-blockquote-border-left
+);
+$typography-color-blockquote-bg: theme-runtime.token(
+  'typography',
+  'typography-color-blockquote-bg',
+  $typography-color-blockquote-bg
+);
+$typography-heading-margin-top: theme-runtime.token(
+  'typography',
+  'typography-heading-margin-top',
+  $typography-heading-margin-top
+);
+$typography-heading-margin-bottom: theme-runtime.token(
+  'typography',
+  'typography-heading-margin-bottom',
+  $typography-heading-margin-bottom
+);

package/es/upload/index.d.ts

@@ -38,6 +38,7 @@ declare const Upload: {
             default: boolean;
         };
         customRequest: import("vue").PropType<(option: import("./interfaces").RequestOption) => import("./interfaces").UploadRequest>;
+        lockKey: import("vue").PropType<string | ((fileItem: import("./interfaces").FileItem) => string | undefined)>;
         limit: {
             type: NumberConstructor;
             default: number;
@@ -185,6 +186,7 @@ declare const Upload: {
             default: boolean;
         };
         customRequest: import("vue").PropType<(option: import("./interfaces").RequestOption) => import("./interfaces").UploadRequest>;
+        lockKey: import("vue").PropType<string | ((fileItem: import("./interfaces").FileItem) => string | undefined)>;
         limit: {
             type: NumberConstructor;
             default: number;
@@ -321,6 +323,7 @@ declare const Upload: {
         default: boolean;
     };
     customRequest: import("vue").PropType<(option: import("./interfaces").RequestOption) => import("./interfaces").UploadRequest>;
+    lockKey: import("vue").PropType<string | ((fileItem: import("./interfaces").FileItem) => string | undefined)>;
     limit: {
         type: NumberConstructor;
         default: number;