styles(action-sheet): add action-sheet type (#1307)

packages/renderless/src/action-sheet/vue.ts

@@ -10,6 +10,13 @@
  *
  */
 
+import type {
+  IActionSheetApi,
+  IActionSheetState,
+  IActionSheetProps,
+  ISharedRenderlessParamHooks,
+  IActionSheetRenderlessParamUtils
+} from '@/types'
 import {
   setSheetStyle,
   initScrollMenu,
@@ -37,9 +44,13 @@ export const api = [
   'hide'
 ]
 
-export const renderless = (props, { reactive, watch }, { emit, nextTick, refs, vm }, { BScroll }) => {
-  const api = {}
-  const state = reactive({
+export const renderless = (
+  props: IActionSheetProps,
+  { reactive, watch }: ISharedRenderlessParamHooks,
+  { emit, nextTick, refs, vm }: IActionSheetRenderlessParamUtils,
+  { BScroll }
+): IActionSheetApi => {
+  const state = reactive<IActionSheetState>({
     toggle: false,
     active: null,
     sheetMaskStyle: {},
@@ -47,7 +58,7 @@ export const renderless = (props, { reactive, watch }, { emit, nextTick, refs, v
     scroll: null
   })
 
-  Object.assign(api, {
+  const api: IActionSheetApi = {
     state,
     setSheetStyle: setSheetStyle({ state, props }),
     initScrollMenu: initScrollMenu({ state, nextTick, refs, BScroll }),
@@ -59,7 +70,7 @@ export const renderless = (props, { reactive, watch }, { emit, nextTick, refs, v
     actionSelectOption: actionSelectOption({ emit }),
     close: close({ emit, vm }),
     hide: hide(emit)
-  })
+  }
 
   watch(
     () => props.visible,

packages/renderless/src/alert/vue.ts

@@ -10,7 +10,13 @@
  *
  */
 
-import type{ IAlertApi, IAlertProps, IAlertState, ISharedRenderlessParamHooks, IAlertRenderlessParamUtils } from '@/types'
+import type {
+  IAlertApi,
+  IAlertProps,
+  IAlertState,
+  ISharedRenderlessParamHooks,
+  IAlertRenderlessParamUtils
+} from '@/types'
 import {
   computedGetIcon,
   computedGetTitle,

packages/renderless/types/action-sheet.type.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+import type { actionSheetProps } from '@/action-sheet/src'
+import type { ISharedRenderlessParamUtils } from './shared.type'
+
+export interface IActionSheetState {
+  toggle: boolean
+  active: null | string
+  sheetMaskStyle: CSSProperties
+  sheetContentStyle: CSSProperties
+  scroll: null | object
+}
+
+export type IActionSheetProps = ExtractPropTypes<typeof actionSheetProps>
+
+export type IActionSheetRenderlessParamUtils = ISharedRenderlessParamUtils<null>
+
+export interface IActionSheetApi {
+  state: IActionSheetState
+  setSheetStyle: ({ state, props }: { state: IActionSheetState; props: IActionSheetProps }) => void
+  initScrollMenu: ({
+    state,
+    nextTick,
+    refs,
+    BScroll
+  }: {
+    state: IActionSheetState
+    nextTick: IActionSheetRenderlessParamUtils['nextTick']
+    refs: IActionSheetRenderlessParamUtils['refs']
+    BScroll: object
+  }) => void
+  visibleHandle: ({ emit, state }: { emit: IActionSheetRenderlessParamUtils['emit']; state: IActionSheetState }) => void
+  watchVisible: (value: boolean) => void
+  menuHandle: (item: any) => void
+  confirm: () => void
+  selectOption: (option: any) => void
+  actionSelectOption: (option: any, index: any) => void
+  close: () => void
+  hide: () => void
+}

packages/vue/src/action-sheet/src/index.ts

@@ -1,67 +1,69 @@
 import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile|mobile-first'
 
+export const actionSheetProps = {
+  ...$props,
+  menus: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: [Number, String, Array],
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  height: {
+    type: String,
+    default: '100%'
+  },
+  valueField: {
+    type: String,
+    default: 'id'
+  },
+  textField: {
+    type: String,
+    default: 'label'
+  },
+  title: String,
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  showFooter: {
+    type: Boolean,
+    default: false
+  },
+  customClass: [String, Object, Array],
+  contentClass: String,
+  type: {
+    type: String,
+    default: 'normal'
+  },
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  contentPosition: {
+    type: Boolean,
+    default: false
+  },
+  contentStyle: {
+    type: Object,
+    default: () => ({})
+  }
+}
+
 export default defineComponent({
   name: $prefix + 'ActionSheet',
-  props: {
-    ...$props,
-    menus: {
-      type: Array,
-      default: () => []
-    },
-    modelValue: [Number, String, Array],
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    ellipsis: {
-      type: Boolean,
-      default: false
-    },
-    height: {
-      type: String,
-      default: '100%'
-    },
-    valueField: {
-      type: String,
-      default: 'id'
-    },
-    textField: {
-      type: String,
-      default: 'label'
-    },
-    title: String,
-    showHeader: {
-      type: Boolean,
-      default: true
-    },
-    showFooter: {
-      type: Boolean,
-      default: false
-    },
-    customClass: [String, Object, Array],
-    contentClass: String,
-    type: {
-      type: String,
-      default: 'normal'
-    },
-    mask: {
-      type: Boolean,
-      default: true
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
-    },
-    contentPosition: {
-      type: Boolean,
-      default: false
-    },
-    contentStyle: {
-      type: Object,
-      default: () => ({})
-    }
-  },
+  props: actionSheetProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }