bge-ui 1.3.5 → 1.3.7

package/dist/index.js

@@ -6280,7 +6280,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   props: {
     type: {
       default: "bordered",
-      value: ["bordered", "pills"]
+      value: ["bordered", "pills", "pills-elevated"]
     },
     modelValue: {
       type: String,
@@ -6288,7 +6288,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     },
     size: {
       default: "default",
-      value: ["default", "large"]
+      value: ["default", "large", "mini"]
     }
   },
   emits: ["update:modelValue"],
@@ -15017,7 +15017,15 @@ const formatDate = (value, formatProp, formatLocale, rangeSeparator, modelAuto,
     return formatProp(value);
   const options = formatLocale ? { locale: formatLocale } : void 0;
   if (Array.isArray(value)) {
-    return `${format(value[0], pattern4, options)}${modelAuto && !value[1] ? "" : rangeSeparator}${value[1] ? format(value[1], pattern4, options) : ""}`;
+    let result = "";
+    if (isValidDate(value[0])) {
+      result += `${format(value[0], pattern4, options)}`;
+    }
+    result += `${modelAuto && !value[1] ? "" : rangeSeparator}`;
+    if (isValidDate(value[1])) {
+      result += `${format(value[1], pattern4, options)}`;
+    }
+    return result;
   }
   return format(value, pattern4, options);
 };
@@ -15033,7 +15041,7 @@ const checkRangeEnabled = (fn2, range3) => {
 };
 const isValidDate = (value) => {
   if (Array.isArray(value)) {
-    return isValid(value[0]) && (value[1] ? isValid(value[1]) : true);
+    return isValid(value[0]) || (value[1] ? isValid(value[1]) : true);
   }
   return value ? isValid(value) : false;
 };
@@ -17455,7 +17463,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return [formatDatePreview(dates[0]), formatDatePreview(dates[1])];
     };
     const formatDatePreview = (date4) => {
-      console.log(defaultedPreviewFormat.value);
       return formatDate(
         date4,
         defaultedPreviewFormat.value,
@@ -22514,13 +22521,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function close(type4) {
-      if (type4 === "start") {
-        date4.value[0] = "";
-      } else if (type4 === "end") {
-        date4.value[1] = "";
-      } else {
-        date4.value = "";
-      }
+      date4.value = void 0;
     }
     const emit = __emit;
     const inputValue = ref();
@@ -22570,7 +22571,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(inputValue.value && inputValue.value[0] || "结束日期") + " ", 1),
               createVNode(_component_MonoClose, {
                 class: "bge-datepicker__close",
-                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close("start"), ["stop"]))
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
               }),
               createVNode(_component_MonoCalendar, { class: "bge-datepicker__icon" })
             ], 2),
@@ -22582,7 +22583,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(inputValue.value && inputValue.value[1] || "结束日期") + " ", 1),
               createVNode(_component_MonoClose, {
                 class: "bge-datepicker__close",
-                onClick: _cache[2] || (_cache[2] = withModifiers(($event) => close("end"), ["stop"]))
+                onClick: _cache[2] || (_cache[2] = withModifiers(($event) => close(), ["stop"]))
               }),
               createVNode(_component_MonoCalendar, { class: "bge-datepicker__icon" })
             ], 2)
@@ -22605,7 +22606,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-07284380"]]);
+const UiDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a163f1fb"]]);
 const components = {
   UiButton: _sfc_main$2e,
   UiLink: _sfc_main$2d,

package/dist/style.css

@@ -902,10 +902,24 @@ to {
 }
 .bge-input .bge-input__prefix .bge-input__prefix-inner {
   padding-right: 8px;
-}.bge-tabs.bge-tabs__bordered .bge-tabs__panes, .bge-tabs.bge-tabs__pills .bge-tabs__panes {
+}.bge-tabs.bge-tabs__bordered .bge-tabs__panes, .bge-tabs.bge-tabs__pills .bge-tabs__panes, .bge-tabs.bge-tabs__pills-elevated .bge-tabs__panes {
   display: flex;
   align-items: flex-start;
   position: relative;
+  background: var(--bg-opacity);
+  border-radius: var(--radius-small, 4px);
+}
+.bge-tabs.bge-tabs__pills-elevated .bge-tabs__panes .bge-tab__pane {
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+.bge-tabs.bge-tabs__pills-elevated.bge-tabs__mini .bge-tabs__panes .bge-tab__pane {
+  padding: 2px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
 }
 .bge-tabs.bge-tabs__default .bge-tabs__panes {
   font-size: 14px;
@@ -951,10 +965,6 @@ to {
   color: var(--tc-tertiary, #53677A);
   cursor: pointer;
   text-align: center;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
 }
 .bge-tabs__pills .bge-tab__pane:last-child {
   margin-right: 0;
@@ -967,6 +977,18 @@ to {
   color: var(--persistent-black, #000);
   background: var(--btn-primary, #FFFF38);
 }
+.bge-tabs__pills-elevated .bge-tab__pane {
+  color: var(--tc-tertiary);
+  cursor: pointer;
+}
+.bge-tabs__pills-elevated .bge-tab__pane:hover {
+  color: var(--tc-title);
+}
+.bge-tabs__pills-elevated .bge-tab__pane.active {
+  color: var(--tc-title);
+  background: var(--bg-fusion);
+  border-radius: var(--radius-small, 4px);
+}
 .bge-tabs__bordered {
   position: relative;
 }
@@ -1651,7 +1673,7 @@ to {
 }
 .bge-option.active[data-v-8a6e1228] {
   color: var(--tc-title);
-}.bge-datepicker[data-v-07284380] {
+}.bge-datepicker[data-v-a163f1fb] {
   width: 100%;
   display: flex;
   align-items: center;
@@ -1662,7 +1684,7 @@ to {
   font-weight: 500;
   cursor: pointer;
 }
-.bge-datepicker .bge-datepicker__input[data-v-07284380] {
+.bge-datepicker .bge-datepicker__input[data-v-a163f1fb] {
   font-size: 12px;
   line-height: 20px;
   font-weight: 500;
@@ -1676,32 +1698,32 @@ to {
   flex: 1;
   border-radius: var(--radius-small, 4px);
 }
-.bge-datepicker .bge-datepicker__input .bge-datepicker__icon[data-v-07284380],
-.bge-datepicker .bge-datepicker__input .bge-datepicker__close[data-v-07284380] {
+.bge-datepicker .bge-datepicker__input .bge-datepicker__icon[data-v-a163f1fb],
+.bge-datepicker .bge-datepicker__input .bge-datepicker__close[data-v-a163f1fb] {
   font-size: 16px !important;
   color: var(--tc-quaternary);
 }
-.bge-datepicker .bge-datepicker__input .bge-datepicker__icon[data-v-07284380]:hover,
-.bge-datepicker .bge-datepicker__input .bge-datepicker__close[data-v-07284380]:hover {
+.bge-datepicker .bge-datepicker__input .bge-datepicker__icon[data-v-a163f1fb]:hover,
+.bge-datepicker .bge-datepicker__input .bge-datepicker__close[data-v-a163f1fb]:hover {
   color: var(--tc-title);
 }
-.bge-datepicker .bge-datepicker__input .bge-datepicker__close[data-v-07284380] {
+.bge-datepicker .bge-datepicker__input .bge-datepicker__close[data-v-a163f1fb] {
   display: none;
 }
-.bge-datepicker .bge-datepicker__input[data-v-07284380]:hover {
+.bge-datepicker .bge-datepicker__input[data-v-a163f1fb]:hover {
   background: var(--bg-opacity-hover);
   border: solid 1px transparent;
 }
-.bge-datepicker .bge-datepicker__input.focus[data-v-07284380] {
+.bge-datepicker .bge-datepicker__input.focus[data-v-a163f1fb] {
   border: solid 1px var(--tc-theme);
 }
-.bge-datepicker .bge-datepicker__input.inputed[data-v-07284380] {
+.bge-datepicker .bge-datepicker__input.inputed[data-v-a163f1fb] {
   color: var(--tc-title);
 }
-.bge-datepicker .bge-datepicker__input.inputed:hover .bge-datepicker__close[data-v-07284380] {
+.bge-datepicker .bge-datepicker__input.inputed:hover .bge-datepicker__close[data-v-a163f1fb] {
   display: block;
 }
-.bge-datepicker .bge-datepicker__input.inputed:hover .bge-datepicker__icon[data-v-07284380] {
+.bge-datepicker .bge-datepicker__input.inputed:hover .bge-datepicker__icon[data-v-a163f1fb] {
   display: none;
 }.dp__input_wrap {
   position: relative;

package/package.json

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

package/src/datePicker/components/ActionRow.vue

@@ -166,7 +166,6 @@
     };
 
     const formatDatePreview = (date: Date) => {
-      console.log(defaultedPreviewFormat.value)
         return formatDate(
             date,
             defaultedPreviewFormat.value as string,

package/src/datePicker/composables/calendar-class.ts

@@ -81,7 +81,6 @@ export const useCalendarClass = (modelValue: WritableComputedRef<InternalModuleV
             if (props.hideOffsetDates && !day.current) return false;
             return isDateEqual(getDate(day.value), modelValue.value[isStart ? 0 : 1]);
         }
-
         if (defaultedRange.value.enabled) {
             return (
                 (checkDateEqual(day, isStart) && checkDateBefore(isStart)) ||

package/src/datePicker/composables/external-internal-mapper.ts

@@ -264,7 +264,6 @@ export const useExternalInternalMapper = (emit: VueEmit, props: AllPropsType, is
      */
     const parseExternalModelValue = (value: ModelValue): void => {
         const mappedDate = mapExternalToInternal(value);
-
         if (isValidDate(convertType(mappedDate))) {
             internalModelValue.value = convertType(mappedDate);
             formatInputValue();

package/src/datePicker/index.vue

@@ -49,13 +49,14 @@ function toggle(type: string) {
 }
 
 function close(type?: string) {
-  if (type === 'start') {
-    date.value[0] = ''
-  } else if (type === 'end') {
-    date.value[1] = ''
-  } else {
-    date.value = ''
-  }
+  date.value = undefined
+  // if (type === 'start') {
+  //   date.value[0] = undefined
+  // } else if (type === 'end') {
+  //   date.value[1] = undefined
+  // } else {
+  //   date.value = undefined
+  // }
 }
 
 const emit = defineEmits([

package/src/datePicker/utils/date-utils.ts

@@ -317,11 +317,19 @@ export const formatDate = (
 ) => {
     if (typeof formatProp === 'function' && !parser) return formatProp(value);
     const options = formatLocale ? { locale: formatLocale } : undefined;
-
     if (Array.isArray(value)) {
-        return `${format(value[0], pattern, options)}${modelAuto && !value[1] ? '' : rangeSeparator}${
-            value[1] ? format(value[1], pattern, options) : ''
-        }`;
+      let result = ''
+      if (isValidDate(value[0])) {
+        result += `${format(value[0], pattern, options)}`
+      }
+      result += `${modelAuto && !value[1] ? '' : rangeSeparator}`
+      if (isValidDate(value[1])) {
+        result += `${format(value[1], pattern, options)}`
+      }
+      return result
+        // return `${format(value[0], pattern, options)}${modelAuto && !value[1] ? '' : rangeSeparator}${
+        //     value[1] ? format(value[1], pattern, options) : ''
+        // }`;
     }
 
     return format(value, pattern, options);
@@ -340,7 +348,7 @@ export const checkRangeEnabled = <T>(fn: () => T, range: boolean): T => {
 
 export const isValidDate = (value: Date | Date[] | null | (Date | null)[]): boolean => {
     if (Array.isArray(value)) {
-        return isValid(value[0]) && (value[1] ? isValid(value[1]) : true);
+        return isValid(value[0]) || (value[1] ? isValid(value[1]) : true);
     }
     return value ? isValid(value) : false;
 };

package/src/tabs/index.vue

@@ -15,7 +15,7 @@ defineOptions({
 const props = defineProps({
   type: {
     default: 'bordered',
-    value: ['bordered', 'pills']
+    value: ['bordered', 'pills', 'pills-elevated']
   },
   modelValue: {
     type: String,
@@ -23,7 +23,7 @@ const props = defineProps({
   },
   size: {
     default: 'default',
-    value: ['default', 'large']
+    value: ['default', 'large', 'mini']
   }
 })
 
@@ -92,13 +92,40 @@ onMounted(() => {
 .bge-tabs {
 
   &.bge-tabs__bordered,
-  &.bge-tabs__pills {
+  &.bge-tabs__pills,
+  &.bge-tabs__pills-elevated {
     .bge-tabs__panes {
       display: flex;
       align-items: flex-start;
       position: relative;
+      background: var(--bg-opacity);
+      border-radius: var(--radius-small, 4px);
+    }
+  }
+  &.bge-tabs__pills-elevated {
+    .bge-tabs__panes {
+      .bge-tab__pane {
+        padding: 6px 12px;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 24px;
+      }
+    }
+
+
+    &.bge-tabs__mini {
+      .bge-tabs__panes {
+        .bge-tab__pane {
+          padding: 2px 12px;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 20px;
+        }
+      }
     }
   }
+    
+
 
 
 

package/src/tabs/tab-pane.vue

@@ -46,10 +46,6 @@ onMounted(() => {
     color: var(--tc-tertiary, #53677A);
     cursor: pointer;
     text-align: center;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
 
     &:last-child {
       margin-right: 0;
@@ -67,6 +63,23 @@ onMounted(() => {
   }
 }
 
+.bge-tabs__pills-elevated {
+  .bge-tab__pane {
+    color: var(--tc-tertiary);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--tc-title);
+    }
+
+    &.active {
+      color: var(--tc-title);
+      background: var(--bg-fusion);
+      border-radius: var(--radius-small, 4px);
+    }
+  }
+}
+
 .bge-tabs__bordered {
   position: relative;