init

uni_modules/nutui-uni/components/collapse/collapse.ts

@@ -0,0 +1,24 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../_constants'
+import { commonProps, isBoolean, isNumber, isString } from '../_utils'
+
+export const collapseProps = {
+  ...commonProps,
+  /**
+   * @description 当前展开面板的 `name`
+   */
+  modelValue: { type: [String, Number, Array] as PropType<string | number | (string | number)[]> },
+  /**
+   * @description 是否开启手风琴模式
+   */
+  accordion: Boolean,
+}
+
+export type CollapseProps = ExtractPropTypes<typeof collapseProps>
+
+export const collapseEmits = {
+  [CHANGE_EVENT]: (val: string | number | (string | number)[], name: string | number, status: boolean) => isString(val) || isNumber(val) || (val instanceof Object && isNumber(name)) || (isString(name) && isBoolean(status)),
+  [UPDATE_MODEL_EVENT]: (val: string | number | (string | number)[]) => isString(val) || isNumber(val) || (val instanceof Object),
+}
+
+export type CollapseEmits = typeof collapseEmits

uni_modules/nutui-uni/components/collapse/collapse.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, defineComponent, provide, ref, watch } from 'vue'
+import { CHANGE_EVENT, PREFIX, UPDATE_MODEL_EVENT } from '../_constants'
+import { getMainClass } from '../_utils'
+import { collapseEmits, collapseProps } from './collapse'
+
+const props = defineProps(collapseProps)
+const emit = defineEmits(collapseEmits)
+
+const innerValue = ref(props.modelValue || (props.accordion ? '' : []))
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+watch(() => props.modelValue, (val) => {
+  innerValue.value = val!
+})
+
+function changeVal(val: string | number | Array<string | number>, name: string | number, status = true) {
+  innerValue.value = val
+  emit(UPDATE_MODEL_EVENT, val)
+  emit(CHANGE_EVENT, val, name, status)
+}
+
+function updateVal(name: string | number) {
+  if (props.accordion) {
+    if (innerValue.value === name)
+      changeVal('', name, false)
+    else
+      changeVal(name, name, true)
+  }
+  else {
+    if (Array.isArray(innerValue.value)) {
+      if (innerValue.value.includes(name)) {
+        const newValue = innerValue.value.filter((v: string | number) => v !== name)
+        changeVal(newValue, name, false)
+      }
+      else {
+        const newValue = innerValue.value.concat([name])
+        changeVal(newValue, name, true)
+      }
+    }
+    else {
+      console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组')
+    }
+  }
+}
+
+function isExpanded(name: string | number) {
+  if (props.accordion)
+    return innerValue.value === name
+  else if (Array.isArray(innerValue.value))
+    return innerValue.value.includes(name)
+
+  return false
+}
+
+provide('collapseParent', {
+  updateVal,
+  isExpanded,
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-collapse`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/collapse/index.ts

@@ -0,0 +1 @@
+export type * from './collapse'