@mc-markets/ui 1.0.90 → 1.0.92

package/packages/components/RadioGroup/RadioGroup.vue

@@ -1,155 +1,155 @@
-<template>
-  <el-radio-group v-bind="mergedAttrs" :popper-class="computedPopperClass" class="m-radio-group">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-radio-group>
-</template>
-
-<script setup>
-import { computed, useAttrs } from 'vue'
-
-defineOptions({
-  name: 'MRadioGroup'
-})
-
-// 定义props
-const props = defineProps({
-  popperClass: {
-    type: String,
-    default: ''
-  }
-})
-
-// 获取attrs
-const attrs = useAttrs()
-
-// 计算popper-class，合并默认类名和外部传入的类名
-const computedPopperClass = computed(() => {
-  const defaultPopperClass = 'mc-radio-group-popper'
-  
-  if (attrs.popperClass) {
-    return `${defaultPopperClass} ${attrs.popperClass}`.trim()
-  }
-  
-  return defaultPopperClass
-})
-
-// 合并其他属性（排除popperClass）
-const mergedAttrs = computed(() => {
-  const { popperClass, ...otherAttrs } = attrs
-  return otherAttrs
-})
-</script>
-
-<style lang="scss">
-// RadioGroup popper-class 样式
-.mc-radio-group-popper {
-  // 自定义单选框组样式可以在这里添加
-}
-
-// 自定义主题示例
-.mc-radio-group-custom {
-  .el-radio {
-    .el-radio__input {
-      .el-radio__inner {
-        background: linear-gradient(45deg, #667eea, #764ba2);
-        border-color: #667eea;
-        
-        &:hover {
-          background: linear-gradient(45deg, #5a6fd8, #6a4190);
-          border-color: #5a6fd8;
-        }
-      }
-      
-      &.is-checked .el-radio__inner {
-        background: linear-gradient(45deg, #4c63d2, #5d3a7e);
-        border-color: #4c63d2;
-      }
-    }
-    
-    .el-radio__label {
-      color: #667eea;
-      font-weight: 500;
-    }
-  }
-}
-
-.mc-radio-group-success {
-  .el-radio {
-    .el-radio__input {
-      .el-radio__inner {
-        background-color: #67c23a;
-        border-color: #67c23a;
-        
-        &:hover {
-          background-color: #5daf34;
-          border-color: #5daf34;
-        }
-      }
-      
-      &.is-checked .el-radio__inner {
-        background-color: #529b2e;
-        border-color: #529b2e;
-      }
-    }
-    
-    .el-radio__label {
-      color: #67c23a;
-      font-weight: 500;
-    }
-  }
-}
-
-.mc-radio-group-warning {
-  .el-radio {
-    .el-radio__input {
-      .el-radio__inner {
-        background-color: #e6a23c;
-        border-color: #e6a23c;
-        
-        &:hover {
-          background-color: #d4922b;
-          border-color: #d4922b;
-        }
-      }
-      
-      &.is-checked .el-radio__inner {
-        background-color: #c8951f;
-        border-color: #c8951f;
-      }
-    }
-    
-    .el-radio__label {
-      color: #e6a23c;
-      font-weight: 500;
-    }
-  }
-}
-
-.mc-radio-group-danger {
-  .el-radio {
-    .el-radio__input {
-      .el-radio__inner {
-        background-color: #f56c6c;
-        border-color: #f56c6c;
-        
-        &:hover {
-          background-color: #f45454;
-          border-color: #f45454;
-        }
-      }
-      
-      &.is-checked .el-radio__inner {
-        background-color: #f24545;
-        border-color: #f24545;
-      }
-    }
-    
-    .el-radio__label {
-      color: #f56c6c;
-      font-weight: 500;
-    }
-  }
-}
-</style>
+<template>
+  <el-radio-group v-bind="mergedAttrs" :popper-class="computedPopperClass" class="m-radio-group">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-radio-group>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'MRadioGroup'
+})
+
+// 定义props
+const props = defineProps({
+  popperClass: {
+    type: String,
+    default: ''
+  }
+})
+
+// 获取attrs
+const attrs = useAttrs()
+
+// 计算popper-class，合并默认类名和外部传入的类名
+const computedPopperClass = computed(() => {
+  const defaultPopperClass = 'mc-radio-group-popper'
+  
+  if (attrs.popperClass) {
+    return `${defaultPopperClass} ${attrs.popperClass}`.trim()
+  }
+  
+  return defaultPopperClass
+})
+
+// 合并其他属性（排除popperClass）
+const mergedAttrs = computed(() => {
+  const { popperClass, ...otherAttrs } = attrs
+  return otherAttrs
+})
+</script>
+
+<style lang="scss">
+// RadioGroup popper-class 样式
+.mc-radio-group-popper {
+  // 自定义单选框组样式可以在这里添加
+}
+
+// 自定义主题示例
+.mc-radio-group-custom {
+  .el-radio {
+    .el-radio__input {
+      .el-radio__inner {
+        background: linear-gradient(45deg, #667eea, #764ba2);
+        border-color: #667eea;
+        
+        &:hover {
+          background: linear-gradient(45deg, #5a6fd8, #6a4190);
+          border-color: #5a6fd8;
+        }
+      }
+      
+      &.is-checked .el-radio__inner {
+        background: linear-gradient(45deg, #4c63d2, #5d3a7e);
+        border-color: #4c63d2;
+      }
+    }
+    
+    .el-radio__label {
+      color: #667eea;
+      font-weight: 500;
+    }
+  }
+}
+
+.mc-radio-group-success {
+  .el-radio {
+    .el-radio__input {
+      .el-radio__inner {
+        background-color: #67c23a;
+        border-color: #67c23a;
+        
+        &:hover {
+          background-color: #5daf34;
+          border-color: #5daf34;
+        }
+      }
+      
+      &.is-checked .el-radio__inner {
+        background-color: #529b2e;
+        border-color: #529b2e;
+      }
+    }
+    
+    .el-radio__label {
+      color: #67c23a;
+      font-weight: 500;
+    }
+  }
+}
+
+.mc-radio-group-warning {
+  .el-radio {
+    .el-radio__input {
+      .el-radio__inner {
+        background-color: #e6a23c;
+        border-color: #e6a23c;
+        
+        &:hover {
+          background-color: #d4922b;
+          border-color: #d4922b;
+        }
+      }
+      
+      &.is-checked .el-radio__inner {
+        background-color: #c8951f;
+        border-color: #c8951f;
+      }
+    }
+    
+    .el-radio__label {
+      color: #e6a23c;
+      font-weight: 500;
+    }
+  }
+}
+
+.mc-radio-group-danger {
+  .el-radio {
+    .el-radio__input {
+      .el-radio__inner {
+        background-color: #f56c6c;
+        border-color: #f56c6c;
+        
+        &:hover {
+          background-color: #f45454;
+          border-color: #f45454;
+        }
+      }
+      
+      &.is-checked .el-radio__inner {
+        background-color: #f24545;
+        border-color: #f24545;
+      }
+    }
+    
+    .el-radio__label {
+      color: #f56c6c;
+      font-weight: 500;
+    }
+  }
+}
+</style>

package/packages/components/Select/Select.vue

@@ -1,22 +1,22 @@
-<template>
-  <el-select
-    class="m-select"
-    :class="{ solid: $attrs.styleType === 'solid' }"
-    :show-arrow="false"
-    v-bind="$attrs"
-  >
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-select>
-</template>
-
-<script setup>
-defineOptions({
-  name: "MSelect",
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+<template>
+  <el-select
+    class="m-select"
+    :class="{ solid: $attrs.styleType === 'solid' }"
+    :show-arrow="false"
+    v-bind="$attrs"
+  >
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-select>
+</template>
+
+<script setup>
+defineOptions({
+  name: "MSelect",
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/components/Switch/Switch.vue

@@ -1,47 +1,47 @@
-<template>
-  <el-switch v-bind="mergedAttrs" :popper-class="popperClass" class="m-switch">
-    <template v-for="(_, name) in $slots" :key="name" #[name]>
-      <slot :name="name" />
-    </template>
-  </el-switch>
-</template>
-
-<script setup>
-import { useClassName } from "@packages/hooks/useClassName.js";
-
-defineOptions({
-  name: "MSwitch",
-});
-
-// 定义props
-const props = defineProps({
-  popperClass: {
-    type: String,
-    default: "",
-  },
-});
-
-// 使用类名 Hook
-const { mergedAttrs, className: popperClass } =
-  useClassName("mc-switch-popper");
-</script>
-
-<style lang="scss">
-.m-switch {
-  &.is-checked {
-    .el-switch__action {
-      background-color: var(--all-gray-10);
-    }
-  }
-  
-  &:not(.is-checked) {
-    .el-switch__core {
-      background-color: var(--all-gray-5);
-      border-color: var(--all-gray-5);
-      .el-switch__action {
-        background-color: var(--all-gray-1);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <el-switch v-bind="mergedAttrs" :popper-class="popperClass" class="m-switch">
+    <template v-for="(_, name) in $slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </el-switch>
+</template>
+
+<script setup>
+import { useClassName } from "@packages/hooks/useClassName.js";
+
+defineOptions({
+  name: "MSwitch",
+});
+
+// 定义props
+const props = defineProps({
+  popperClass: {
+    type: String,
+    default: "",
+  },
+});
+
+// 使用类名 Hook
+const { mergedAttrs, className: popperClass } =
+  useClassName("mc-switch-popper");
+</script>
+
+<style lang="scss">
+.m-switch {
+  &.is-checked {
+    .el-switch__action {
+      background-color: var(--all-gray-10);
+    }
+  }
+  
+  &:not(.is-checked) {
+    .el-switch__core {
+      background-color: var(--all-gray-5);
+      border-color: var(--all-gray-5);
+      .el-switch__action {
+        background-color: var(--all-gray-1);
+      }
+    }
+  }
+}
+</style>

package/packages/components/TabCard/TabCard.vue

@@ -1,107 +1,107 @@
-<template>
-  <div class="m-tab-card" :class="{ 'is-disabled': disabled }">
-    <div class="m-tab-card__container">
-      <m-tab-card-item
-        v-for="(tab, index) in tabs"
-        :key="tab.name"
-        :name="tab.name"
-        :label="tab.label"
-        :disabled="tab.disabled"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, provide } from 'vue'
-import { useClassName } from "@packages/hooks/useClassName.js"
-import MTabCardItem from './TabCardItem.vue'
-
-defineOptions({
-  name: "MTabCard",
-})
-
-// 定义 props
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: ''
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  options: {
-    type: Array,
-    default: () => []
-  }
-})
-
-// 定义 emits
-const emit = defineEmits(['update:modelValue', 'change', 'tab-click'])
-
-// 使用类名 Hook
-const { mergedAttrs } = useClassName()
-
-// 内部状态
-const activeTab = ref(props.modelValue)
-
-// 计算 tabs 数据
-const tabs = computed(() => {
-  return props.options.map(option => {
-    if (typeof option === 'string') {
-      return { label: option, name: option, disabled: false }
-    }
-    return {
-      label: option.label || option.name || '',
-      name: option.name || option.label || '',
-      disabled: option.disabled || false
-    }
-  })
-})
-
-// 处理 tab 点击
-const handleTabClick = (tabName, isDisabled) => {
-  if (isDisabled || props.disabled || tabName === activeTab.value) {
-    return
-  }
-  
-  const oldValue = activeTab.value
-  activeTab.value = tabName
-  emit('update:modelValue', tabName)
-  emit('change', tabName, oldValue)
-  emit('tab-click', tabName)
-}
-
-// 监听 modelValue 变化
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== activeTab.value) {
-    activeTab.value = newValue
-  }
-})
-
-// 提供给子组件的方法
-provide('tabCardContext', {
-  activeTab,
-  handleTabClick
-})
-</script>
-
-<style lang="scss" scoped>
-.m-tab-card {
-  display: inline-block;
-  
-  &.is-disabled {
-    pointer-events: none;
-    opacity: 0.6;
-  }
-
-  &__container {
-    display: flex;
-    background-color: var(--bg-tertiary-hover, #2a2a2a);
-    border-radius: var(--md);
-    padding: 4px;
-    gap: 0;
-  }
-}
-</style>
+<template>
+  <div class="m-tab-card" :class="{ 'is-disabled': disabled }">
+    <div class="m-tab-card__container">
+      <m-tab-card-item
+        v-for="(tab, index) in tabs"
+        :key="tab.name"
+        :name="tab.name"
+        :label="tab.label"
+        :disabled="tab.disabled"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, provide } from 'vue'
+import { useClassName } from "@packages/hooks/useClassName.js"
+import MTabCardItem from './TabCardItem.vue'
+
+defineOptions({
+  name: "MTabCard",
+})
+
+// 定义 props
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['update:modelValue', 'change', 'tab-click'])
+
+// 使用类名 Hook
+const { mergedAttrs } = useClassName()
+
+// 内部状态
+const activeTab = ref(props.modelValue)
+
+// 计算 tabs 数据
+const tabs = computed(() => {
+  return props.options.map(option => {
+    if (typeof option === 'string') {
+      return { label: option, name: option, disabled: false }
+    }
+    return {
+      label: option.label || option.name || '',
+      name: option.name || option.label || '',
+      disabled: option.disabled || false
+    }
+  })
+})
+
+// 处理 tab 点击
+const handleTabClick = (tabName, isDisabled) => {
+  if (isDisabled || props.disabled || tabName === activeTab.value) {
+    return
+  }
+  
+  const oldValue = activeTab.value
+  activeTab.value = tabName
+  emit('update:modelValue', tabName)
+  emit('change', tabName, oldValue)
+  emit('tab-click', tabName)
+}
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== activeTab.value) {
+    activeTab.value = newValue
+  }
+})
+
+// 提供给子组件的方法
+provide('tabCardContext', {
+  activeTab,
+  handleTabClick
+})
+</script>
+
+<style lang="scss" scoped>
+.m-tab-card {
+  display: inline-block;
+  
+  &.is-disabled {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  &__container {
+    display: flex;
+    background-color: var(--bg-tertiary-hover, #2a2a2a);
+    border-radius: var(--md);
+    padding: 4px;
+    gap: 0;
+  }
+}
+</style>