n20-common-lib 3.0.87 → 3.0.89

package/src/components/Pivot/ViewToggle.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="view-toggle" :class="{ disabled }">
-    <div class="toggle-container">
-      <div
-        v-for="(item, index) in options"
-        :key="item.value"
-        class="toggle-item"
-        :class="{ active: value === item.value }"
-        :style="itemStyle"
-        @click="handleChange(item.value)"
-      >
-        {{ item.label }}
-      </div>
-      <div class="toggle-indicator" :style="indicatorStyle"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ViewToggle',
-  props: {
-    value: {
-      type: [String, Number],
-      required: true
-    },
-    options: {
-      type: Array,
-      required: true,
-      validator(value) {
-        return value.every((item) => item.label && item.value !== undefined)
-      }
-    },
-    itemWidth: {
-      type: [Number, String],
-      default: 80
-    },
-    itemHeight: {
-      type: [Number, String],
-      default: 30
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    itemStyle() {
-      const width = typeof this.itemWidth === 'number' ? `${this.itemWidth}px` : this.itemWidth
-      const height = typeof this.itemHeight === 'number' ? `${this.itemHeight}px` : this.itemHeight
-      return {
-        width,
-        height
-      }
-    },
-    indicatorStyle() {
-      const itemW = typeof this.itemWidth === 'number' ? this.itemWidth : parseInt(this.itemWidth)
-      const itemH = typeof this.itemHeight === 'number' ? this.itemHeight : parseInt(this.itemHeight)
-      const gap = 2
-      const activeIndex = this.options.findIndex((item) => item.value === this.value)
-      const translateX = activeIndex >= 0 ? activeIndex * itemW : 0
-      return {
-        width: `${itemW - 2 * gap}px`,
-        height: `${itemH - 2 * gap}px`,
-        top: `${gap}px`,
-        left: `${gap}px`,
-        transform: `translateX(${translateX}px)`
-      }
-    }
-  },
-  methods: {
-    handleChange(val) {
-      if (this.disabled) return
-      if (val !== this.value) {
-        this.$emit('input', val)
-        this.$emit('change', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.view-toggle {
-  background: #f2f3f5;
-  border-radius: 4px;
-  padding: 2px;
-  display: inline-block;
-}
-
-.view-toggle.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.toggle-container {
-  display: flex;
-  position: relative;
-}
-
-.toggle-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-1, #1d2129);
-  font-family: 'PingFang SC';
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px;
-  cursor: pointer;
-  border-radius: 2px;
-  transition: all 0.2s;
-  z-index: 1;
-  user-select: none;
-}
-
-.toggle-item.active {
-  color: var(--primary-6, #007aff);
-  font-weight: 500;
-}
-
-.toggle-indicator {
-  position: absolute;
-  background: #fff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
-  border-radius: 2px;
-  transition: transform 0.2s;
-  z-index: 0;
-}
-</style>