From be669463f07af7c99a3b29bd9c871cab8542c1cc Mon Sep 17 00:00:00 2001 From: devin Date: Fri, 24 Feb 2023 16:25:23 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E6=9B=B4=E6=96=B0link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/button/OButton.vue | 2 +- .../opendesign/src/components/button/types.ts | 4 +- .../opendesign/src/components/link/OLink.vue | 53 ++------ .../components/link/__demo__/LinkBasic.vue | 45 ++++--- .../src/components/link/style/index.scss | 113 +++++------------- .../src/components/link/style/var.scss | 62 ++++++---- .../opendesign/src/components/link/types.ts | 56 +++++++++ 7 files changed, 166 insertions(+), 169 deletions(-) create mode 100644 packages/opendesign/src/components/link/types.ts diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue index ee2613676..fe91c6479 100644 --- a/packages/opendesign/src/components/button/OButton.vue +++ b/packages/opendesign/src/components/button/OButton.vue @@ -1,8 +1,8 @@ diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss index 7943e6c45..d9cdd20bf 100644 --- a/packages/opendesign/src/components/input-number/style/index.scss +++ b/packages/opendesign/src/components/input-number/style/index.scss @@ -15,42 +15,19 @@ } } } -.o-input-number-btn { + +.o-input-number-btn-wrap { user-select: none; - align-items: center; justify-content: center; display: flex; min-width: var(--input-height); font-size: 16px; flex-wrap: wrap; color: var(--input-number-btn-color); - - &.both-left, - &.both-right { - background-color: var(--input-number-btn-bg); - - &:hover { - color: var(--input-number-btn-color-hover); - background-color: var(--input-number-btn-bg-hover); - } - &.is-disabled { - cursor: not-allowed; - background-color: var(--input-number-btn-bg-disabled); - color: var(--input-number-btn-color-disabled); - } - } - - .o-input-round-pill & { - &.both-right { - padding-right: 2px; - } - &.both-left { - padding-left: 2px; - } - } } -.o-input-number-btn-minus, -.o-input-number-btn-plus { + +.o-input-number-btn, +.o-input-number-btn { width: 100%; height: 50%; display: inline-flex; @@ -60,15 +37,31 @@ overflow: hidden; position: relative; background-color: var(--input-number-btn-bg); - + &.both-left, + &.both-right { + height: 100%; + } &:hover { color: var(--input-number-btn-color-hover); background-color: var(--input-number-btn-bg-hover); } + &:focus { + color: var(--input-number-btn-color-active); + background-color: var(--input-number-btn-bg-active); + } &.is-disabled { cursor: not-allowed; - background-color: var(--input-number-btn-bg-disabled); color: var(--input-number-btn-color-disabled); + background-color: var(--input-number-btn-bg-disabled); + } + + .o-input-round-pill & { + &.both-right { + padding-right: var(--input-number-btn-pill-fix); + } + &.both-left { + padding-left: var(--input-number-btn-pill-fix); + } } } .o-input-number-icon-minus { diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss index 499a7735c..4dec314b3 100644 --- a/packages/opendesign/src/components/input-number/style/var.scss +++ b/packages/opendesign/src/components/input-number/style/var.scss @@ -1,8 +1,11 @@ .o-input-number { - --input-number-btn-color: var(--o-color-text3); - --input-number-btn-color-hover: var(--o-color-primary1); - --input-number-btn-color-disabled: var(--o-color-text4); - --input-number-btn-bg: var(--o-color-bg2); - --input-number-btn-bg-hover: var(--o-color-normal1); - --input-number-btn-bg-disabled: var(--o-color-normal4); + --input-number-btn-color: var(--o-color-info3); + --input-number-btn-color-hover: var(--o-color-info1); + --input-number-btn-color-active: var(--o-color-info1); + --input-number-btn-color-disabled: var(--o-color-info4); + --input-number-btn-bg: transparent; + --input-number-btn-bg-hover: var(--o-color-control1-light); + --input-number-btn-bg-active: var(--o-color-control2-light); + --input-number-btn-bg-disabled: var(--o-color-control4-light); + --input-number-btn-pill-fix: 2px; } diff --git a/packages/opendesign/src/components/input-number/types.ts b/packages/opendesign/src/components/input-number/types.ts index 916981831..44b250ddf 100644 --- a/packages/opendesign/src/components/input-number/types.ts +++ b/packages/opendesign/src/components/input-number/types.ts @@ -1,91 +1,6 @@ import { ExtractPropTypes, PropType } from 'vue'; import { SizeT, RoundT } from '../_shared/global'; -// interface InputPropT { -// /** -// * 数字输入框的值 -// * v-model -// */ -// modelValue?: string | number; -// /** -// * 数字输入框的默认值 -// * 非受控 -// */ -// defaultValue?: string | number; -// /** -// * 按钮点击时步长 -// */ -// step?: number; -// /** -// * 最小值 -// */ -// min?: number; -// /** -// * 最大值 -// */ -// max?: number; -// /** -// * 样式尺寸 -// */ -// size?: SizeT; -// /** -// * 形状 -// */ -// shape?: ShapeT; -// /** -// * 提示文本 -// */ -// placeholder?: string; -// /** -// * 状态，显示指定，用于非表单场景 -// */ -// status?: 'success' | 'warning' | 'error'; -// /** -// * 是否禁用 -// */ -// disabled?: boolean; -// /** -// * 是否只读 -// */ -// readonly?: boolean; -// /** -// * 是否可以清除 -// */ -// clearable?: boolean; -// /** -// * 控制按钮位置 -// */ -// controls?: 'both' | 'right' | 'left' | 'none'; -// /** -// * 是否在输入合法时，更新modelvalue -// */ -// updateOnInput?: boolean; -// /** -// * 解析输入框的值 -// */ -// parse?: (value: string) => string; -// /** -// * 对值格式化，控制显示格式 -// * 需搭配parse处理，保证值的正确性 -// */ -// format?: (value: string | number) => string | number; -// } -// const props = withDefaults(defineProps(), { -// modelValue: undefined, -// defaultValue: undefined, -// step: 1, -// min: undefined, -// max: undefined, -// size: undefined, -// shape: undefined, -// placeholder: '', -// clearable: true, -// parse: undefined, -// format: undefined, -// status: undefined, -// controls: 'both', -// updateOnInput: true, -// }); export const inputNumberPorps = { /** * 下拉框的值 @@ -164,26 +79,12 @@ export const inputNumberPorps = { readonly: { type: Boolean, }, - /** - * 是否可以清除 - */ - clearable: { - type: Boolean, - default: true - }, /** * 是否自动增加宽度 */ autoWidth: { type: Boolean, }, - /** - * 是否是密码输入 - */ - type: { - type: String as PropType<'text' | 'password'>, - default: 'text' - }, /** * 解析输入框的值 */ diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue index 3865cc87e..0bab96192 100644 --- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue +++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue @@ -33,12 +33,49 @@ setTimeout(() => { +
+ + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + +

Size

@@ -78,20 +115,23 @@ setTimeout(() => { +
- - - + + + + + + + - - + + + - - + + +
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss index 651625054..203599d55 100644 --- a/packages/opendesign/src/components/input/style/index.scss +++ b/packages/opendesign/src/components/input/style/index.scss @@ -124,17 +124,40 @@ .o-input-prepend { display: flex; align-items: center; + background-color: var(--input-prepend-append-bg); + border: 1px solid var(--input-prepend-append-bd); } .o-input-append { - border: var(--input-prepend-append-bd); - border-left: 0; flex-shrink: 0; padding: var(--input-append-padding); border-top-right-radius: var(--input-radius); border-bottom-right-radius: var(--input-radius); } +.o-input-prepend { + flex-shrink: 0; + padding: var(--input-prepend-padding); + border-top-left-radius: var(--input-radius); + border-bottom-left-radius: var(--input-radius); +} +.o-input-solid { + .o-input-prepend { + border-width: 0 1px 0 0; + } + .o-input-append { + border-width: 0 0 0 1px; + } +} + +.o-input-outline { + .o-input-prepend { + border-right: 0; + } + .o-input-append { + border-left: 0; + } +} .o-input-input-wrap { position: relative; } @@ -150,12 +173,3 @@ top: 100%; pointer-events: none; } - -.o-input-prepend { - border: var(--input-prepend-append-bd); - border-right: 0; - flex-shrink: 0; - padding: var(--input-prepend-padding); - border-top-left-radius: var(--input-radius); - border-bottom-left-radius: var(--input-radius); -} diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss index acc5b57d3..497b66333 100644 --- a/packages/opendesign/src/components/input/style/var.scss +++ b/packages/opendesign/src/components/input/style/var.scss @@ -7,7 +7,7 @@ --input-bg-hover: transparent; --input-bg-focus: var(--o-color-control-white); - --input-prepend-append-bd: 1px solid var(--o-color-control1); + --input-prepend-append-bd: var(--o-color-control1); } .o-input-normal { @@ -15,7 +15,6 @@ --input-bd-hover: var(--o-color-primary2); --input-bd-focus: var(--o-color-primary3); --input-bd-disabled: var(--o-color-control4); - &.o-input-solid { --input-bd: var(--o-color-control1-light); --input-bd-hover: var(--o-color-control2-light); @@ -25,6 +24,11 @@ --input-bg: var(--o-color-control1-light); --input-bg-hover: var(--o-color-control2-light); --input-bg-disabled: var(--o-color-control4-light); + + --input-prepend-append-bd: var(--o-color-control2-light); + &.o-input-disabled { + --input-prepend-append-bd: var(--o-color-control4-light); + } } } @@ -82,6 +86,10 @@ } } +.o-input-solid { + --input-prepend-append-bg: var(--o-color-control1-light); +} + .o-input-disabled { --input-color: var(--o-color-info4); } -- Gitee From 8a460e535ec7b9d783a9bef3f4361b2e871adc85 Mon Sep 17 00:00:00 2001 From: devin Date: Wed, 1 Mar 2023 16:38:43 +0800 Subject: [PATCH 06/10] textarea --- .../src/components/button/style/index.scss | 26 +-- .../src/components/button/style/var.scss | 130 +++++++-------- .../__demo__/InputNumberBasic.vue | 4 +- .../components/input-number/style/index.scss | 8 +- .../components/input-number/style/var.scss | 8 +- .../src/components/input/OInput.vue | 2 +- .../src/components/input/style/index.scss | 22 +-- .../src/components/input/style/var.scss | 108 ++++++------- .../opendesign/src/components/input/types.ts | 6 - .../src/components/link/style/index.scss | 4 +- .../src/components/link/style/var.scss | 20 +-- .../src/components/popover/style/index.scss | 4 +- .../src/components/popover/style/var.scss | 2 +- .../src/components/textarea/OTextarea.vue | 106 ++----------- .../textarea/__demo__/TextareaBasic.vue | 101 ++++++------ .../src/components/textarea/style/index.scss | 85 ++-------- .../src/components/textarea/style/var.scss | 148 ++++++++++++------ .../src/components/textarea/types.ts | 131 ++++++++++++++++ 18 files changed, 485 insertions(+), 430 deletions(-) create mode 100644 packages/opendesign/src/components/textarea/types.ts diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss index 9032e6f66..4db5cd030 100644 --- a/packages/opendesign/src/components/button/style/index.scss +++ b/packages/opendesign/src/components/button/style/index.scss @@ -20,41 +20,41 @@ .o-btn-outline { color: var(--btn-color); - border: 1px solid var(--btn-bd); + border: 1px solid var(--btn-bd-color); &:not(.o-btn-disabled) { &:hover { color: var(--btn-color-hover); - border: 1px solid var(--btn-bd-hover); + border: 1px solid var(--btn-bd-color-hover); } &:active { color: var(--btn-color-active); - border: 1px solid var(--btn-bd-active); + border: 1px solid var(--btn-bd-color-active); } &:focus-visible { - border: 1px solid var(--btn-bd-active); + border: 1px solid var(--btn-bd-color-active); } } } .o-btn-solid { color: var(--btn-color); - border: 1px solid var(--btn-bd); - background-color: var(--btn-bg); + border: 1px solid var(--btn-bd-color); + background-color: var(--btn-bg-color); &:not(.o-btn-disabled) { &:hover { color: var(--btn-color-hover); - border: 1px solid var(--btn-bd-hover); - background-color: var(--btn-bg-hover); + border: 1px solid var(--btn-bd-color-hover); + background-color: var(--btn-bg-color-hover); } &:active { color: var(--btn-color-active); - border: 1px solid var(--btn-bd-active); - background-color: var(--btn-bg-active); + border: 1px solid var(--btn-bd-color-active); + background-color: var(--btn-bg-color-active); } &:focus-visible { - border: 1px solid var(--btn-bd-active); + border: 1px solid var(--btn-bd-color-active); } } } @@ -65,12 +65,12 @@ &:not(.o-btn-disabled) { &:hover { color: var(--btn-color-hover); - background-color: var(--btn-bg-hover); + background-color: var(--btn-bg-color-hover); } &:active { color: var(--btn-color-active); - background-color: var(--btn-bg-active); + background-color: var(--btn-bg-color-active); } } } diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss index 5ffb3c7a7..7617203b8 100644 --- a/packages/opendesign/src/components/button/style/var.scss +++ b/packages/opendesign/src/components/button/style/var.scss @@ -3,29 +3,29 @@ --btn-color-hover: var(--o-color-info1); --btn-color-active: var(--o-color-info1); - --btn-bd: var(--o-color-control1); - --btn-bd-hover: var(--o-color-control2); - --btn-bd-active: var(--o-color-control3); + --btn-bd-color: var(--o-color-control1); + --btn-bd-color-hover: var(--o-color-control2); + --btn-bd-color-active: var(--o-color-control3); &.o-btn-solid { - --btn-bg: var(--o-color-control1-light); - --btn-bg-hover: var(--o-color-control2-light); - --btn-bg-active: var(--o-color-control3-light); + --btn-bg-color: var(--o-color-control1-light); + --btn-bg-color-hover: var(--o-color-control2-light); + --btn-bg-color-active: var(--o-color-control3-light); - --btn-bd: var(--o-color-control1-light); - --btn-bd-hover: var(--o-color-control2-light); - --btn-bd-active: var(--o-color-control3-light); + --btn-bd-color: var(--o-color-control1-light); + --btn-bd-color-hover: var(--o-color-control2-light); + --btn-bd-color-active: var(--o-color-control3-light); } &.o-btn-text { - --btn-bg-hover: var(--o-color-control1-light); - --btn-bg-active: var(--o-color-control2-light); + --btn-bg-color-hover: var(--o-color-control1-light); + --btn-bg-color-active: var(--o-color-control2-light); } &.o-btn-disabled { --btn-color: var(--o-color-info4); - --btn-bg: var(--o-color-control4-light); - --btn-bd: var(--o-color-control4-light); + --btn-bg-color: var(--o-color-control4-light); + --btn-bd-color: var(--o-color-control4-light); } } .o-btn-primary { @@ -33,29 +33,29 @@ --btn-color-hover: var(--o-color-primary1); --btn-color-active: var(--o-color-primary1); - --btn-bd: var(--o-color-primary1); - --btn-bd-hover: var(--o-color-primary2); - --btn-bd-active: var(--o-color-primary3); + --btn-bd-color: var(--o-color-primary1); + --btn-bd-color-hover: var(--o-color-primary2); + --btn-bd-color-active: var(--o-color-primary3); &.o-btn-solid { - --btn-bg: var(--o-color-primary1); - --btn-bg-hover: var(--o-color-primary2); - --btn-bg-active: var(--o-color-primary3); + --btn-bg-color: var(--o-color-primary1); + --btn-bg-color-hover: var(--o-color-primary2); + --btn-bg-color-active: var(--o-color-primary3); - --btn-bd: var(--o-color-primary1); - --btn-bd-hover: var(--o-color-primary2); - --btn-bd-active: var(--o-color-primary3); + --btn-bd-color: var(--o-color-primary1); + --btn-bd-color-hover: var(--o-color-primary2); + --btn-bd-color-active: var(--o-color-primary3); } &.o-btn-text { - --btn-bg-hover: var(--o-color-primary1-light); - --btn-bg-active: var(--o-color-primary2-light); + --btn-bg-color-hover: var(--o-color-primary1-light); + --btn-bg-color-active: var(--o-color-primary2-light); } &.o-btn-disabled { --btn-color: var(--o-color-primary4); - --btn-bg: var(--o-color-primary4); - --btn-bd: var(--o-color-primary4); + --btn-bg-color: var(--o-color-primary4); + --btn-bd-color: var(--o-color-primary4); } } .o-btn-success { @@ -63,29 +63,29 @@ --btn-color-hover: var(--o-color-success1); --btn-color-active: var(--o-color-success1); - --btn-bd: var(--o-color-success1); - --btn-bd-hover: var(--o-color-success2); - --btn-bd-active: var(--o-color-success3); + --btn-bd-color: var(--o-color-success1); + --btn-bd-color-hover: var(--o-color-success2); + --btn-bd-color-active: var(--o-color-success3); &.o-btn-solid { - --btn-bg: var(--o-color-success1); - --btn-bg-hover: var(--o-color-success2); - --btn-bg-active: var(--o-color-success3); + --btn-bg-color: var(--o-color-success1); + --btn-bg-color-hover: var(--o-color-success2); + --btn-bg-color-active: var(--o-color-success3); - --btn-bd: var(--o-color-success1); - --btn-bd-hover: var(--o-color-success2); - --btn-bd-active: var(--o-color-success3); + --btn-bd-color: var(--o-color-success1); + --btn-bd-color-hover: var(--o-color-success2); + --btn-bd-color-active: var(--o-color-success3); } &.o-btn-text { - --btn-bg-hover: var(--o-color-success1-light); - --btn-bg-active: var(--o-color-success2-light); + --btn-bg-color-hover: var(--o-color-success1-light); + --btn-bg-color-active: var(--o-color-success2-light); } &.o-btn-disabled { --btn-color: var(--o-color-success4); - --btn-bg: var(--o-color-success4); - --btn-bd: var(--o-color-success4); + --btn-bg-color: var(--o-color-success4); + --btn-bd-color: var(--o-color-success4); } } .o-btn-warning { @@ -93,29 +93,29 @@ --btn-color-hover: var(--o-color-warning1); --btn-color-active: var(--o-color-warning1); - --btn-bd: var(--o-color-warning1); - --btn-bd-hover: var(--o-color-warning2); - --btn-bd-active: var(--o-color-warning3); + --btn-bd-color: var(--o-color-warning1); + --btn-bd-color-hover: var(--o-color-warning2); + --btn-bd-color-active: var(--o-color-warning3); &.o-btn-solid { - --btn-bg: var(--o-color-warning1); - --btn-bg-hover: var(--o-color-warning2); - --btn-bg-active: var(--o-color-warning3); + --btn-bg-color: var(--o-color-warning1); + --btn-bg-color-hover: var(--o-color-warning2); + --btn-bg-color-active: var(--o-color-warning3); - --btn-bd: var(--o-color-warning1); - --btn-bd-hover: var(--o-color-warning2); - --btn-bd-active: var(--o-color-warning3); + --btn-bd-color: var(--o-color-warning1); + --btn-bd-color-hover: var(--o-color-warning2); + --btn-bd-color-active: var(--o-color-warning3); } &.o-btn-text { - --btn-bg-hover: var(--o-color-warning1-light); - --btn-bg-active: var(--o-color-warning2-light); + --btn-bg-color-hover: var(--o-color-warning1-light); + --btn-bg-color-active: var(--o-color-warning2-light); } &.o-btn-disabled { --btn-color: var(--o-color-warning4); - --btn-bg: var(--o-color-warning4); - --btn-bd: var(--o-color-warning4); + --btn-bg-color: var(--o-color-warning4); + --btn-bd-color: var(--o-color-warning4); } } .o-btn-danger { @@ -123,29 +123,29 @@ --btn-color-hover: var(--o-color-danger1); --btn-color-active: var(--o-color-danger1); - --btn-bd: var(--o-color-danger1); - --btn-bd-hover: var(--o-color-danger2); - --btn-bd-active: var(--o-color-danger3); + --btn-bd-color: var(--o-color-danger1); + --btn-bd-color-hover: var(--o-color-danger2); + --btn-bd-color-active: var(--o-color-danger3); &.o-btn-solid { - --btn-bg: var(--o-color-danger1); - --btn-bg-hover: var(--o-color-danger2); - --btn-bg-active: var(--o-color-danger3); + --btn-bg-color: var(--o-color-danger1); + --btn-bg-color-hover: var(--o-color-danger2); + --btn-bg-color-active: var(--o-color-danger3); - --btn-bd: var(--o-color-danger1); - --btn-bd-hover: var(--o-color-danger2); - --btn-bd-active: var(--o-color-danger3); + --btn-bd-color: var(--o-color-danger1); + --btn-bd-color-hover: var(--o-color-danger2); + --btn-bd-color-active: var(--o-color-danger3); } &.o-btn-text { - --btn-bg-hover: var(--o-color-danger1-light); - --btn-bg-active: var(--o-color-danger2-light); + --btn-bg-color-hover: var(--o-color-danger1-light); + --btn-bg-color-active: var(--o-color-danger2-light); } &.o-btn-disabled { --btn-color: var(--o-color-danger4); - --btn-bg: var(--o-color-danger4); - --btn-bd: var(--o-color-danger4); + --btn-bg-color: var(--o-color-danger4); + --btn-bd-color: var(--o-color-danger4); } } diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue index f3e334468..281aedf32 100644 --- a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue +++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue @@ -11,7 +11,7 @@ const val3 = ref(3333); const val4 = ref('1px');