@maxtropy/v-components 0.1.12-beta.4 → 0.1.12-beta.6

package/lib/components/tabs/MxTabs.css

@@ -0,0 +1,132 @@
+.mx-tabs[data-v-810cdef6] {
+  --el-border-color-light: rgba(255, 255, 255, 0.2);
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__nav-wrap.is-top::after {
+  height: 1px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__header {
+  --el-color-primary: #4a90e2;
+  --el-text-color-primary: rgba(255, 255, 255, 0.65);
+  --el-disabled-text-color: rgba(255, 255, 255, 0.3);
+  --el-border-color: rgba(255, 255, 255, 0.2);
+  --el-tabs-header-height: 46px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__header.is-top .el-tabs__active-bar {
+  display: none;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__header .el-tabs__item,
+.mx-tabs[data-v-810cdef6] .el-tabs__header .el-tabs__new-tab {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  height: 46px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__header .el-tabs__item:not(.is-left, .is-right):not(:nth-child(1), :nth-child(2)),
+.mx-tabs[data-v-810cdef6] .el-tabs__header .el-tabs__new-tab:not(.is-left, .is-right):not(:nth-child(1), :nth-child(2)) {
+  margin-left: 16px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__header.is-top .el-tabs__item.is-active {
+  border-bottom: 2px solid #4a90e2;
+  font-weight: 500;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__header .el-tabs__new-tab {
+  margin: 0;
+  font-size: 16px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__header .el-tabs__nav-next,
+.mx-tabs[data-v-810cdef6] .el-tabs__header .el-tabs__nav-prev {
+  font-size: 14px;
+  line-height: 22px;
+  padding: 12px 0;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__item.is-left {
+  padding: 8px 24px 8px 32px;
+  height: 38px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__item.is-left:not(:nth-child(1), :nth-child(2)) {
+  margin-top: 16px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__item.is-right {
+  padding: 8px 32px 8px 24px;
+  height: 38px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__item.is-right:not(:nth-child(1), :nth-child(2)) {
+  margin-top: 16px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__nav-wrap.is-left::after,
+.mx-tabs[data-v-810cdef6] .el-tabs__nav-wrap.is-right::after {
+  width: 1px;
+}
+.mx-tabs[data-v-810cdef6] .el-tabs__nav-wrap.is-left .el-tabs__nav-next,
+.mx-tabs[data-v-810cdef6] .el-tabs__nav-wrap.is-left .el-tabs__nav-prev,
+.mx-tabs[data-v-810cdef6] .el-tabs__nav-wrap.is-right .el-tabs__nav-next,
+.mx-tabs[data-v-810cdef6] .el-tabs__nav-wrap.is-right .el-tabs__nav-prev {
+  padding: 8px 24px 8px 32px;
+}
+.mx-tabs.mx-tabs-selected-line-top[data-v-810cdef6] :not(.el-tabs--card) .el-tabs__active-bar {
+  top: 0;
+}
+.mx-tabs.mx-tabs-selected-line-top[data-v-810cdef6] :not(.el-tabs--card) .el-tabs__item.is-active {
+  border-bottom: 0;
+  border-top: 2px solid #4a90e2;
+}
+.mx-tabs.mx-tabs-display-bordered[data-v-810cdef6] :not(.el-tabs--card) .el-tabs__nav-wrap::after {
+  display: none;
+}.mx-tabs.el-tabs--card > .el-tabs__header.is-top {
+  --el-tabs-header-height: 40px;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__nav {
+  border: none;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item {
+  padding: 9px 16px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px 2px 0px 0px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: none;
+  margin-left: 2px !important;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item:first-child {
+  margin-left: 0 !important;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item.is-active {
+  border-bottom: 1px solid #232324;
+  background: transparent;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item.is-closable, .mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item.is-closable:hover {
+  padding: 9px 16px !important;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item.is-closable .is-icon-close, .mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item.is-closable:hover .is-icon-close {
+  width: 16px;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item .is-icon-close {
+  font-size: 16px;
+  margin-left: 8px;
+  height: 16px;
+  width: 16px;
+  color: rgba(255, 255, 255, 0.45);
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__item .is-icon-close:hover {
+  color: rgba(255, 255, 255, 0.85);
+  background-color: transparent;
+}
+.mx-tabs.el-tabs--card > .el-tabs__header.is-top .el-tabs__new-tab {
+  padding: 9px 16px;
+  height: 40px;
+  border-style: dashed;
+  background: transparent;
+}
+.mx-tabs.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
+.mx-tabs.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+.mx-tabs.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+.mx-tabs.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+  padding-left: 12px;
+}
+.mx-tabs.el-tabs--bottom .el-tabs__item.is-bottom:last-child,
+.mx-tabs.el-tabs--bottom .el-tabs__item.is-top:last-child,
+.mx-tabs.el-tabs--top .el-tabs__item.is-bottom:last-child,
+.mx-tabs.el-tabs--top .el-tabs__item.is-top:last-child {
+  padding-right: 12px;
+}

package/lib/components/tabs/MxTabs.vue.d.ts

@@ -0,0 +1,37 @@
+type Props = {
+    bordered?: boolean;
+    selectedLinePlacement?: 'top' | 'bottom';
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    bordered: boolean;
+    selectedLinePlacement: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    bordered: boolean;
+    selectedLinePlacement: string;
+}>>>, {
+    bordered: boolean;
+    selectedLinePlacement: "top" | "bottom";
+}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/lib/components/tabs/MxTabs.vue.js

@@ -0,0 +1,43 @@
+"use strict";
+const vue = require("vue");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxTabs",
+  props: {
+    bordered: { type: Boolean, default: true },
+    selectedLinePlacement: { default: "bottom" }
+  },
+  setup(__props) {
+    const props = __props;
+    const classObject = vue.reactive({
+      "mx-tabs": true
+    });
+    vue.watchEffect(() => {
+      classObject["mx-tabs-display-bordered"] = !props.bordered;
+      classObject["mx-tabs-selected-line-top"] = props.selectedLinePlacement === "top";
+    });
+    return (_ctx, _cache) => {
+      const _component_ElTabs = vue.resolveComponent("ElTabs");
+      return vue.openBlock(), vue.createBlock(_component_ElTabs, vue.mergeProps({ class: classObject }, _ctx.$attrs), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.$slots, (item, key, index) => {
+          return {
+            name: key,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, key, {}, void 0, true)
+            ])
+          };
+        })
+      ]), 1040, ["class"]);
+    };
+  }
+});
+const MxTabs_vue_vue_type_style_index_0_scoped_810cdef6_lang = "";
+const MxTabs_vue_vue_type_style_index_1_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const MxTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-810cdef6"]]);
+module.exports = MxTabs;

package/lib/components/tag/MxTag.css

@@ -0,0 +1,84 @@
+.mx-tag.el-tag {
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  padding: 0 8px;
+  height: 22px;
+}
+.mx-tag.el-tag .el-tag__content {
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 20px;
+}
+.mx-tag.el-tag .el-icon.el-tag__close {
+  color: rgba(255, 255, 255, 0.45);
+}
+.mx-tag.el-tag .el-icon.el-tag__close:hover {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-tag.el-tag.el-tag--success {
+  border: 1px solid rgba(82, 196, 26, 0.5);
+  background-color: rgba(82, 196, 26, 0.1);
+}
+.mx-tag.el-tag.el-tag--success .el-tag__content {
+  color: #52c41a;
+}
+.mx-tag.el-tag.el-tag--info {
+  background: rgba(74, 144, 226, 0.1);
+  border: 1px solid rgba(74, 144, 226, 0.5);
+}
+.mx-tag.el-tag.el-tag--info .el-tag__content {
+  color: #4a90e2;
+}
+.mx-tag.el-tag.el-tag--warning {
+  background: rgba(250, 173, 20, 0.1);
+  border: 1px solid rgba(250, 173, 20, 0.5);
+}
+.mx-tag.el-tag.el-tag--warning .el-tag__content {
+  color: #faad14;
+}
+.mx-tag.el-tag.el-tag--danger {
+  background: rgba(230, 66, 66, 0.1);
+  border: 1px solid rgba(230, 66, 66, 0.5);
+}
+.mx-tag.el-tag.el-tag--danger .el-tag__content {
+  color: #e64242;
+}
+.mx-tag.el-tag.mx-tag-primary {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.mx-tag.el-tag.mx-tag-primary .el-tag__content {
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-tag.el-tag.mx-tag-invalid {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.mx-tag.el-tag.mx-tag-invalid .el-tag__content {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-tag.el-tag.mx-tag-dashed {
+  background: none;
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+}
+.mx-tag.el-tag.mx-tag-dashed .el-tag__content {
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-tag.el-tag.el-tag--small {
+  height: 18px;
+}
+.mx-tag.el-tag.el-tag--small .el-tag__content {
+  line-height: 16px;
+}
+.mx-tag.el-tag.mx-tag-disabled .el-tag__content {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-tag.el-tag.mx-tag-color {
+  border: 1px solid;
+}
+.mx-tag.el-tag.mx-tag-color .el-tag__content {
+  color: inherit;
+}

package/lib/components/tag/MxTag.vue.d.ts

@@ -0,0 +1,40 @@
+import { type PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    type: {
+        type: PropType<"" | "success" | "warning" | "info" | "invalid" | "primary" | "danger" | "dashed">;
+        validator: (value: string) => boolean;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<"" | "success" | "warning" | "info" | "invalid" | "primary" | "danger" | "dashed">;
+        validator: (value: string) => boolean;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    color: string;
+    type: "" | "success" | "warning" | "info" | "invalid" | "primary" | "danger" | "dashed";
+    disabled: boolean;
+}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/tag/MxTag.vue.js

@@ -0,0 +1,95 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/tag/style/css");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxTag",
+  props: {
+    type: {
+      type: String,
+      validator: (value) => ["", "success", "warning", "info", "primary", "danger", "dashed", "invalid"].includes(value),
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    function extractRGBAValues(rgbaString) {
+      const rgbaRegex = /rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*([\d.]+)\)/;
+      const matches = rgbaString.match(rgbaRegex);
+      if (matches) {
+        const [, red, green, blue, alpha] = matches;
+        return {
+          red: parseInt(red, 10),
+          green: parseInt(green, 10),
+          blue: parseInt(blue, 10),
+          alpha: parseFloat(alpha)
+        };
+      } else {
+        return null;
+      }
+    }
+    const colorType = vue.ref("hex");
+    const rNum = vue.ref(0);
+    const gNum = vue.ref(0);
+    const bNum = vue.ref(0);
+    const aNum = vue.ref(0);
+    vue.watch(
+      () => props.color,
+      (val) => {
+        if (val && val.startsWith("rgba")) {
+          const rgbaValues = extractRGBAValues(val);
+          if (rgbaValues) {
+            rNum.value = rgbaValues.red;
+            gNum.value = rgbaValues.green;
+            bNum.value = rgbaValues.blue;
+            aNum.value = rgbaValues.alpha;
+            colorType.value = "rgba";
+          } else {
+            colorType.value = "hex";
+          }
+        }
+      },
+      { immediate: true }
+    );
+    const tagType = props.type === "primary" || props.type === "dashed" || props.type === "invalid" ? "" : props.type;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), vue.mergeProps({
+        color: props.color,
+        type: vue.unref(tagType),
+        class: {
+          "mx-tag": true,
+          "mx-tag-dashed": props.type === "dashed",
+          "mx-tag-primary": props.type === "primary",
+          "mx-tag-invalid": props.type === "invalid",
+          "mx-tag-disabled": props.disabled,
+          "mx-tag-color": props.color
+        }
+      }, _ctx.$attrs, {
+        style: props.color ? colorType.value === "hex" ? { backgroundColor: `${props.color}1A`, color: props.color, borderColor: `${__props.color}80` } : {
+          backgroundColor: `rgba(${rNum.value},${gNum.value},${bNum.value},${aNum.value * 0.1})`,
+          color: props.color,
+          borderColor: `rgba(${rNum.value},${gNum.value},${bNum.value},${aNum.value * 0.5})`
+        } : {}
+      }), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.$slots, (item, key, index) => {
+          return {
+            name: key,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, key)
+            ])
+          };
+        })
+      ]), 1040, ["color", "type", "class", "style"]);
+    };
+  }
+});
+const MxTag_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/tag/index.d.ts

@@ -0,0 +1,7 @@
+import MxTag from './MxTag.vue';
+declare module 'vue' {
+    interface GlobalComponents {
+        MxTag: typeof MxTag;
+    }
+}
+export default MxTag;

package/lib/components/tag/index.js

@@ -0,0 +1,6 @@
+"use strict";
+const MxTag = require("./MxTag.vue");
+MxTag.install = (app) => {
+  app.component(MxTag.__name, MxTag);
+};
+module.exports = MxTag;

package/lib/components/timePicker/MxTimePicker.css

@@ -0,0 +1,180 @@
+.mx-time-picker.el-date-editor .el-input__wrapper {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+  border-radius: 2px;
+  background: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+}
+.mx-time-picker.el-date-editor .el-input__wrapper:hover {
+  border-color: rgba(0, 173, 255, 0.8);
+  background-color: rgba(74, 144, 226, 0.16);
+}
+.mx-time-picker.el-date-editor .el-input__wrapper .el-input__inner {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+}
+.mx-time-picker.el-date-editor .el-input__wrapper .el-input__prefix {
+  order: 1;
+}
+.mx-time-picker.el-date-editor .el-input__wrapper .el-input__prefix .el-input__prefix-inner .el-icon.el-input__icon {
+  margin-right: 0px;
+}
+.mx-time-picker.el-date-editor .el-input__wrapper .el-input__suffix .el-input__suffix-inner .clear-icon {
+  position: absolute;
+  top: 8px;
+  right: 11px;
+  border-radius: 50%;
+  background-color: #232324;
+  color: rgba(255, 255, 255, 0.45);
+}
+.mx-time-picker.el-date-editor .el-input__wrapper .el-input__suffix .el-input__suffix-inner .clear-icon:hover {
+  color: rgba(255, 255, 255, 0.55);
+}
+.mx-time-picker.el-date-editor .el-icon.el-input__icon.el-range__icon {
+  order: 1;
+}
+.mx-time-picker.el-date-editor .el-icon.el-input__icon.el-range__close-icon {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background-color: #232324;
+  border-radius: 50%;
+  height: 14px;
+  color: rgba(255, 255, 255, 0.45);
+  z-index: 2;
+}
+.mx-time-picker.el-date-editor .el-icon.el-input__icon.el-range__close-icon:hover {
+  color: rgba(255, 255, 255, 0.55);
+}
+.mx-time-picker.el-date-editor.is-disabled .el-input__wrapper {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: none;
+}
+.mx-time-picker.el-date-editor.is-disabled .el-input__wrapper:hover {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+}
+.mx-time-picker.el-date-editor.is-disabled .el-input__wrapper .el-input__inner {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-time-picker.el-date-editor.el-input__wrapper {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+  border-radius: 2px;
+  background: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+  padding: 0px 12px;
+}
+.mx-time-picker.el-date-editor.el-input__wrapper:hover {
+  border-color: rgba(0, 173, 255, 0.8);
+  background-color: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+}
+.mx-time-picker.el-date-editor.el-input__wrapper .el-range-input {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+  text-align: start;
+  width: 42%;
+}
+.mx-time-picker.el-date-editor.el-input__wrapper .el-range-separator {
+  color: rgba(255, 255, 255, 0.45);
+  padding: 0;
+}
+.mx-time-picker.el-date-editor.el-input__wrapper.is-disabled {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(0, 173, 255, 0.5);
+}
+.mx-time-picker.el-date-editor.el-input__wrapper.is-disabled .el-range-input {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-time-picker.el-date-editor.el-input__wrapper.is-disabled input {
+  background: transparent;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light {
+  border: none;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-popper__arrow {
+  display: none;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel {
+  background: #1f1f1f;
+  border: none;
+  box-shadow: none;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-range-picker__header,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-range-picker__header {
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-range-picker__body,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-range-picker__body {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-panel__content::before,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-panel__content::before {
+  border-top: 1px solid rgba(255, 255, 255, 0);
+  border-bottom: 1px solid rgba(255, 255, 255, 0);
+  background: #111d2c;
+  margin-left: 0;
+  margin-right: 0;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-spinner__item,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-spinner__item {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  padding-top: 5px;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-spinner__item.is-active,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-spinner__item.is-active {
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-spinner__item.is-disabled,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-spinner__item.is-disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-spinner__item:hover,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-spinner__item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-panel__footer,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-panel__footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-panel__footer .el-time-panel__btn,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-panel__footer .el-time-panel__btn {
+  color: #4a90e2;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-panel__footer .el-time-panel__btn:hover,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-panel__footer .el-time-panel__btn:hover {
+  color: #75b3f0;
+  background-color: #1f1f1f;
+}
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-range-picker .el-time-panel__footer .el-time-panel__btn.confirm,
+.mx-time-picker-popper.el-popper.el-picker__popper.is-pure.is-light .el-time-panel .el-time-panel__footer .el-time-panel__btn.confirm {
+  font-weight: 500;
+}
+.el-button.mx-time-picker-range-switch-btn {
+  width: 32px;
+  margin-left: 8px !important;
+  --el-button-font-weight: 400;
+  --el-button-bg-color: rgba(255, 255, 255, 0.05);
+  --el-button-hover-text-color: #6ba3da;
+  --el-button-hover-border-color: #4a90e2;
+  --el-button-active-text-color: #37659a;
+  --el-button-active-border-color: #3570bd;
+  --el-button-border-color: rgba(255, 255, 255, 0.2);
+  --el-button-text-color: rgba(255, 255, 255, 0.85);
+  --el-fill-color-blank: #232324;
+  --el-button-hover-bg-color: rgba(255, 255, 255, 0.1);
+  padding: 5px 16px;
+  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04);
+  --el-border-radius-base: 2px;
+  --el-button-disabled-text-color: rgba(255, 255, 255, 0.3);
+  --el-button-disabled-border-color: rgba(255, 255, 255, 0.2);
+}

package/lib/components/timePicker/MxTimePicker.vue.d.ts

@@ -0,0 +1,49 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    endPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    showSwitch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click-left" | "click-right")[], "click-left" | "click-right", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    endPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    showSwitch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onClick-left"?: ((...args: any[]) => any) | undefined;
+    "onClick-right"?: ((...args: any[]) => any) | undefined;
+}, {
+    placeholder: string;
+    showSwitch: boolean;
+    startPlaceholder: string;
+    endPlaceholder: string;
+}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};