@mc-markets/ui 1.0.90 → 1.0.92

package/packages/components/Breadcrumb/Breadcrumb.vue

@@ -1,113 +1,113 @@
-<template>
-  <nav class="m-breadcrumb" aria-label="Breadcrumb">
-    <template v-for="(item, index) in items" :key="index">
-      <span
-        :class="['m-breadcrumb__item', { 'is-link': item.to }]"
-        @click="handleItemClick(item)"
-      >
-        {{ item.label }}
-      </span>
-      <BreadcrumbSeparator 
-        v-if="index < items.length - 1"
-        class="m-breadcrumb__separator"
-      />
-    </template>
-  </nav>
-</template>
-
-<script setup>
-import BreadcrumbSeparator from './BreadcrumbSeparator.vue'
-
-defineOptions({
-  name: "MBreadcrumb",
-})
-
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () => [],
-    validator: (items) => {
-      return items.every(item => 
-        typeof item === 'object' && 
-        item.label !== undefined
-      )
-    }
-  }
-})
-
-const emit = defineEmits(['click'])
-
-const handleItemClick = (item) => {
-  if (!item.to) return
-  
-  emit('click', item)
-  
-  // 处理路由跳转
-  if (typeof item.to === 'string') {
-    if (item.to.startsWith('http://') || item.to.startsWith('https://')) {
-      window.location.href = item.to
-    } else {
-      if (item.replace) {
-        window.history.replaceState({}, '', item.to)
-      } else {
-        window.history.pushState({}, '', item.to)
-      }
-      window.dispatchEvent(new PopStateEvent('popstate'))
-    }
-  } else if (typeof item.to === 'object' && item.to.path) {
-    const path = item.to.path
-    if (item.replace) {
-      window.history.replaceState({}, '', path)
-    } else {
-      window.history.pushState({}, '', path)
-    }
-    window.dispatchEvent(new PopStateEvent('popstate'))
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.m-breadcrumb {
-  display: inline-flex;
-  align-items: center;
-  font-size: 14px;
-  line-height: 20px;
-  height: 20px;
-  
-  &__item {
-    color: var(--text-secondary, #909399);
-    transition: color 0.2s;
-    white-space: nowrap;
-    line-height: 20px;
-    height: 20px;
-    display: inline-flex;
-    align-items: center;
-    
-    &.is-link {
-      color: var(--text-primary, #303133);
-      cursor: pointer;
-      font-weight: 500;
-      
-      &:hover {
-        color: var(--bg-brand, #ffd700);
-      }
-    }
-    
-    &:last-child {
-      color: var(--text-tertiary, #c0c4cc);
-      cursor: default;
-      font-weight: normal;
-    }
-  }
-  
-  &__separator {
-    margin: 0 8px;
-    color: var(--text-tertiary, #c0c4cc);
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    height: 20px;
-  }
-}
-</style>
-
+<template>
+  <nav class="m-breadcrumb" aria-label="Breadcrumb">
+    <template v-for="(item, index) in items" :key="index">
+      <span
+        :class="['m-breadcrumb__item', { 'is-link': item.to }]"
+        @click="handleItemClick(item)"
+      >
+        {{ item.label }}
+      </span>
+      <BreadcrumbSeparator 
+        v-if="index < items.length - 1"
+        class="m-breadcrumb__separator"
+      />
+    </template>
+  </nav>
+</template>
+
+<script setup>
+import BreadcrumbSeparator from './BreadcrumbSeparator.vue'
+
+defineOptions({
+  name: "MBreadcrumb",
+})
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+    validator: (items) => {
+      return items.every(item => 
+        typeof item === 'object' && 
+        item.label !== undefined
+      )
+    }
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const handleItemClick = (item) => {
+  if (!item.to) return
+  
+  emit('click', item)
+  
+  // 处理路由跳转
+  if (typeof item.to === 'string') {
+    if (item.to.startsWith('http://') || item.to.startsWith('https://')) {
+      window.location.href = item.to
+    } else {
+      if (item.replace) {
+        window.history.replaceState({}, '', item.to)
+      } else {
+        window.history.pushState({}, '', item.to)
+      }
+      window.dispatchEvent(new PopStateEvent('popstate'))
+    }
+  } else if (typeof item.to === 'object' && item.to.path) {
+    const path = item.to.path
+    if (item.replace) {
+      window.history.replaceState({}, '', path)
+    } else {
+      window.history.pushState({}, '', path)
+    }
+    window.dispatchEvent(new PopStateEvent('popstate'))
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.m-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  height: 20px;
+  
+  &__item {
+    color: var(--text-secondary, #909399);
+    transition: color 0.2s;
+    white-space: nowrap;
+    line-height: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    
+    &.is-link {
+      color: var(--text-primary, #303133);
+      cursor: pointer;
+      font-weight: 500;
+      
+      &:hover {
+        color: var(--bg-brand, #ffd700);
+      }
+    }
+    
+    &:last-child {
+      color: var(--text-tertiary, #c0c4cc);
+      cursor: default;
+      font-weight: normal;
+    }
+  }
+  
+  &__separator {
+    margin: 0 8px;
+    color: var(--text-tertiary, #c0c4cc);
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+  }
+}
+</style>
+

package/packages/components/Breadcrumb/BreadcrumbSeparator.vue

@@ -1,31 +1,31 @@
-<template>
-  <svg 
-    class="breadcrumb-separator-icon"
-    width="6" 
-    height="10" 
-    viewBox="0 0 6 10" 
-    fill="none" 
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path 
-      fill-rule="evenodd" 
-      clip-rule="evenodd" 
-      d="M0.52827 0.529247C0.788619 0.268897 1.21073 0.268897 1.47108 0.529247L5.47108 4.52925C5.73143 4.7896 5.73143 5.21171 5.47108 5.47206L1.47108 9.47206C1.21073 9.73241 0.788619 9.73241 0.52827 9.47206C0.26792 9.21171 0.26792 8.7896 0.52827 8.52925L4.05687 5.00065L0.52827 1.47206C0.26792 1.21171 0.26792 0.789596 0.52827 0.529247Z" 
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<script setup>
-defineOptions({
-  name: "BreadcrumbSeparator",
-})
-</script>
-
-<style lang="scss" scoped>
-.breadcrumb-separator-icon {
-  display: inline-block;
-  vertical-align: middle;
-}
-</style>
-
+<template>
+  <svg 
+    class="breadcrumb-separator-icon"
+    width="6" 
+    height="10" 
+    viewBox="0 0 6 10" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+      fill-rule="evenodd" 
+      clip-rule="evenodd" 
+      d="M0.52827 0.529247C0.788619 0.268897 1.21073 0.268897 1.47108 0.529247L5.47108 4.52925C5.73143 4.7896 5.73143 5.21171 5.47108 5.47206L1.47108 9.47206C1.21073 9.73241 0.788619 9.73241 0.52827 9.47206C0.26792 9.21171 0.26792 8.7896 0.52827 8.52925L4.05687 5.00065L0.52827 1.47206C0.26792 1.21171 0.26792 0.789596 0.52827 0.529247Z" 
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script setup>
+defineOptions({
+  name: "BreadcrumbSeparator",
+})
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb-separator-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
+

package/packages/components/Button/Button.vue

@@ -1,18 +1,18 @@
-<template>
-  <el-button v-bind="$attrs" class="m-button">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-button>
-</template>
-
-<script setup>
-defineOptions({
-  name: 'MButton'
-})
-</script>
-
-<style lang="scss" scoped>
-// Button 组件样式 - 使用高优先级选择器确保不被全局样式覆盖
-
+<template>
+  <el-button v-bind="$attrs" class="m-button">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-button>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'MButton'
+})
+</script>
+
+<style lang="scss" scoped>
+// Button 组件样式 - 使用高优先级选择器确保不被全局样式覆盖
+
 </style>

package/packages/components/DatePicker/DatePicker.vue

@@ -1,85 +1,85 @@
-<template>
-  <el-date-picker v-bind="mergedAttrs" class="m-datepicker" :popper-class="popperClass" :class="{ 'style-type-solid': styleType === 'solid' }">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-date-picker>
-</template>
-
-<script setup>
-import { useClassName } from "@packages/hooks/useClassName.js";
-
-defineOptions({
-  name: "MDatePicker",
-});
-
-// 定义 props，提供默认的 type 值
-const props = defineProps({
-  popperClass: {
-    type: String,
-    default: "",
-  },
-  styleType: {
-    type: String,
-  },
-});
-
-// 使用类名 Hook，排除 type 和 popperClass 属性
-const { mergedAttrs, className: popperClass } = useClassName(
-  "mc-datepicker-popper",
-  "popperClass"
-);
-</script>
-<style lang="scss">
-.m-datepicker{
-  &.style-type-solid{
-    &.el-date-editor.el-input__wrapper, .el-input__wrapper{
-      box-shadow: none ;
-      background-color: var(--bg-tertiary-hover);
-    }
-  }
-  &.el-input--small{
-    --el-input-height: 40px;
-  }
-}
-.mc-datepicker-popper {
-  .el-picker-panel {
-    border: 1px solid var(--border-primary);
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    .current,
-    // .today:not(.in-range),
-    .start-date,
-    .end-date {
-      .el-date-table-cell {
-        .el-date-table-cell__text {
-          color: var(--text-quaternary);
-          border-radius: 3px;
-        }
-      }
-    }
-
-    .start-date {
-      .el-date-table-cell {
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-      }
-    }
-
-    .end-date {
-      .el-date-table-cell {
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-      }
-    }
-
-    .el-button.is-text {
-      color: var(--text-brand);
-    }
-    .el-button.is-plain {
-      background: var(--bg-brand);
-      color: var(--text-quaternary);
-    }
-  }
-}
-</style>
+<template>
+  <el-date-picker v-bind="mergedAttrs" class="m-datepicker" :popper-class="popperClass" :class="{ 'style-type-solid': styleType === 'solid' }">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-date-picker>
+</template>
+
+<script setup>
+import { useClassName } from "@packages/hooks/useClassName.js";
+
+defineOptions({
+  name: "MDatePicker",
+});
+
+// 定义 props，提供默认的 type 值
+const props = defineProps({
+  popperClass: {
+    type: String,
+    default: "",
+  },
+  styleType: {
+    type: String,
+  },
+});
+
+// 使用类名 Hook，排除 type 和 popperClass 属性
+const { mergedAttrs, className: popperClass } = useClassName(
+  "mc-datepicker-popper",
+  "popperClass"
+);
+</script>
+<style lang="scss">
+.m-datepicker{
+  &.style-type-solid{
+    &.el-date-editor.el-input__wrapper, .el-input__wrapper{
+      box-shadow: none ;
+      background-color: var(--bg-tertiary-hover);
+    }
+  }
+  &.el-input--small{
+    --el-input-height: 40px;
+  }
+}
+.mc-datepicker-popper {
+  .el-picker-panel {
+    border: 1px solid var(--border-primary);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    .current,
+    // .today:not(.in-range),
+    .start-date,
+    .end-date {
+      .el-date-table-cell {
+        .el-date-table-cell__text {
+          color: var(--text-quaternary);
+          border-radius: 3px;
+        }
+      }
+    }
+
+    .start-date {
+      .el-date-table-cell {
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+    }
+
+    .end-date {
+      .el-date-table-cell {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    }
+
+    .el-button.is-text {
+      color: var(--text-brand);
+    }
+    .el-button.is-plain {
+      background: var(--bg-brand);
+      color: var(--text-quaternary);
+    }
+  }
+}
+</style>

package/packages/components/Dialog/Dialog.vue

@@ -1,61 +1,61 @@
-<template>
-  <div>
-    <el-dialog
-      v-model="dialogVisible"
-      :width="width"
-      :title="title"
-      :draggable="draggable"
-      :close-on-click-modal="closeOnClickModal"
-      :center="center"
-      v-bind="$attrs"
-      class="m-dialog"
-      header-class="m-header"
-    >
-      <template v-if="$slots.header" #header="{ close, titleId, titleClass }">
-        <slot name="header" v-bind="{ close, titleId, titleClass }"></slot>
-      </template>
-      <slot name="default"></slot>
-      <template v-if="$slots.footer" #footer class="m-footer">
-        <slot name="footer"></slot>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-defineOptions({
-  name: 'MDialog'
-})
-const props = defineProps({
-  width: {
-    type: String,
-    default: '440px'
-  },
-  center: {
-    type: Boolean,
-    default: true
-  },
-  draggable: {
-    type: Boolean,
-    default: true
-  },
-  closeOnClickModal: {
-    type: Boolean,
-    default: false
-  },
-  title: {
-    type: String,
-    default: ''
-  }
-})
-const emit = defineEmits(['close'])
-const dialogVisible = defineModel('modelValue', {
-  type: Boolean,
-  default: false
-})
-
-</script>
-
-<style scoped lang="scss">
-
-</style>
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisible"
+      :width="width"
+      :title="title"
+      :draggable="draggable"
+      :close-on-click-modal="closeOnClickModal"
+      :center="center"
+      v-bind="$attrs"
+      class="m-dialog"
+      header-class="m-header"
+    >
+      <template v-if="$slots.header" #header="{ close, titleId, titleClass }">
+        <slot name="header" v-bind="{ close, titleId, titleClass }"></slot>
+      </template>
+      <slot name="default"></slot>
+      <template v-if="$slots.footer" #footer class="m-footer">
+        <slot name="footer"></slot>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'MDialog'
+})
+const props = defineProps({
+  width: {
+    type: String,
+    default: '440px'
+  },
+  center: {
+    type: Boolean,
+    default: true
+  },
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickModal: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const emit = defineEmits(['close'])
+const dialogVisible = defineModel('modelValue', {
+  type: Boolean,
+  default: false
+})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>