feat(ui/tabs-items): support getSwipe method

varletjs · Sep 18, 2022 · 23ffad1 · 23ffad1
1 parent 360dece
commit 23ffad1
Show file tree

Hide file tree

Showing 11 changed files with 734 additions and 2,778 deletions.
diff --git a/packages/varlet-cli/site/components/code-example/CodeExample.vue b/packages/varlet-cli/site/components/code-example/CodeExample.vue
@@ -94,18 +94,7 @@ export default defineComponent({
     }
 
     const toPlayground = () => {
-      const scriptStart = '<script setup>\n'
-      const scriptEnd = '<\/script>'
-      const injectImport = 'import { installVarletUI } from \'./varlet-repl-plugin.js\'\n'
-      const injectCall = '\ninstallVarletUI()\n'
-      let codeText = code.value?.innerText ?? ''
-
-      if (codeText.includes(scriptStart)) {
-        codeText = codeText.replace(scriptStart, `${scriptStart}${injectImport}`)
-        codeText = codeText.replace(scriptEnd, `${injectCall}${scriptEnd}`)
-      } else {
-        codeText = `${scriptStart}${injectImport}${injectCall}<\/script>\n\n${codeText}`
-      }
+      const codeText = code.value?.innerText ?? ''
 
       const file = { 'App.vue': codeText }
       window.open(`${playground.value}/#${utoa(JSON.stringify(file))}`)

diff --git a/packages/varlet-ui-playground/src/App.vue b/packages/varlet-ui-playground/src/App.vue
@@ -41,6 +41,10 @@ watchEffect(() => history.replaceState({}, '', store.serialize()))
 </template>
 
 <style>
+*::-webkit-scrollbar {
+  display: none;
+}
+
 body {
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',

diff --git a/packages/varlet-ui-playground/src/store.ts b/packages/varlet-ui-playground/src/store.ts
@@ -40,9 +40,21 @@ await appendStyle()
 export function installVarletUI() {
   const { parent } = window
 
-  document.body.style.minHeight = '100vh'
-  document.body.style.color = 'var(--color-text)'
-  document.body.style.backgroundColor = 'var(--color-body)'
+  const style = document.createElement('style')
+  style.innerHTML = \`
+    body {
+      min-height: 100vh;
+      padding: 16px;
+      margin: 0;
+      color: var(--color-text);
+      background-color: var(--color-body);
+    }
+
+    *::-webkit-scrollbar {
+      display: none;
+    }
+  \`
+  document.head.appendChild(style)
 
   if (parent.document.documentElement.classList.contains('dark')) {
     VarletUI.StyleProvider(VarletUI.Themes.dark)
@@ -74,6 +86,7 @@ const containerCode = `\
 <script setup>
 import App from './${defaultMainFile}'
 import { installVarletUI } from './${varletReplPlugin}'
+
 installVarletUI()
 </script>
 
@@ -129,10 +142,9 @@ export class ReplStore implements Store {
     if (!files[mainFile]) {
       mainFile = Object.keys(files)[0]
     }
-    /**
-     * 通过外层容器自动将组件库install到实例内以及引入样式文件
-     */
+
     files[MAIN_CONTAINER] = new File(MAIN_CONTAINER, containerCode, true)
+
     this.state = reactive({
       mainFile: MAIN_CONTAINER,
       files,

diff --git a/packages/varlet-ui-playground/vite.config.ts b/packages/varlet-ui-playground/vite.config.ts
@@ -18,16 +18,14 @@ function copyVarletPlugin() {
   }
 }
 
-export default async () => {
-  return {
-    base: './',
-    plugins: [copyVarletPlugin()],
-    server: {
-      host: '0.0.0.0',
-      port: 3000,
-    },
-    build: {
-      outDir: 'site',
-    },
-  }
+export default {
+  base: './',
+  plugins: [copyVarletPlugin()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+  },
+  build: {
+    outDir: 'site',
+  },
 }
diff --git a/packages/varlet-ui/src/tabs-items/TabsItems.vue b/packages/varlet-ui/src/tabs-items/TabsItems.vue
@@ -8,11 +8,11 @@
 import VarSwipe from '../swipe'
 import { defineComponent, watch, ref } from 'vue'
 import { useTabItem } from './provide'
+import { call, createNamespace } from '../utils/components'
 import { props } from './props'
 import type { Ref } from 'vue'
 import type { TabsItemsProvider } from './provide'
 import type { TabItemProvider } from '../tab-item/provide'
-import { call, createNamespace } from '../utils/components'
 
 const { n } = createNamespace('tabs-items')
 
@@ -54,6 +54,11 @@ export default defineComponent({
       call(props['onUpdate:active'], active)
     }
 
+    // expose
+    const getSwipe = () => {
+      return swipe.value
+    }
+
     const tabsItemsProvider: TabsItemsProvider = {}
     bindTabItem(tabsItemsProvider)
 
@@ -68,6 +73,7 @@ export default defineComponent({
       swipe,
       n,
       handleSwipeChange,
+      getSwipe,
     }
   },
 })

diff --git a/packages/varlet-ui/src/tabs-items/docs/zh-CN.md b/packages/varlet-ui/src/tabs-items/docs/zh-CN.md
@@ -12,4 +12,10 @@
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
-| `default` | 视图组的内容 | `-` |
+| `default` | 视图组的内容 | `-` |
+
+### 方法
+
+| 方法名     | 说明              | 参数 | 返回值 |
+| ---------- |-----------------| ---- | ------ |
+| `getSwipe` | 获取 `swipe` 组件实例 | `-`  | `-`    |
diff --git a/packages/varlet-ui/src/tabs/docs/en-US.md b/packages/varlet-ui/src/tabs/docs/en-US.md
@@ -4,7 +4,6 @@
 
 Use `Tabs, Tab` to switch between tabbed groups and Use `TabsItems`, `TabItem` to achieve view linkage with Tabs.
 
-
 ### Basic Usage
 
 ```html
@@ -175,7 +174,7 @@ const active = ref(0)
 </script>
 
 <template>
- <var-tabs
+  <var-tabs
     class="tabs-example-vertical"
     elevation
     layout-direction="vertical"
@@ -222,23 +221,14 @@ const active = ref(0)
 
   <var-tabs-items v-model:active="active">
     <var-tab-item>
-      The way she came into the place.
-      I knew right then and there.
-      there was something different about this girl.
+      The way she came into the place. I knew right then and there. there was something different about this girl.
     </var-tab-item>
     <var-tab-item>
-      The girl was persuasive.
-      the girl I could not trust.
-      The girl was bad.
-      the girl was dangerous.
-      I never know.
+      The girl was persuasive. the girl I could not trust. The girl was bad. the girl was dangerous. I never know.
     </var-tab-item>
     <var-tab-item>
-      She's so dangerous.
-      the girl is so dangerous.
-      Take away my money, throw away my time.
-      You can call me honey.
-      but you're no damn good for me.
+      She's so dangerous. the girl is so dangerous. Take away my money, throw away my time. You can call me honey. but
+      you're no damn good for me.
     </var-tab-item>
   </var-tabs-items>
 </template>
@@ -283,113 +273,121 @@ const active = ref(0)
 
 #### Tabs Props
 
-| Prop | Description | Type | Default |
-| --- | --- | --- | --- |
-| `v-model:active` | The `active` tab identifier matches `name` first, followed by `index` | _string_ | `index` |
-| `layout-direction` | The layout direction of the tabs, optional value of `horizontal` `vertical` | _string_ | `horizontal` |
-| `item-direction` | The layout direction of the tab, optional value of `horizontal` `vertical` | _string_ | `horizontal` |
-| `fixed-bottom` | Whether fixed to the bottom of the window, can be used for bottom navigation | _boolean_ | `false` |
-| `color` | The background color of the tabs | _string_ | `#fff` |
-| `active-color` | The primary color that the tab is activates | _string_ | `#2979ff` |
-| `inactive-color` | The primary color that the tab is not activated | _string_ | `#646566` |
-| `disabled-color` | The primary color that the tab is disabled | _string_ | `#e0e0e0` |
-| `indicator-color` | The tab activates the color of the indicator | _string_ | `#2979ff` |
-| `indicator-size` | Tab activates the size of the indicator | _string \| number_ | `2px` |
-| `elevation` | Whether to enable shadows | _boolean_ | `false` |
-| `sticky` | Whether to enable sticky layouts | _boolean_ | `false` |
-| `safe-area` | Whether to enable bottom safe area adaptation | _boolean_ | `false` |
-| `offset-top` | Distance offset top | _string \| number_ | `0` |
+| Prop               | Description                                                                  | Type               | Default      |
+| ------------------ | ---------------------------------------------------------------------------- | ------------------ | ------------ |
+| `v-model:active`   | The `active` tab identifier matches `name` first, followed by `index`        | _string_           | `index`      |
+| `layout-direction` | The layout direction of the tabs, optional value of `horizontal` `vertical`  | _string_           | `horizontal` |
+| `item-direction`   | The layout direction of the tab, optional value of `horizontal` `vertical`   | _string_           | `horizontal` |
+| `fixed-bottom`     | Whether fixed to the bottom of the window, can be used for bottom navigation | _boolean_          | `false`      |
+| `color`            | The background color of the tabs                                             | _string_           | `#fff`       |
+| `active-color`     | The primary color that the tab is activates                                  | _string_           | `#2979ff`    |
+| `inactive-color`   | The primary color that the tab is not activated                              | _string_           | `#646566`    |
+| `disabled-color`   | The primary color that the tab is disabled                                   | _string_           | `#e0e0e0`    |
+| `indicator-color`  | The tab activates the color of the indicator                                 | _string_           | `#2979ff`    |
+| `indicator-size`   | Tab activates the size of the indicator                                      | _string \| number_ | `2px`        |
+| `elevation`        | Whether to enable shadows                                                    | _boolean_          | `false`      |
+| `sticky`           | Whether to enable sticky layouts                                             | _boolean_          | `false`      |
+| `safe-area`        | Whether to enable bottom safe area adaptation                                | _boolean_          | `false`      |
+| `offset-top`       | Distance offset top                                                          | _string \| number_ | `0`          |
 
 #### Tab Props
 
-| Prop | Description | Type | Default |
-| --- | --- | --- | --- |
-| `name` | tab's name | _string \| number_ | `index` |
-| `disabled` | Whether to disable tab | _boolean_ | `false` |
+| Prop       | Description            | Type               | Default |
+| ---------- | ---------------------- | ------------------ | ------- |
+| `name`     | tab's name             | _string \| number_ | `index` |
+| `disabled` | Whether to disable tab | _boolean_          | `false` |
 
 #### TabsItems Props
 
-| Prop | Description | Type | Default |
-| --- | --- | --- | --- |
-| `v-model:active` | The identity of the active tab | _string \| number_ | `-` |
-| `can-swipe` | Whether to allow swipe switch | _boolean_ | `true` |
-| `loop` | Whether to allow cycle switching | _boolean_ | `false` |
+| Prop             | Description                      | Type               | Default |
+| ---------------- | -------------------------------- | ------------------ | ------- |
+| `v-model:active` | The identity of the active tab   | _string \| number_ | `-`     |
+| `can-swipe`      | Whether to allow swipe switch    | _boolean_          | `true`  |
+| `loop`           | Whether to allow cycle switching | _boolean_          | `false` |
 
 #### TabItem Props
 
-| Prop | Description | Type | Default |
-| --- | --- | --- | --- |
+| Prop   | Description | Type               | Default |
+| ------ | ----------- | ------------------ | ------- |
 | `name` | view's name | _string \| number_ | `index` |
 
 ### Methods
 
-| Method | Description | Arguments | Return |
-| --- | --- | --- | --- |
-| `resize` | You can call this method to redraw when a tabs changes position size | `-` | `-` |
+#### Tabs Methods
+
+| Method   | Description                                                          | Arguments | Return |
+| -------- | -------------------------------------------------------------------- | --------- | ------ |
+| `resize` | You can call this method to redraw when a tabs changes position size | `-`       | `-`    |
+
+#### TabsItems Methods
+
+| Method     | Description                        | Arguments | Return |
+| ---------- | ---------------------------------- | --------- | ------ |
+| `getSwipe` | Get the `swipe` component instance | `-`       | `-`    |
 
 ### Events
 
 #### Tabs Events
 
-| Event | Description | Arguments |
-| --- | --- | --- |
-| `click` | Triggered when the tab is clicked, but not when the tab `disabled` status is `true` | `active: string \| number` |
-| `change` | Triggered when switching tab | `active: string \| number` |
+| Event    | Description                                                                         | Arguments                  |
+| -------- | ----------------------------------------------------------------------------------- | -------------------------- |
+| `click`  | Triggered when the tab is clicked, but not when the tab `disabled` status is `true` | `active: string \| number` |
+| `change` | Triggered when switching tab                                                        | `active: string \| number` |
 
 #### Tab Events
 
-| Event | Description | Arguments |
-| --- | --- | --- |
+| Event   | Description                                                                         | Arguments                                      |
+| ------- | ----------------------------------------------------------------------------------- | ---------------------------------------------- |
 | `click` | Triggered when the tab is clicked, but not when the tab `disabled` status is `true` | `active: string \| number` <br> `event: Event` |
 
 ### Slots
 
 #### Tabs Slots
 
-| Slot | Description | Arguments |
-| --- | --- | --- |
-| `default` | tabs content | `-` |
+| Slot      | Description  | Arguments |
+| --------- | ------------ | --------- |
+| `default` | tabs content | `-`       |
 
 #### Tab Slots
 
-| Slot | Description | Arguments |
-| --- | --- | --- |
-| `default` | tab's content | `-` |
+| Slot      | Description   | Arguments |
+| --------- | ------------- | --------- |
+| `default` | tab's content | `-`       |
 
 #### TabsItems Slots
 
-| Slot | Description | Arguments |
-| --- | --- | --- |
-| `default` | TabsItems content | `-` |
+| Slot      | Description       | Arguments |
+| --------- | ----------------- | --------- |
+| `default` | TabsItems content | `-`       |
 
 #### TabItem Slots
 
-| Slot | Description | Arguments |
-| --- | --- | --- |
-| `default` | tabItem's content | `-` |
+| Slot      | Description       | Arguments |
+| --------- | ----------------- | --------- |
+| `default` | tabItem's content | `-`       |
 
 ### Style Variables
 
 Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
 
 #### Tabs Variables
 
-| Variable | Default |
-| --- | --- |
-| `--tabs-item-horizontal-height` | `44px` |
-| `--tabs-item-vertical-height` | `66px` |
-| `--tabs-radius` | `2px` |
-| `--tabs-padding` | `12px` |
-| `--tabs-indicator-size` | `2px` |
-| `--tabs-indicator-background` | `var(--color-primary)` |
-| `--tabs-background` | `#fff` |
+| Variable                        | Default                |
+| ------------------------------- | ---------------------- |
+| `--tabs-item-horizontal-height` | `44px`                 |
+| `--tabs-item-vertical-height`   | `66px`                 |
+| `--tabs-radius`                 | `2px`                  |
+| `--tabs-padding`                | `12px`                 |
+| `--tabs-indicator-size`         | `2px`                  |
+| `--tabs-indicator-background`   | `var(--color-primary)` |
+| `--tabs-background`             | `#fff`                 |
 
 #### Tab Variables
 
-| Variable | Default |
-| --- | --- |
-| `--tab-padding` | `12px` |
-| `--tab-active-color` | `var(--color-primary)` |
-| `--tab-inactive-color` | `#646566` |
+| Variable               | Default                      |
+| ---------------------- | ---------------------------- |
+| `--tab-padding`        | `12px`                       |
+| `--tab-active-color`   | `var(--color-primary)`       |
+| `--tab-inactive-color` | `#646566`                    |
 | `--tab-disabled-color` | `var(--color-text-disabled)` |
-| `--tab-font-size` | `var(--font-size-md)` |
+| `--tab-font-size`      | `var(--font-size-md)`        |