From 6b119853d3ec96dafb3742a0da5cddb43e897842 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 21 Jul 2023 15:40:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(type):=20=E4=BF=AE=E5=A4=8D=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6=E7=B1=BB=E5=9E=8B=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=A2=E5=A4=B1=E9=97=AE=E9=A2=98=20#2444?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/cellgroup/index.taro.vue   | 22 +++++
 .../__VUE/checkboxgroup/index.taro.vue        | 95 +++++++++++++++++++
 src/packages/__VUE/col/index.taro.vue         | 46 +++++++++
 src/packages/__VUE/radiogroup/index.taro.vue  | 47 +++++++++
 src/packages/__VUE/row/index.taro.vue         | 55 +++++++++++
 .../__VUE/sidenavbaritem/index.taro.vue       | 42 ++++++++
 src/packages/__VUE/step/index.taro.vue        | 88 +++++++++++++++++
 src/packages/__VUE/tabpane/index.taro.vue     | 41 ++++++++
 8 files changed, 436 insertions(+)
 create mode 100644 src/packages/__VUE/cellgroup/index.taro.vue
 create mode 100644 src/packages/__VUE/checkboxgroup/index.taro.vue
 create mode 100644 src/packages/__VUE/col/index.taro.vue
 create mode 100644 src/packages/__VUE/radiogroup/index.taro.vue
 create mode 100644 src/packages/__VUE/row/index.taro.vue
 create mode 100644 src/packages/__VUE/sidenavbaritem/index.taro.vue
 create mode 100644 src/packages/__VUE/step/index.taro.vue
 create mode 100644 src/packages/__VUE/tabpane/index.taro.vue

diff --git a/src/packages/__VUE/cellgroup/index.taro.vue b/src/packages/__VUE/cellgroup/index.taro.vue
new file mode 100644
index 0000000000..cf53df3657
--- /dev/null
+++ b/src/packages/__VUE/cellgroup/index.taro.vue
@@ -0,0 +1,22 @@
+<template>
+  <view class="nut-cell-group">
+    <slot v-if="$slots.title" name="title"></slot>
+    <view v-else-if="title" class="nut-cell-group__title">{{ title }}</view>
+    <slot v-if="$slots.desc" name="desc"></slot>
+    <view v-else-if="desc" class="nut-cell-group__desc">{{ desc }}</view>
+    <view class="nut-cell-group__wrap">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@/packages/utils/create';
+const { create } = createComponent('cell-group');
+export default create({
+  props: {
+    title: { type: String, default: '' },
+    desc: { type: String, default: '' }
+  }
+});
+</script>
diff --git a/src/packages/__VUE/checkboxgroup/index.taro.vue b/src/packages/__VUE/checkboxgroup/index.taro.vue
new file mode 100644
index 0000000000..afe3149c18
--- /dev/null
+++ b/src/packages/__VUE/checkboxgroup/index.taro.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+import { h, watch, provide, computed, ComponentInternalInstance, reactive, ComponentPublicInstance } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+import { useExpose } from '@/packages/utils/useExpose/index';
+const { create, componentName } = createComponent('checkbox-group');
+
+export default create({
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['change', 'update:modelValue'],
+  setup(props, { slots, emit }) {
+    const state = reactive({
+      children: [] as ComponentPublicInstance[]
+    });
+
+    const link = (child: ComponentInternalInstance) => {
+      child.proxy && state.children.push(child.proxy);
+    };
+
+    const unlink = (child: ComponentInternalInstance) => {
+      child.proxy && (state.children = state.children.filter((p) => p !== child.proxy));
+    };
+
+    const updateValue = (value: string[]) => {
+      emit('update:modelValue', value);
+      emit('change', value);
+    };
+
+    const toggleAll = (checked: boolean) => {
+      const values: string[] = [];
+      if (checked) {
+        state.children.forEach((item: any) => {
+          if (!item?.disabled) {
+            values.push(item?.label);
+          }
+        });
+      }
+      emit('update:modelValue', values);
+    };
+
+    const toggleReverse = () => {
+      const value = state.children
+        .filter((item: any) => {
+          if (item?.disabled) {
+            return false;
+          } else {
+            return !props.modelValue.includes(item.label);
+          }
+        })
+        .map((item: any) => item.label);
+      emit('update:modelValue', value);
+    };
+
+    provide('parent', {
+      value: computed(() => props.modelValue),
+      disabled: computed(() => props.disabled),
+      max: computed(() => props.max),
+      updateValue,
+      link,
+      unlink
+    });
+
+    watch(
+      () => props.modelValue,
+      (value) => {
+        emit('change', value);
+      }
+    );
+
+    useExpose({ toggleAll, toggleReverse });
+
+    return () => {
+      return h(
+        'view',
+        {
+          class: componentName
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/col/index.taro.vue b/src/packages/__VUE/col/index.taro.vue
new file mode 100644
index 0000000000..ffe95498e3
--- /dev/null
+++ b/src/packages/__VUE/col/index.taro.vue
@@ -0,0 +1,46 @@
+<template>
+  <view :class="classes" :style="style">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts">
+import { computed, inject } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { componentName, create } = createComponent('col');
+
+export default create({
+  props: {
+    span: {
+      type: [String, Number],
+      default: '24'
+    },
+    offset: {
+      type: [String, Number],
+      default: '0'
+    }
+  },
+  emits: [],
+  setup(props) {
+    const prefixCls = componentName;
+    const gutter = inject('gutter') as number;
+    const classes = computed(() => {
+      return {
+        [prefixCls]: true,
+        [prefixCls + '-gutter']: gutter,
+        ['nut-col-' + props.span]: true,
+        ['nut-col-offset-' + props.offset]: true
+      };
+    });
+    const style = computed(() => {
+      return {
+        paddingLeft: gutter / 2 + 'px',
+        paddingRight: gutter / 2 + 'px'
+      };
+    });
+    return {
+      classes,
+      style
+    };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/radiogroup/index.taro.vue b/src/packages/__VUE/radiogroup/index.taro.vue
new file mode 100644
index 0000000000..016d55a4dc
--- /dev/null
+++ b/src/packages/__VUE/radiogroup/index.taro.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+import { h, provide, computed, readonly, watch } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { componentName, create } = createComponent('radio-group');
+
+export default create({
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean],
+      default: ''
+    },
+    direction: {
+      type: String,
+      default: 'vertical' //horizontal
+    },
+    textPosition: {
+      type: String,
+      default: 'right'
+    }
+  },
+  emits: ['change', 'update:modelValue'],
+  setup(props, { emit, slots }) {
+    const updateValue = (value: string | boolean | number) => emit('update:modelValue', value);
+
+    provide('parent', {
+      label: readonly(computed(() => props.modelValue)),
+      position: props.textPosition,
+      updateValue
+    });
+
+    watch(
+      () => props.modelValue,
+      (value) => emit('change', value)
+    );
+
+    return () => {
+      return h(
+        'view',
+        {
+          class: `${componentName} ${componentName}--${props.direction}`
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/row/index.taro.vue b/src/packages/__VUE/row/index.taro.vue
new file mode 100644
index 0000000000..a341ff27dd
--- /dev/null
+++ b/src/packages/__VUE/row/index.taro.vue
@@ -0,0 +1,55 @@
+<template>
+  <view :class="classes">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts">
+import { provide, computed } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { componentName, create } = createComponent('row');
+
+export default create({
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    gutter: {
+      type: [String, Number],
+      default: ''
+    },
+    justify: {
+      type: String,
+      default: 'start'
+    },
+    align: {
+      type: String,
+      default: 'flex-start'
+    },
+    flexWrap: {
+      type: String,
+      default: 'nowrap'
+    }
+  },
+  emits: [],
+  setup(props) {
+    const prefixCls = componentName;
+    provide('gutter', props.gutter);
+    const getClass = (prefix: string, type: string) => {
+      return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
+    };
+    const classes = computed(() => {
+      return [
+        prefixCls,
+        getClass('', props.type),
+        getClass('justify', props.justify),
+        getClass('align', props.align),
+        getClass('flex', props.flexWrap)
+      ];
+    });
+    return {
+      classes
+    };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/sidenavbaritem/index.taro.vue b/src/packages/__VUE/sidenavbaritem/index.taro.vue
new file mode 100644
index 0000000000..4fbf03f4fd
--- /dev/null
+++ b/src/packages/__VUE/sidenavbaritem/index.taro.vue
@@ -0,0 +1,42 @@
+<template>
+  <view :class="classes" @click.stop="handleClick" :ikey="ikey">
+    <span class="nut-side-navbar-item__title">
+      {{ title }}
+    </span>
+  </view>
+</template>
+<script lang="ts">
+import { computed } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { componentName, create } = createComponent('side-navbar-item');
+export default create({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    ikey: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['click'],
+  setup: (props: any, context: any) => {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const handleClick = () => {
+      context.emit('click');
+    };
+
+    return {
+      classes,
+      handleClick
+    };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/step/index.taro.vue b/src/packages/__VUE/step/index.taro.vue
new file mode 100644
index 0000000000..969a82b9b9
--- /dev/null
+++ b/src/packages/__VUE/step/index.taro.vue
@@ -0,0 +1,88 @@
+<template>
+  <view :class="classes" @click="handleClickStep">
+    <view class="nut-step-head">
+      <view class="nut-step-line"></view>
+      <view class="nut-step-icon" :class="[!dot ? 'is-icon' : '']">
+        <view class="nut-step-icon-inner">
+          <slot name="icon">
+            <template v-if="dot"></template>
+            <template v-else>
+              <view class="nut-step-inner">{{ index }}</view>
+            </template>
+          </slot>
+        </view>
+      </view>
+    </view>
+    <view class="nut-step-main">
+      <view class="nut-step-title">
+        <span v-if="!$slots.title">{{ title }}</span>
+        <slot name="title"></slot>
+      </view>
+      <view class="nut-step-content" v-if="content || $slots.content">
+        <span v-if="!$slots.content" v-html="content"></span>
+        <slot name="content"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { reactive, computed, inject, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { create, componentName } = createComponent('step');
+
+export default create({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['click-step'],
+
+  setup() {
+    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+    const parent: any = inject('parent');
+    parent['relation'](proxy);
+
+    const state = reactive({
+      dot: parent.props.progressDot
+    });
+
+    const index = computed(() => parent.state.children.indexOf(proxy) + 1);
+
+    const getCurrentStatus = () => {
+      const activeIndex = index.value;
+      if (activeIndex < +parent.props.current) return 'finish';
+      return activeIndex === +parent.props.current ? 'process' : 'wait';
+    };
+
+    const status = computed(() => {
+      return getCurrentStatus();
+    });
+
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-${status.value}`]: true
+      };
+    });
+
+    const handleClickStep = () => {
+      parent['onEmit'](index.value);
+    };
+
+    return {
+      ...toRefs(state),
+      index,
+      classes,
+      handleClickStep
+    };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/tabpane/index.taro.vue b/src/packages/__VUE/tabpane/index.taro.vue
new file mode 100644
index 0000000000..dc6a2fa45e
--- /dev/null
+++ b/src/packages/__VUE/tabpane/index.taro.vue
@@ -0,0 +1,41 @@
+<template>
+  <view class="nut-tab-pane" :style="paneStyle" :class="{ inactive: paneKey != activeKey && autoHeight }">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts">
+import { computed, CSSProperties, inject } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { create } = createComponent('tab-pane');
+
+export default create({
+  props: {
+    title: {
+      type: [String, Number],
+      default: ''
+    },
+    paneKey: {
+      type: [String, Number],
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  setup(props) {
+    const parentOption = inject('tabsOpiton') as any;
+    const paneStyle = computed(() => {
+      return {
+        display:
+          parentOption.animatedTime.value == 0 && props.paneKey != parentOption.activeKey.value ? 'none' : undefined
+      } as CSSProperties;
+    });
+    return {
+      ...parentOption,
+      paneStyle
+    };
+  }
+});
+</script>