@mc-markets/ui 1.0.90 → 1.0.92

package/packages/components/Pagination/Pagination.vue

@@ -1,61 +1,61 @@
-<template>
-  <el-pagination v-bind="$attrs" class="m-pagination">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-pagination>
-</template>
-
-<script setup>
-defineOptions({
-  name: "MPagination",
-});
-</script>
-
-<style lang="scss">
-.m-pagination {
-  --el-border-color-hover: var(--border-tertiary) !important;
-  --el-pagination-button-bg-color: var(--bg-tertiary-hover) !important;
-  &.is-background .el-pager li.is-active {
-    color: var(--text-quaternary) !important;
-  }
-  .el-pager li{
-    border-radius: var(--xs);
-    border: 1px solid transparent;
-    &:hover {
-      border: 1px solid var(--border-tertiary);
-      color: var(--text-primary);
-    }
-  }
-  .el-select .el-select__wrapper {
-    width: 112px;
-    min-height: 32px;
-    padding: 5px 8px;
-    border-radius: var(--xs);
-    background-color: var(--bg-tertiary-hover);
-  }
-  .el-input .el-input__wrapper {
-    height: 30px;
-    border-radius: var(--xs);
-    background-color: var(--bg-tertiary-hover);
-  }
-  .el-pagination.is-background {
-    background-color: var(--bg-tertiary-hover);
-  }
-  .el-pager .number {
-    font-size: var(--font-size-text-sm);
-    font-weight: 500;
-  }
-  .btn-prev,
-  .btn-next {
-    &:disabled {
-      background-color: transparent !important;
-    }
-    &:hover:not(:disabled) {
-      border: 1px solid var(--border-tertiary);
-      color: var(--text-primary);
-    }
-    background-color: transparent !important;
-  }
-}
-</style>
+<template>
+  <el-pagination v-bind="$attrs" class="m-pagination">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-pagination>
+</template>
+
+<script setup>
+defineOptions({
+  name: "MPagination",
+});
+</script>
+
+<style lang="scss">
+.m-pagination {
+  --el-border-color-hover: var(--border-tertiary) !important;
+  --el-pagination-button-bg-color: var(--bg-tertiary-hover) !important;
+  &.is-background .el-pager li.is-active {
+    color: var(--text-quaternary) !important;
+  }
+  .el-pager li{
+    border-radius: var(--xs);
+    border: 1px solid transparent;
+    &:hover {
+      border: 1px solid var(--border-tertiary);
+      color: var(--text-primary);
+    }
+  }
+  .el-select .el-select__wrapper {
+    width: 112px;
+    min-height: 32px;
+    padding: 5px 8px;
+    border-radius: var(--xs);
+    background-color: var(--bg-tertiary-hover);
+  }
+  .el-input .el-input__wrapper {
+    height: 30px;
+    border-radius: var(--xs);
+    background-color: var(--bg-tertiary-hover);
+  }
+  .el-pagination.is-background {
+    background-color: var(--bg-tertiary-hover);
+  }
+  .el-pager .number {
+    font-size: var(--font-size-text-sm);
+    font-weight: 500;
+  }
+  .btn-prev,
+  .btn-next {
+    &:disabled {
+      background-color: transparent !important;
+    }
+    &:hover:not(:disabled) {
+      border: 1px solid var(--border-tertiary);
+      color: var(--text-primary);
+    }
+    background-color: transparent !important;
+  }
+}
+</style>

package/packages/components/Radio/Radio.vue

@@ -1,67 +1,67 @@
-<template>
-  <el-radio v-bind="mergedAttrs" class="m-radio">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-radio>
-</template>
-
-<script setup>
-import { useClassName } from "@packages/hooks/useClassName.js"
-
-defineOptions({
-  name: 'MRadio'
-})
-
-// 定义props
-const props = defineProps({
-  popperClass: {
-    type: String,
-    default: ''
-  }
-})
-
-// 使用类名 Hook
-const { mergedAttrs, className: popperClass } = useClassName('mc-radio-popper')
-</script>
-
-<style lang="scss">
-// Radio popper-class 样式
-// .mc-radio-popper {
-//   自定义单选框样式可以在这里添加
-// }
-.m-radio{
-  &.el-radio{
-    --el-radio-input-height: 16px;
-    --el-radio-input-width: 16px;
-    --el-radio-input-border: 2px solid var(--icon-tertiary);
-    &.el-radio--large{
-      --el-radio-input-height: 20px;
-      --el-radio-input-width: 20px;
-      .el-radio__inner{
-        height: var(--el-radio-input-height);
-        width: var(--el-radio-input-width);
-      }
-    }
-
-    .el-radio__input {
-      &.is-checked .el-radio__inner::after {
-        height: 6px;
-        width: 6px;
-        background-color: var(--bg-primary);
-      }
-      
-      &.is-disabled {
-        .el-radio__inner {
-          background-color: var(--all-alphe-white-20);
-          border-color: var(--icon-tertiary);
-        }
-        
-        &.is-checked .el-radio__inner::after {
-          background-color: var(--all-alphe-white-20);
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <el-radio v-bind="mergedAttrs" class="m-radio">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-radio>
+</template>
+
+<script setup>
+import { useClassName } from "@packages/hooks/useClassName.js"
+
+defineOptions({
+  name: 'MRadio'
+})
+
+// 定义props
+const props = defineProps({
+  popperClass: {
+    type: String,
+    default: ''
+  }
+})
+
+// 使用类名 Hook
+const { mergedAttrs, className: popperClass } = useClassName('mc-radio-popper')
+</script>
+
+<style lang="scss">
+// Radio popper-class 样式
+// .mc-radio-popper {
+//   自定义单选框样式可以在这里添加
+// }
+.m-radio{
+  &.el-radio{
+    --el-radio-input-height: 16px;
+    --el-radio-input-width: 16px;
+    --el-radio-input-border: 2px solid var(--icon-tertiary);
+    &.el-radio--large{
+      --el-radio-input-height: 20px;
+      --el-radio-input-width: 20px;
+      .el-radio__inner{
+        height: var(--el-radio-input-height);
+        width: var(--el-radio-input-width);
+      }
+    }
+
+    .el-radio__input {
+      &.is-checked .el-radio__inner::after {
+        height: 6px;
+        width: 6px;
+        background-color: var(--bg-primary);
+      }
+      
+      &.is-disabled {
+        .el-radio__inner {
+          background-color: var(--all-alphe-white-20);
+          border-color: var(--icon-tertiary);
+        }
+        
+        &.is-checked .el-radio__inner::after {
+          background-color: var(--all-alphe-white-20);
+        }
+      }
+    }
+  }
+}
+</style>

package/packages/components/RadioButton/RadioButton.vue

@@ -1,110 +1,110 @@
-<template>
-  <el-radio-button v-bind="mergedAttrs" class="m-radio-button">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-radio-button>
-</template>
-
-<script setup>
-import { useClassName } from "@packages/hooks/useClassName.js"
-
-defineOptions({
-  name: 'MRadioButton'
-})
-
-// 定义props
-const props = defineProps({
-  popperClass: {
-    type: String,
-    default: ''
-  }
-})
-
-// 使用类名 Hook
-const { mergedAttrs, className: popperClass } = useClassName('mc-radio-button-popper')
-</script>
-
-<style lang="scss">
-// RadioButton popper-class 样式
-// .mc-radio-button-popper {
-//   自定义单选框按钮样式可以在这里添加
-// }
-
-// 自定义主题示例
-.mc-radio-button-custom {
-  .el-radio-button__inner {
-    background: linear-gradient(45deg, #667eea, #764ba2);
-    border-color: #667eea;
-    color: white;
-    
-    &:hover {
-      background: linear-gradient(45deg, #5a6fd8, #6a4190);
-      border-color: #5a6fd8;
-    }
-  }
-  
-  .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    background: linear-gradient(45deg, #4c63d2, #5d3a7e);
-    border-color: #4c63d2;
-    box-shadow: -1px 0 0 0 #4c63d2;
-  }
-}
-
-.mc-radio-button-success {
-  .el-radio-button__inner {
-    background-color: #67c23a;
-    border-color: #67c23a;
-    color: white;
-    
-    &:hover {
-      background-color: #5daf34;
-      border-color: #5daf34;
-    }
-  }
-  
-  .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    background-color: #529b2e;
-    border-color: #529b2e;
-    box-shadow: -1px 0 0 0 #529b2e;
-  }
-}
-
-.mc-radio-button-warning {
-  .el-radio-button__inner {
-    background-color: #e6a23c;
-    border-color: #e6a23c;
-    color: white;
-    
-    &:hover {
-      background-color: #d4922b;
-      border-color: #d4922b;
-    }
-  }
-  
-  .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    background-color: #c8951f;
-    border-color: #c8951f;
-    box-shadow: -1px 0 0 0 #c8951f;
-  }
-}
-
-.mc-radio-button-danger {
-  .el-radio-button__inner {
-    background-color: #f56c6c;
-    border-color: #f56c6c;
-    color: white;
-    
-    &:hover {
-      background-color: #f45454;
-      border-color: #f45454;
-    }
-  }
-  
-  .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    background-color: #f24545;
-    border-color: #f24545;
-    box-shadow: -1px 0 0 0 #f24545;
-  }
-}
-</style>
+<template>
+  <el-radio-button v-bind="mergedAttrs" class="m-radio-button">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-radio-button>
+</template>
+
+<script setup>
+import { useClassName } from "@packages/hooks/useClassName.js"
+
+defineOptions({
+  name: 'MRadioButton'
+})
+
+// 定义props
+const props = defineProps({
+  popperClass: {
+    type: String,
+    default: ''
+  }
+})
+
+// 使用类名 Hook
+const { mergedAttrs, className: popperClass } = useClassName('mc-radio-button-popper')
+</script>
+
+<style lang="scss">
+// RadioButton popper-class 样式
+// .mc-radio-button-popper {
+//   自定义单选框按钮样式可以在这里添加
+// }
+
+// 自定义主题示例
+.mc-radio-button-custom {
+  .el-radio-button__inner {
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    border-color: #667eea;
+    color: white;
+    
+    &:hover {
+      background: linear-gradient(45deg, #5a6fd8, #6a4190);
+      border-color: #5a6fd8;
+    }
+  }
+  
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    background: linear-gradient(45deg, #4c63d2, #5d3a7e);
+    border-color: #4c63d2;
+    box-shadow: -1px 0 0 0 #4c63d2;
+  }
+}
+
+.mc-radio-button-success {
+  .el-radio-button__inner {
+    background-color: #67c23a;
+    border-color: #67c23a;
+    color: white;
+    
+    &:hover {
+      background-color: #5daf34;
+      border-color: #5daf34;
+    }
+  }
+  
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    background-color: #529b2e;
+    border-color: #529b2e;
+    box-shadow: -1px 0 0 0 #529b2e;
+  }
+}
+
+.mc-radio-button-warning {
+  .el-radio-button__inner {
+    background-color: #e6a23c;
+    border-color: #e6a23c;
+    color: white;
+    
+    &:hover {
+      background-color: #d4922b;
+      border-color: #d4922b;
+    }
+  }
+  
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    background-color: #c8951f;
+    border-color: #c8951f;
+    box-shadow: -1px 0 0 0 #c8951f;
+  }
+}
+
+.mc-radio-button-danger {
+  .el-radio-button__inner {
+    background-color: #f56c6c;
+    border-color: #f56c6c;
+    color: white;
+    
+    &:hover {
+      background-color: #f45454;
+      border-color: #f45454;
+    }
+  }
+  
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    background-color: #f24545;
+    border-color: #f24545;
+    box-shadow: -1px 0 0 0 #f24545;
+  }
+}
+</style>