feat(ui/action-sheet): add new component action-sheet, basic feature …

…complete

affects: @varlet/ui

packages/varlet-ui/src/action-sheet/ActionSheet.vue

@@ -0,0 +1,104 @@
+<template>
+  <var-popup
+    class="var-action-sheet__popup-radius"
+    position="bottom"
+    :overlay="overlay"
+    :overlay-class="overlayClass"
+    :overlay-style="overlayStyle"
+    :lock-scroll="lockScroll"
+    :close-on-click-overlay="closeOnClickOverlay"
+    :teleport="teleport"
+    :show="popupShow"
+    v-bind="{
+      'onUpdate:show': (value) => $props['onUpdate:show'] && $props['onUpdate:show'](value),
+    }"
+    @open="onOpen"
+    @close="onClose"
+    @closed="onClosed"
+    @opened="onOpened"
+    @route-change="onRouteChange"
+  >
+    <div class="var-action-sheet var--box" v-bind="$attrs">
+      <slot name="title">
+        <div class="var-action-sheet__title">{{ dt(title, pack.actionSheetTitle) }}</div>
+      </slot>
+
+      <slot name="actions">
+        <div
+          class="var-action-sheet__action-item"
+          :class="[action.className, action.disabled ? 'var-action-sheet--disabled' : null]"
+          v-ripple="{ disabled: action.disabled }"
+          v-for="action in actions"
+          :key="action.name"
+          :style="{ color: action.color }"
+          @click="handleSelect(action)"
+        >
+          <var-icon
+            class="var-action-sheet__action-icon"
+            :name="action.icon"
+            :size="action.iconSize"
+            v-if="action.icon"
+          />
+          <div class="var-action-sheet__action-name">{{ action.name }}</div>
+        </div>
+      </slot>
+    </div>
+  </var-popup>
+</template>
+
+<script lang="ts">
+import Ripple from '../ripple'
+import Popup from '../popup'
+import Icon from '../icon'
+import { defineComponent, ref, Ref, watch } from 'vue'
+import { props } from './props'
+import { dt } from '../utils/shared'
+import { pack } from '../locale'
+import { ActionItem } from './index'
+
+export default defineComponent({
+  name: 'VarActionSheet',
+  directives: { Ripple },
+  components: {
+    [Popup.name]: Popup,
+    [Icon.name]: Icon,
+  },
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const popupShow: Ref<boolean> = ref(false)
+
+    const handleSelect = (action: ActionItem) => {
+      if (action.disabled) {
+        return
+      }
+
+      const { closeOnClickAction, onSelect } = props
+      onSelect?.(action)
+      closeOnClickAction && props['onUpdate:show']?.(false)
+    }
+
+    watch(
+      () => props.show,
+      (newValue) => {
+        popupShow.value = newValue
+      },
+      { immediate: true }
+    )
+
+    return {
+      popupShow,
+      pack,
+      dt,
+      handleSelect,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../icon/icon';
+@import '../ripple/ripple';
+@import '../popup/popup';
+@import './actionSheet';
+</style>

packages/varlet-ui/src/action-sheet/__tests__/index.spec.js

@@ -0,0 +1,14 @@
+import example from '../example'
+import ActionSheet from '..'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+
+test('test actionSheet example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test actionSheet plugin', () => {
+  const app = createApp({}).use(ActionSheet)
+  expect(app.component(ActionSheet.name)).toBeTruthy()
+})

packages/varlet-ui/src/action-sheet/actionSheet.less

@@ -0,0 +1,50 @@
+@import '../styles/var';
+
+@action-sheet-border-radius: 2px;
+@action-sheet-title-color: #888;
+@action-sheet-title-padding: 10px 16px;
+@action-sheet-action-item-height: 48px;
+@action-sheet-action-item-padding: 0px 18px;
+@action-sheet-action-item-color: #333;
+@action-sheet-action-item-disabled-color: @color-disabled;
+
+.var-action-sheet {
+  padding: 10px 0;
+  max-height: 80%;
+
+  &__popup-radius {
+    border-radius: @action-sheet-border-radius;
+  }
+
+  &__title {
+    padding: @action-sheet-title-padding;
+    color: @action-sheet-title-color;
+    font-size: 14px;
+  }
+
+  &__action-item {
+    display: flex;
+    align-items: center;
+    height: @action-sheet-action-item-height;
+    padding: @action-sheet-action-item-padding;
+    color: @action-sheet-action-item-color;
+    cursor: pointer;
+  }
+
+  &__action-name {
+    overflow: auto;
+    max-height: @action-sheet-action-item-height;
+  }
+
+  &__action-icon {
+    margin-right: 20px;
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+
+  &--disabled {
+    color: @action-sheet-action-item-disabled-color !important;
+    cursor: not-allowed;
+  }
+}

packages/varlet-ui/src/action-sheet/example/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <app-type>{{ pack.functionCall }}</app-type>
+  <var-button type="primary" block @click="createBasic">{{ pack.basicUsage }}</var-button>
+  <var-button type="primary" block @click="modifyTitle">{{ pack.modifyTitle }}</var-button>
+  <var-button type="primary" block @click="disableAction">{{ pack.disabled }}</var-button>
+  <var-button type="primary" block @click="disableCloseOnClickAction">{{ pack.disableCloseOnClickAction }}</var-button>
+  <var-button type="primary" block @click="customActionStyles">{{ pack.customActionStyles }}</var-button>
+
+  <app-type>{{ pack.componentCall }}</app-type>
+  <var-button type="warning" block @click="show = true">{{ pack.basicUsage }}</var-button>
+  <var-action-sheet :actions="actions" v-model:show="show" @select="handleSelect" />
+
+  <var-button type="warning" block @click="show1 = true">{{ pack.modifyTitle }}</var-button>
+  <var-action-sheet :title="pack.customTitle" :actions="actions" v-model:show="show1" @select="handleSelect" />
+
+  <var-button type="warning" block @click="show2 = true">{{ pack.disabled }}</var-button>
+  <var-action-sheet :actions="disabledActions" v-model:show="show2" @select="handleSelect" />
+
+  <var-button type="warning" block @click="show3 = true">{{ pack.disableCloseOnClickAction }}</var-button>
+  <var-action-sheet :close-on-click-action="false" :actions="actions" v-model:show="show3" @select="handleSelect" />
+
+  <var-button type="warning" block @click="show4 = true">{{ pack.customActionStyles }}</var-button>
+  <var-action-sheet :actions="customStyleActions" v-model:show="show4" @select="handleSelect" />
+</template>
+
+<script>
+import ActionSheet from '../index'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+import Button from '../../button'
+import Snackbar from '../../snackbar'
+import { defineComponent, ref, reactive } from 'vue'
+import { pack, use } from './locale'
+import { watchLang } from '../../utils/components'
+
+export default defineComponent({
+  name: 'ActionSheetExample',
+  components: {
+    [ActionSheet.Component.name]: ActionSheet.Component,
+    [Button.name]: Button,
+    AppType,
+  },
+  setup() {
+    const rawActions = [
+      {
+        name: 'Item 01',
+        icon: 'account-circle',
+      },
+      {
+        name: 'Item 02',
+        icon: 'notebook',
+      },
+      {
+        name: 'Item 03',
+        icon: 'wifi',
+      },
+    ]
+    const rawDisabledActions = [
+      {
+        name: 'Item 01',
+        icon: 'account-circle',
+      },
+      {
+        name: 'Item 02',
+        icon: 'notebook',
+      },
+      {
+        name: 'Item 03',
+        icon: 'wifi',
+        disabled: true,
+      },
+    ]
+    const rawCustomStyleActions = [
+      {
+        name: 'Item 01',
+        icon: 'account-circle',
+        color: '#4caf50',
+      },
+      {
+        name: 'Item 02',
+        icon: 'notebook',
+        color: '#ff9800',
+      },
+      {
+        name: 'Item 03',
+        icon: 'wifi',
+        color: '#00bcd4',
+      },
+    ]
+    const actions = reactive(rawActions)
+    const disabledActions = reactive(rawDisabledActions)
+    const customStyleActions = reactive(rawCustomStyleActions)
+    const show = ref(false)
+    const show1 = ref(false)
+    const show2 = ref(false)
+    const show3 = ref(false)
+    const show4 = ref(false)
+
+    const createBasic = async () => {
+      const action = await ActionSheet({ actions: rawActions })
+
+      action !== 'close' && Snackbar(`${pack.value.yourSelected}${action.name}`)
+    }
+
+    const modifyTitle = async () => {
+      const action = await ActionSheet({
+        actions: rawActions,
+        title: pack.value.customTitle,
+      })
+
+      action !== 'close' && Snackbar(`${pack.value.yourSelected}${action.name}`)
+    }
+
+    const disableAction = async () => {
+      const action = await ActionSheet({
+        actions: rawDisabledActions,
+      })
+
+      action !== 'close' && Snackbar(`${pack.value.yourSelected}${action.name}`)
+    }
+
+    const customActionStyles = async () => {
+      const action = await ActionSheet({
+        actions: rawCustomStyleActions,
+      })
+
+      action !== 'close' && Snackbar(`${pack.value.yourSelected}${action.name}`)
+    }
+
+    const disableCloseOnClickAction = () => {
+      ActionSheet({
+        actions: [
+          {
+            name: 'Item 01',
+            icon: 'account-circle',
+          },
+          {
+            name: 'Item 02',
+            icon: 'notebook',
+          },
+          {
+            name: 'Item 03',
+            icon: 'wifi',
+          },
+        ],
+        closeOnClickAction: false,
+        onSelect: (action) => Snackbar(`${pack.value.yourSelected}${action.name}`),
+      })
+    }
+
+    const handleSelect = (action) => {
+      Snackbar(`${pack.value.yourSelected}${action.name}`)
+    }
+
+    watchLang(use)
+
+    return {
+      pack,
+      show,
+      show1,
+      show2,
+      show3,
+      show4,
+      actions,
+      disabledActions,
+      customStyleActions,
+      createBasic,
+      modifyTitle,
+      disableAction,
+      customActionStyles,
+      handleSelect,
+      disableCloseOnClickAction,
+    }
+  },
+})
+</script>
+
+<style scoped lang="less">
+.var-button {
+  margin-top: 10px;
+}
+</style>

packages/varlet-ui/src/action-sheet/example/locale/en-US.ts

@@ -0,0 +1,11 @@
+export default {
+  functionCall: 'Function Call',
+  basicUsage: 'Basic Usage',
+  modifyTitle: 'Modify Title',
+  componentCall: 'Component Call',
+  yourSelected: 'Your selected is:',
+  customTitle: 'Choose whichever you like',
+  disableCloseOnClickAction: 'Disable close on click action',
+  disabled: 'action disabled',
+  customActionStyles: 'custom action styles',
+}

packages/varlet-ui/src/action-sheet/example/locale/index.ts

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)