refactor: remove template.html (#2667)

jd-opensource · Nov 18, 2023 · 0b9a640 · 0b9a640
1 parent fe8399f
commit 0b9a640
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 83 deletions.
diff --git a/src/packages/__VUE/cell/index.taro.vue b/src/packages/__VUE/cell/index.taro.vue
@@ -1,11 +1,46 @@
-<template src="./template.html"></template>
+<template>
+  <view :class="classes" :style="baseStyle" @click="handleClick">
+    <slot>
+      <view v-if="$slots.icon" class="nut-cell__icon">
+        <slot name="icon"></slot>
+      </view>
+      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
+        <template v-if="subTitle">
+          <slot name="title">
+            <view class="title">{{ title }}</view>
+          </slot>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </template>
+      </view>
+      <view
+        v-if="desc || $slots.desc"
+        class="nut-cell__value"
+        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
+        :style="descStyle"
+      >
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </view>
+      <slot name="link">
+        <Right v-if="isLink || to" class="nut-cell__link"></Right>
+      </slot>
+    </slot>
+  </view>
+</template>
 
 <script lang="ts">
+import type { CSSProperties } from 'vue';
 import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
-const { componentName, create } = createComponent('cell');
 import { Right } from '@nutui/icons-vue-taro';
+const { componentName, create } = createComponent('cell');
 export default create({
   components: { Right },
   props: {
@@ -39,14 +74,21 @@ export default create({
       };
     });
 
+    const descStyle = computed(() => {
+      return {
+        textAlign: props.descTextAlign
+      } as CSSProperties;
+    });
+
     const handleClick = (event: Event) => {
       emit('click', event);
     };
 
     return {
       handleClick,
       classes,
-      baseStyle
+      baseStyle,
+      descStyle
     };
   }
 });

diff --git a/src/packages/__VUE/cell/index.vue b/src/packages/__VUE/cell/index.vue
@@ -1,6 +1,41 @@
-<template src="./template.html"></template>
+<template>
+  <view :class="classes" :style="baseStyle" @click="handleClick">
+    <slot>
+      <view v-if="$slots.icon" class="nut-cell__icon">
+        <slot name="icon"></slot>
+      </view>
+      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
+        <template v-if="subTitle">
+          <slot name="title">
+            <view class="title">{{ title }}</view>
+          </slot>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </template>
+      </view>
+      <view
+        v-if="desc || $slots.desc"
+        class="nut-cell__value"
+        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
+        :style="descStyle"
+      >
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </view>
+      <slot name="link">
+        <Right v-if="isLink || to" class="nut-cell__link"></Right>
+      </slot>
+    </slot>
+  </view>
+</template>
 
 <script lang="ts">
+import type { CSSProperties } from 'vue';
 import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useRouter } from '@/packages/utils/useRoute';
@@ -41,6 +76,12 @@ export default create({
       };
     });
 
+    const descStyle = computed(() => {
+      return {
+        textAlign: props.descTextAlign
+      } as CSSProperties;
+    });
+
     const handleClick = (event: Event) => {
       emit('click', event);
 
@@ -54,7 +95,8 @@ export default create({
     return {
       handleClick,
       classes,
-      baseStyle
+      baseStyle,
+      descStyle
     };
   }
 });

diff --git a/src/packages/__VUE/cell/template.html b/src/packages/__VUE/cell/template.html
diff --git a/src/packages/__VUE/fixednav/index.taro.vue b/src/packages/__VUE/fixednav/index.taro.vue
@@ -1,4 +1,31 @@
-<template src="./template.html"></template>
+<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-fixed-nav__list">
+        <view
+          v-for="(item, index) in navList"
+          :key="item.id || index"
+          class="nut-fixed-nav__list-item"
+          :class="{ active: item.id == current }"
+          @click="selected(item, $event)"
+        >
+          <img :src="item.icon" />
+          <view class="span">{{ item.text }}</view>
+          <view v-if="item.num" class="b">{{ item.num }}</view>
+        </view>
+      </view>
+    </slot>
+    <div class="nut-fixed-nav__btn" @click="updateValue()">
+      <slot name="btn">
+        <Left color="#fff" />
+        <view class="text">
+          {{ visible ? activeText || translate('activeText') : unActiveText || translate('unActiveText') }}
+        </view>
+      </slot>
+    </div>
+  </view>
+</template>
 <script lang="ts">
 import { PropType, computed, ref } from 'vue';
 import { Left } from '@nutui/icons-vue-taro';

diff --git a/src/packages/__VUE/fixednav/index.vue b/src/packages/__VUE/fixednav/index.vue
@@ -1,4 +1,31 @@
-<template src="./template.html"></template>
+<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-fixed-nav__list">
+        <view
+          v-for="(item, index) in navList"
+          :key="item.id || index"
+          class="nut-fixed-nav__list-item"
+          :class="{ active: item.id == current }"
+          @click="selected(item, $event)"
+        >
+          <img :src="item.icon" />
+          <view class="span">{{ item.text }}</view>
+          <view v-if="item.num" class="b">{{ item.num }}</view>
+        </view>
+      </view>
+    </slot>
+    <div class="nut-fixed-nav__btn" @click="updateValue()">
+      <slot name="btn">
+        <Left color="#fff" />
+        <view class="text">
+          {{ visible ? activeText || translate('activeText') : unActiveText || translate('unActiveText') }}
+        </view>
+      </slot>
+    </div>
+  </view>
+</template>
 <script lang="ts">
 import { PropType, computed, ref } from 'vue';
 import { Left } from '@nutui/icons-vue';

diff --git a/src/packages/__VUE/fixednav/template.html b/src/packages/__VUE/fixednav/template.html
diff --git a/src/packages/__VUE/rate/index.taro.vue b/src/packages/__VUE/rate/index.taro.vue
@@ -1,4 +1,52 @@
-<template src="./template.html"></template>
+<template>
+  <view class="nut-rate">
+    <view
+      v-for="n in Number(count)"
+      :id="'rateRefs-' + refRandomId + n"
+      :key="n"
+      ref="rateRefs"
+      class="nut-rate-item"
+      :style="n < Number(count) ? { marginRight: pxCheck(spacing) } : {}"
+    >
+      <view class="nut-rate-item__icon--full">
+        <component
+          :is="
+            renderIcon(customIcon, {
+              width: size,
+              height: size,
+              size,
+              color: n <= Number(modelValue) ? activeColor : voidColor
+            })
+          "
+          class="nut-rate-item__icon"
+          :class="{ 'nut-rate-item__icon--disabled': disabled || n > Number(modelValue) }"
+          @click="onClick(1, n)"
+        ></component>
+      </view>
+      <view v-if="allowHalf && Number(modelValue) + 1 > n" class="nut-rate-item__icon--half">
+        <component
+          :is="
+            renderIcon(customIcon, {
+              width: size,
+              height: size,
+              size,
+              color: n <= Number(modelValue) + 1 ? activeColor : voidColor
+            })
+          "
+          class="nut-rate-item__icon"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+      <view v-else-if="allowHalf && Number(modelValue) + 1 < n" class="nut-rate-item__icon--half">
+        <component
+          :is="renderIcon(customIcon, { width: size, height: size, size, color: voidColor })"
+          class="nut-rate-item__icon nut-rate-item__icon--disabled"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+    </view>
+  </view>
+</template>
 <script lang="ts">
 import { ref } from 'vue';
 import { StarFillN } from '@nutui/icons-vue-taro';

diff --git a/src/packages/__VUE/rate/index.vue b/src/packages/__VUE/rate/index.vue
@@ -1,4 +1,52 @@
-<template src="./template.html"></template>
+<template>
+  <view class="nut-rate" @touchstart="onTouchStart" @touchmove="onTouchMove">
+    <view
+      v-for="n in Number(count)"
+      :id="'rateRefs-' + refRandomId + n"
+      :key="n"
+      ref="rateRefs"
+      class="nut-rate-item"
+      :style="n < Number(count) ? { marginRight: pxCheck(spacing) } : {}"
+    >
+      <view class="nut-rate-item__icon--full">
+        <component
+          :is="
+            renderIcon(customIcon, {
+              width: size,
+              height: size,
+              size,
+              color: n <= Number(modelValue) ? activeColor : voidColor
+            })
+          "
+          class="nut-rate-item__icon"
+          :class="{ 'nut-rate-item__icon--disabled': disabled || n > Number(modelValue) }"
+          @click="onClick(1, n)"
+        ></component>
+      </view>
+      <view v-if="allowHalf && Number(modelValue) + 1 > n" class="nut-rate-item__icon--half">
+        <component
+          :is="
+            renderIcon(customIcon, {
+              width: size,
+              height: size,
+              size,
+              color: n <= Number(modelValue) + 1 ? activeColor : voidColor
+            })
+          "
+          class="nut-rate-item__icon"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+      <view v-else-if="allowHalf && Number(modelValue) + 1 < n" class="nut-rate-item__icon--half">
+        <component
+          :is="renderIcon(customIcon, { width: size, height: size, size, color: voidColor })"
+          class="nut-rate-item__icon nut-rate-item__icon--disabled"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+    </view>
+  </view>
+</template>
 <script lang="ts">
 import { Ref, ref } from 'vue';
 import { StarFillN } from '@nutui/icons-vue';

diff --git a/src/packages/__VUE/rate/template.html b/src/packages/__VUE/rate/template.html
diff --git a/src/packages/utils/pxCheck.ts b/src/packages/utils/pxCheck.ts
@@ -1,3 +1,5 @@
-export const pxCheck = (value: string | number): string => {
-  return isNaN(Number(value)) ? String(value) : `${value}px`;
+export const pxCheck = (value?: string | number): string | undefined => {
+  if (value !== undefined) {
+    return isNaN(Number(value)) ? String(value) : `${value}px`;
+  }
 };