chore(fixednav): feat active-color #1393

src/packages/__VUE/fixednav/common.ts

@@ -0,0 +1,71 @@
+import { computed, PropType, ref } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { componentName, translate } = createComponent('fixednav');
+export const component = {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    overlay: {
+      type: Boolean,
+      default: true
+    },
+    navList: {
+      default: () => [],
+      type: Array as PropType<any[]>
+    },
+    activeColor: {
+      default: '',
+      type: String
+    },
+    activeText: {
+      default: '',
+      type: String
+    },
+    unActiveText: {
+      default: '',
+      type: String
+    },
+    position: {
+      default: () => {
+        return {
+          top: 'auto',
+          bottom: 'auto'
+        };
+      },
+      type: Object
+    },
+    type: {
+      default: 'right',
+      type: String
+    }
+  },
+  emits: ['update:visible', 'selected'],
+
+  setup(props: any, { emit }: any) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        active: props.visible,
+        [props.type]: true
+      };
+    });
+
+    const current = ref(-1);
+
+    const updateValue = (value: boolean = !props.visible) => {
+      emit('update:visible', value);
+    };
+    const selected = (item: any, event: Event) => {
+      emit('selected', {
+        item,
+        event
+      });
+      current.value = item.id;
+    };
+
+    return { classes, updateValue, selected, translate, current };
+  }
+};

src/packages/__VUE/fixednav/doc.en-US.md

@@ -148,15 +148,16 @@ export default {
 
 
 ### Prop
-| Attribute      | Description                                         | Type    | Default                      |
-|:---------------|:----------------------------------------------------|:--------|:-----------------------------|
-| visible        | visible is                                          | Boolean | false                        |
-| nav-list       | Suspended list content data                         | Array   | []                           |
-| active-text    | Stow list button copy                               | String  | Close Nav                    |
-| un-active-text | Expand list button copy                             | String  | Open Nav                     |
-| type           | Navigation direction, optional value `left` `right` | String  | right                        |
-| overlay        | Whether to display the mask when expanding          | Boolean | true                         |
-| position       | `fixed` Vertical position                           | Object  | {top: 'auto',bottom: 'auto'} |
+| Attribute           | Description                                         | Type    | Default                      |
+|:--------------------|:----------------------------------------------------|:--------|:-----------------------------|
+| visible             | visible is                                          | Boolean | false                        |
+| nav-list            | Suspended list content data                         | Array   | []                           |
+| active-color`3.2.1` | list active button color                            | String  | #fa2c19 Inherit theme color  |
+| active-text         | Stow list button copy                               | String  | Close Nav                    |
+| un-active-text      | Expand list button copy                             | String  | Open Nav                     |
+| type                | Navigation direction, optional value `left` `right` | String  | right                        |
+| overlay             | Whether to display the mask when expanding          | Boolean | true                         |
+| position            | `fixed` Vertical position                           | Object  | {top: 'auto',bottom: 'auto'} |
 
 
 ### Event

src/packages/__VUE/fixednav/doc.md

@@ -148,15 +148,16 @@ export default {
 
 
 ### Prop
-| 字段           | 说明                       | 类型    | 默认值                       |
-|:---------------|:---------------------------|:--------|:-----------------------------|
-| visible        | 是否打开                   | Boolean | false                        |
-| nav-list       | 悬浮列表内容数据           | Array   | []                           |
-| active-text    | 收起列表按钮文案           | String  | 收起导航                     |
-| un-active-text | 展开列表按钮文案           | String  | 快速导航                     |
-| type           | 导航方向,可选值 left right | String  | right                        |
-| overlay        | 展开时是否显示遮罩         | Boolean | true                         |
-| position       | fixed 垂直位置             | Object  | {top: 'auto',bottom: 'auto'} |
+| 字段                | 说明                       | 类型    | 默认值                       |
+|:--------------------|:---------------------------|:--------|:-----------------------------|
+| visible             | 是否打开                   | Boolean | false                        |
+| nav-list            | 悬浮列表内容数据           | Array   | []                           |
+| active-color`3.2.1` | 选中按钮文案颜色           | String  | #fa2c19 默认集成主题色       |
+| active-text         | 收起列表按钮文案           | String  | 收起导航                     |
+| un-active-text      | 展开列表按钮文案           | String  | 快速导航                     |
+| type                | 导航方向,可选值 left right | String  | right                        |
+| overlay             | 展开时是否显示遮罩         | Boolean | true                         |
+| position            | fixed 垂直位置             | Object  | {top: 'auto',bottom: 'auto'} |
 
 
 ### Event

src/packages/__VUE/fixednav/index.scss

@@ -83,6 +83,13 @@
       align-items: center;
       min-width: 50px;
       flex-shrink: 0;
+
+      &.active {
+        > .span {
+          color: $fixednav-item-active-color;
+        }
+      }
+
       > img {
         width: 20px;
         height: 20px;

src/packages/__VUE/fixednav/index.taro.vue

@@ -1,97 +1,7 @@
-<template>
-  <view :class="classes" :style="position">
-    <nut-overlay v-if="overlay" :visible="visible" :z-index="200" @click="updateValue(false)" />
-    <slot name="list">
-      <view class="nut-fixednav__list">
-        <view
-          class="nut-fixednav__list-item"
-          v-for="(item, index) in navList"
-          @click="selected(item, $event)"
-          :key="item.id || index"
-        >
-          <img :src="item.icon" />
-          <view class="span">{{ item.text }}</view>
-          <view class="b" v-if="item.num">{{ item.num }}</view>
-        </view>
-      </view>
-    </slot>
-    <div class="nut-fixednav__btn" @click="updateValue()">
-      <slot name="btn">
-        <nut-icon name="left" color="#fff" />
-        <view class="text"
-          >{{ visible ? activeText || translate('activeText') : unActiveText || translate('unActiveText') }}
-        </view>
-      </slot>
-    </div>
-  </view>
-</template>
+<template src="./template.html"></template>
 <script lang="ts">
-import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('fixednav');
-import overlay from '../overlay/index.taro.vue';
-export default create({
-  components: {
-    [overlay.name]: overlay
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    navList: {
-      default: () => [],
-      type: Array
-    },
-    activeText: {
-      default: '',
-      type: String
-    },
-    unActiveText: {
-      default: '',
-      type: String
-    },
-    position: {
-      default: () => {
-        return {
-          top: 'auto',
-          bottom: 'auto'
-        };
-      },
-      type: Object
-    },
-    type: {
-      default: 'right',
-      type: String
-    }
-  },
-  emits: ['update:visible', 'selected'],
-
-  setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        active: props.visible,
-        [props.type]: true
-      };
-    });
-
-    const updateValue = (value: boolean = !props.visible) => {
-      emit('update:visible', value);
-    };
-    const selected = (item: any, event: Event) => {
-      emit('selected', {
-        item,
-        event
-      });
-    };
-
-    return { classes, updateValue, selected, translate };
-  }
-});
+const { create } = createComponent('fixednav');
+import { component } from './common';
+export default create(component);
 </script>

src/packages/__VUE/fixednav/index.vue

@@ -1,98 +1,7 @@
-<template>
-  <view :class="classes" :style="position">
-    <nut-overlay v-if="overlay" :visible="visible" :z-index="200" @click="updateValue(false)" />
-    <slot name="list">
-      <view class="nut-fixednav__list">
-        <view
-          class="nut-fixednav__list-item"
-          v-for="(item, index) in navList"
-          @click="selected(item, $event)"
-          :key="item.id || index"
-        >
-          <img :src="item.icon" />
-          <view class="span">{{ item.text }}</view>
-          <view class="b" v-if="item.num">{{ item.num }}</view>
-        </view>
-      </view>
-    </slot>
-    <div class="nut-fixednav__btn" @click="updateValue()">
-      <slot name="btn">
-        <nut-icon name="left" color="#fff" />
-        <view class="text"
-          >{{ visible ? activeText || translate('activeText') : unActiveText || translate('unActiveText') }}
-        </view>
-      </slot>
-    </div>
-  </view>
-</template>
+<template src="./template.html"></template>
 <script lang="ts">
-import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import overlay from '../overlay/index.vue';
-const { componentName, create, translate } = createComponent('fixednav');
-
-export default create({
-  components: {
-    [overlay.name]: overlay
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    navList: {
-      default: () => [],
-      type: Array
-    },
-    activeText: {
-      default: '',
-      type: String
-    },
-    unActiveText: {
-      default: '',
-      type: String
-    },
-    position: {
-      default: () => {
-        return {
-          top: 'auto',
-          bottom: 'auto'
-        };
-      },
-      type: Object
-    },
-    type: {
-      default: 'right',
-      type: String
-    }
-  },
-  emits: ['update:visible', 'selected'],
-
-  setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        active: props.visible,
-        [props.type]: true
-      };
-    });
-
-    const updateValue = (value: boolean = !props.visible) => {
-      emit('update:visible', value);
-    };
-    const selected = (item: any, event: Event) => {
-      emit('selected', {
-        item,
-        event
-      });
-    };
-
-    return { classes, updateValue, selected, translate };
-  }
-});
+const { create } = createComponent('fixednav');
+import { component } from './common';
+export default create(component);
 </script>

src/packages/__VUE/fixednav/template.html

@@ -0,0 +1,21 @@
+<view :class="classes" :style="position">
+    <nut-overlay v-if="overlay" :visible="visible" :z-index="200" @click="updateValue(false)" />
+    <slot name="list">
+        <view class="nut-fixednav__list">
+            <view class="nut-fixednav__list-item" :class="{ active: item.id == current }"
+                v-for="(item, index) in navList" @click="selected(item, $event)" :key="item.id || index">
+                <img :src="item.icon" />
+                <view class="span">{{ item.text }}</view>
+                <view class="b" v-if="item.num">{{ item.num }}</view>
+            </view>
+        </view>
+    </slot>
+    <div class="nut-fixednav__btn" @click="updateValue()">
+        <slot name="btn">
+            <nut-icon name="left" color="#fff" />
+            <view class="text">{{ visible ? activeText || translate('activeText') : unActiveText ||
+                translate('unActiveText') }}
+            </view>
+        </slot>
+    </div>
+</view>

src/packages/styles/variables-jdb.scss

@@ -505,6 +505,7 @@ $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
 $fixednav-index: 201 !default;
 $fixednav-btn-bg: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+$fixednav-item-active-color: $primary-color !default;
 
 // NoticeBar
 $noticebar-background: rgba(251, 248, 220, 1) !default;

src/packages/styles/variables-jdt.scss

@@ -411,6 +411,7 @@ $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
 $fixednav-index: 201 !default;
 $fixednav-btn-bg: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$fixednav-item-active-color: $primary-color !default;
 
 // NoticeBar
 $noticebar-background: #f2f8ff !default;

src/packages/styles/variables.scss

@@ -436,6 +436,7 @@ $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
 $fixednav-index: 201 !default;
 $fixednav-btn-bg: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$fixednav-item-active-color: $primary-color !default;
 
 // NoticeBar
 $noticebar-background: rgba(251, 248, 220, 1) !default;