bge-ui 1.0.13 → 1.0.15

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, unref, getCurrentScope, onScopeDispose, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, withDirectives, vModelDynamic, vModelText, withModifiers, vShow, cloneVNode, Fragment, Text, Comment, onUnmounted, h, Transition, createBlock, Teleport, resolveDynamicComponent, shallowReactive, render, isVNode } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, unref, getCurrentScope, onScopeDispose, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, withDirectives, vModelDynamic, vModelText, createBlock, withModifiers, cloneVNode, Fragment, Text, Comment, onUnmounted, h, Transition, vShow, Teleport, resolveDynamicComponent, shallowReactive, render, isVNode } from "vue";
 const _hoisted_1$1V = ["disabled"];
 const _hoisted_2$1F = { class: "loading-icon" };
 const _sfc_main$1Y = /* @__PURE__ */ defineComponent({
@@ -6772,16 +6772,15 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["bge-input__suffix", { suffix: !!unref(suffixSlot) }])
           }, [
             createElementVNode("span", _hoisted_6, [
-              withDirectives(createVNode(_sfc_main$1u, {
+              input.value ? (openBlock(), createBlock(_sfc_main$1u, {
+                key: 0,
                 class: "bge-input__icon clear",
                 onMouseover: _cache[2] || (_cache[2] = withModifiers(($event) => hoverClear(true), ["prevent"])),
                 onMouseout: _cache[3] || (_cache[3] = withModifiers(($event) => hoverClear(false), ["prevent"])),
                 onClick: handelClear,
                 size: "20"
-              }, null, 512), [
-                [vShow, isFocus.value]
-              ]),
-              __props.type !== "textarea" ? renderSlot(_ctx.$slots, "suffix", { key: 0 }) : createCommentVNode("", true)
+              })) : createCommentVNode("", true),
+              __props.type !== "textarea" ? renderSlot(_ctx.$slots, "suffix", { key: 1 }) : createCommentVNode("", true)
             ])
           ], 2)
         ], 2)
@@ -6804,6 +6803,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     modelValue: {
       type: String,
       default: ""
+    },
+    size: {
+      default: "default",
+      value: ["default", "large"]
     }
   },
   emits: "update:modelValue",
@@ -6853,7 +6856,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(`bge-tabs bge-tabs__${__props.type}`)
+        class: normalizeClass(`bge-tabs bge-tabs__${__props.type} bge-tabs__${__props.size}`)
       }, [
         createElementVNode("div", _hoisted_1$2, [
           renderSlot(_ctx.$slots, "default")

package/dist/style.css

@@ -16,7 +16,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: 4px;
+  gap: 0;
   /* 定义keyframes规则 */
 }
 .bge-button + .bge-button {
@@ -97,6 +97,7 @@
 .bge-button.loading {
   pointer-events: none;
   background: var(--btn-disable);
+  gap: 4px;
 }
 .bge-button.loading .loading-icon {
   opacity: 0.4;
@@ -3339,6 +3340,9 @@ to {
 .bge-input .bge-input__wrapper.textarea .bge-input__prefix {
   display: none;
 }
+.bge-input .bge-input__wrapper:hover .bge-input__suffix .bge-input__suffix-inner .clear, .bge-input .bge-input__wrapper.focus .bge-input__suffix .bge-input__suffix-inner .clear {
+  display: block;
+}
 .bge-input .bge-input__inner {
   color: var(--tc-primary, #E0E0E0);
   caret-color: var(--tc-theme, #FFFF38);
@@ -3408,14 +3412,15 @@ to {
 .bge-input .bge-input__suffix .bge-input__prefix-inner .clear,
 .bge-input .bge-input__prefix .bge-input__suffix-inner .clear,
 .bge-input .bge-input__prefix .bge-input__prefix-inner .clear {
-  color: #53677A;
+  color: var(--tc-tertiary);
   cursor: pointer;
+  display: none;
 }
 .bge-input .bge-input__suffix .bge-input__suffix-inner .clear:hover,
 .bge-input .bge-input__suffix .bge-input__prefix-inner .clear:hover,
 .bge-input .bge-input__prefix .bge-input__suffix-inner .clear:hover,
 .bge-input .bge-input__prefix .bge-input__prefix-inner .clear:hover {
-  color: #E0E0E0;
+  color: var(--tc-primary);
 }
 .bge-input .bge-input__prefix .bge-input__prefix-inner {
   padding-right: 8px;
@@ -3424,6 +3429,16 @@ to {
   align-items: flex-start;
   position: relative;
 }
+.bge-tabs.bge-tabs__default .bge-tabs__panes {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+.bge-tabs.bge-tabs__large .bge-tabs__panes {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 28px;
+}
 .bge-tabs.bge-tabs__bordered::after {
   content: "";
   position: absolute;
@@ -3474,6 +3489,9 @@ to {
   color: var(--persistent-black, #000);
   background: var(--btn-primary, #FFFF38);
 }
+.bge-tabs__bordered {
+  position: relative;
+}
 .bge-tabs__bordered .bge-tab__pane {
   display: flex;
   padding: var(--layout-x-2, 8px) 0px;
@@ -3483,10 +3501,6 @@ to {
   border-radius: var(--radius-small, 0px);
   color: var(--tc-tertiary, #53677A);
   cursor: pointer;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 28px;
   margin-right: 16px;
 }
 .bge-tabs__bordered .bge-tab__pane:last-child {
@@ -3721,12 +3735,16 @@ to {
   align-items: center;
 }
 .bge-dialog .bge-dialog__header .bge-dialog__close {
-  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 48px;
   width: 48px;
+  color: var(--tc-tertiary);
+  cursor: pointer;
+}
+.bge-dialog .bge-dialog__header .bge-dialog__close:hover {
+  color: var(--tc-primary);
 }
 .bge-dialog .bge-dialog__body {
   padding: 16px 24px;

package/dist/tabs/index.vue.d.ts

@@ -7,6 +7,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    size: {
+        default: string;
+        value: string[];
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     [x: string]: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -18,7 +22,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    size: {
+        default: string;
+        value: string[];
+    };
 }>>, {
+    size: string;
     type: string;
     modelValue: string;
 }, {}>, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/button/index.vue

@@ -137,7 +137,7 @@ defineProps({
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: 4px;
+  gap: 0;
 
   &:hover {
     background: var(--btn-hover);
@@ -162,6 +162,7 @@ defineProps({
   &.loading {
     pointer-events: none;
     background: var(--btn-disable);
+    gap: 4px;
 
     .loading-icon {
       opacity: 0.4;

package/src/dialog/index.vue

@@ -147,12 +147,17 @@ function close() {
     align-items: center;
 
     .bge-dialog__close {
-      cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 48px;
       width: 48px;
+      color: var(--tc-tertiary);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--tc-primary);
+      }
     }
   }
 

package/src/input/index.vue

@@ -14,7 +14,7 @@
         @change="handleChange" @input="handleInput" />
       <span class="bge-input__suffix" :class="{ suffix: !!suffixSlot }">
         <span class="bge-input__suffix-inner">
-          <mono-close class="bge-input__icon clear" v-show="isFocus" @mouseover.prevent="hoverClear(true)"
+          <mono-close class="bge-input__icon clear" v-if="input"  @mouseover.prevent="hoverClear(true)"
             @mouseout.prevent="hoverClear(false)" @click="handelClear" size="20" />
           <slot v-if="type !== 'textarea'" name="suffix" />
         </span>
@@ -160,6 +160,17 @@ function handelClear() {
         display: none;
       }
     }
+
+    &:hover, 
+    &.focus {
+      .bge-input__suffix {
+        .bge-input__suffix-inner{
+          .clear {
+            display: block;
+          }
+        }
+      }
+    }
   }
 
   .bge-input__inner {
@@ -235,11 +246,12 @@ function handelClear() {
       }
 
       .clear {
-        color: #53677A;
+        color: var(--tc-tertiary);
         cursor: pointer;
+        display: none;
 
         &:hover {
-          color: #E0E0E0;
+          color: var(--tc-primary);
         }
       }
     }

package/src/tabs/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`bge-tabs bge-tabs__${type}`">
+  <div :class="`bge-tabs bge-tabs__${type} bge-tabs__${size}`">
     <div class="bge-tabs__panes">
       <slot></slot>
     </div>
@@ -21,6 +21,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  size: {
+    default: 'default',
+    value: ['default', 'large']
+  }
 })
 
 const emits = defineEmits('update:modelValue')
@@ -92,6 +96,24 @@ onMounted(() => {
     }
   }
 
+
+
+  &.bge-tabs__default {
+    .bge-tabs__panes {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 24px;
+    }
+  }
+
+  &.bge-tabs__large {
+    .bge-tabs__panes {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 28px;
+    }
+  }
+
   &.bge-tabs__bordered {
     &::after {
       content: "";

package/src/tabs/tab-pane.vue

@@ -68,6 +68,8 @@ onMounted(() => {
 }
 
 .bge-tabs__bordered {
+  position: relative;
+
   .bge-tab__pane {
     display: flex;
     padding: var(--layout-x-2, 8px) 0px;
@@ -77,10 +79,6 @@ onMounted(() => {
     border-radius: var(--radius-small, 0px);
     color: var(--tc-tertiary, #53677A);
     cursor: pointer;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 28px;
     margin-right: 16px;
 
     &:last-child {