@opentiny/vue-docs 1.0.0 → 1.0.2

package/package.json

@@ -1,55 +1,12 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
-  "files": [
-    "resources"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "sortablejs": "1.15.0",
-    "@opentiny/vue": "~3.7.0",
-    "@opentiny/vue-common": "~3.7.0",
-    "@opentiny/vue-theme-mobile": "~3.7.0",
-    "@opentiny/vue-icon": "~3.7.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.29.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^2.1.0",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/runtime-core": "^3.2.31",
-    "@vue/runtime-dom": "^3.2.31",
-    "@vue/shared": "^3.2.31",
-    "postcss": "^8.4.16",
-    "vite": "^4.0.2",
-    "vite-plugin-dynamic-import": "^1.2.4",
-    "vite-plugin-importer": "^0.2.5",
-    "vite-plugin-importus": "^1.0.4",
-    "vite-plugin-inspect": "^0.7.11",
-    "vite-plugin-static-copy": "0.12.0",
-    "vite-svg-loader": "^3.6.0",
-    "vue": "^3.2.21",
-    "monaco-editor": "^0.34.1",
-    "monaco-editor-core": "^0.34.1",
-    "monaco-volar": "0.0.6",
-    "onigasm": "^2.2.5",
-    "unocss": "^0.48.0",
-    "@unocss/core": "^0.48.0",
-    "@unocss/preset-icons": "^0.48.0",
-    "@unocss/transformer-directives": "^0.48.0",
-    "@opentiny-internal/unplugin-virtual-template": "0.1.1-beta.0"
-  },
-  "scripts": {
-    "docs:build": "vuepress build",
-    "docs:clean-dev": "vuepress dev --clean-cache",
-    "docs:dev": "vuepress dev"
-  }
-}
+  "files": [
+    "resources"
+  ]
+}

package/resources/mobile/app/alert/custom-close.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="alert-wrap">
     <tiny-alert>默认关闭按钮</tiny-alert>
-    <tiny-alert :closable="false">不可关闭</tiny-alert>
-    <tiny-alert close-text="关闭">自定义关闭按钮为文本</tiny-alert>
-    <tiny-alert @close="close">关闭时触发回调</tiny-alert>
+    <tiny-alert :closable="false">
+      不可关闭
+    </tiny-alert>
+    <tiny-alert close-text="关闭">
+      自定义关闭按钮为文本
+    </tiny-alert>
+    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
   </div>
 </template>
 

package/resources/mobile-first/app/action-sheet/action.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div>
+      <tiny-button type="primary" @click="boxVisibility = true">
+        显示提示语
+      </tiny-button>
+      <tiny-button type="primary" style="margin-left: 20px;" @click="boxVisibility2 = true">
+        不显示提示语
+      </tiny-button>
+    </div>
+
+    <tiny-action-sheet title="显示提示语" type="action" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event" @click="selectOption" @close="close"></tiny-action-sheet>
+
+    <tiny-action-sheet type="action" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event" @click="selectOption" @close="close"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false,
+      boxVisibility2: false,
+      menus: ['转交', '征询', '撤回']
+    }
+  },
+  methods: {
+    selectOption(option, index) {
+      Modal.message(`选择了第${index + 1}项 [${option}]`)
+    },
+    close() {
+      Modal.message('点击取消了')
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/action-sheet/basic-usage.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary">
+      动作面板
+    </tiny-button>
+    <tiny-action-sheet title="标题" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/action-sheet/ellipsis.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div>
+      <p>单选，值：{{ activeName1 }}</p>
+      <tiny-button @click=";(ellipsis = true), (boxVisibility1 = true)">内容超出隐藏</tiny-button>
+      <tiny-button @click=";(ellipsis = false), (boxVisibility1 = true)">内容超出显示</tiny-button>
+    </div>
+    <br />
+    <div>
+      <p>多选，值：{{ activeName2 }}</p>
+      <tiny-button @click=";(ellipsis = true), (boxVisibility2 = true)">内容超出隐藏</tiny-button>
+      <tiny-button @click=";(ellipsis = false), (boxVisibility2 = true)">内容超出显示</tiny-button>
+    </div>
+
+    <tiny-action-sheet
+      v-model="activeName1"
+      title="标题1"
+      :ellipsis="ellipsis"
+      :search-config="searchConfig"
+      :show-footer="true"
+      :menus="menus"
+      :visible="boxVisibility1"
+      @update:visible="boxVisibility1 = $event"
+    ></tiny-action-sheet>
+    <tiny-action-sheet
+      v-model="activeName2"
+      title="标题2"
+      multiple
+      :ellipsis="ellipsis"
+      :search-config="searchConfig"
+      :show-footer="true"
+      :menus="menus"
+      :visible="boxVisibility2"
+      @update:visible="boxVisibility2 = $event"
+    ></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    const list = [
+      {
+        id: 1,
+        label: '进行中'
+      },
+      {
+        id: 2,
+        label: '未开始'
+      },
+      {
+        id: 3,
+        label: '已完成'
+      },
+      {
+        id: 4,
+        label:
+          '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
+      }
+    ]
+
+    return {
+      activeName1: 1,
+      activeName2: [],
+      ellipsis: false,
+      boxVisibility1: false,
+      boxVisibility2: false,
+      searchConfig: {
+        options: list
+      },
+      menus: list
+    }
+  },
+  methods: {}
+}
+</script>

package/resources/mobile-first/app/action-sheet/mask-event.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary" style="max-width:200px">
+      单击遮罩层不关闭弹窗
+    </tiny-button>
+    <tiny-action-sheet title="标题" :mask-closable="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/action-sheet/mask.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary">
+      关闭遮罩层
+    </tiny-button>
+    <tiny-action-sheet title="标题" :mask="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/action-sheet/multiple.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div>
+      <tiny-button @click="boxVisibility1 = true">
+        单选
+      </tiny-button>
+      <p>值：{{ activeName1 }}</p>
+    </div>
+    <br />
+    <div>
+      <tiny-button @click="boxVisibility2 = true">
+        多选
+      </tiny-button>
+      <p>值：{{ activeName2 }}</p>
+    </div>
+
+    <tiny-action-sheet v-model="activeName1" title="标题1" :search-config="searchConfig" :menus="menus" :visible="boxVisibility1" @update:visible="boxVisibility1 = $event"></tiny-action-sheet>
+    <tiny-action-sheet v-model="activeName2" title="标题2" multiple :search-config="searchConfig" :show-footer="true" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    const list = [
+      {
+        id: 1,
+        label: '进行中'
+      },
+      {
+        id: 2,
+        label: '未开始'
+      },
+      {
+        id: 3,
+        label: '已完成'
+      },
+      {
+        id: 4,
+        label:
+          '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
+      }
+    ]
+
+    return {
+      activeName1: 1,
+      activeName2: [],
+      boxVisibility1: false,
+      boxVisibility2: false,
+      searchConfig: {
+        options: list
+      },
+      menus: list
+    }
+  },
+  methods: {}
+}
+</script>

package/resources/mobile-first/app/action-sheet/show.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <span>
+      <tiny-button @click="boxVisibility4 = true">默认属性配置</tiny-button>
+      <tiny-action-sheet v-model="activeName" :menus="menus" :visible="boxVisibility4" @update:visible="boxVisibility4 = $event"></tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility1 = true">隐藏头部</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :show-header="false" :menus="menus" :visible="boxVisibility1" @update:visible="boxVisibility1 = $event"></tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility2 = true">显示底部</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :show-footer="true" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event"></tiny-action-sheet>
+    </span>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: 1,
+      boxVisibility1: false,
+      boxVisibility2: false,
+      boxVisibility3: false,
+      boxVisibility4: false,
+      boxVisibility5: false,
+      boxVisibility6: false,
+      menus: [
+        {
+          id: 1,
+          label: '进行中'
+        },
+        {
+          id: 2,
+          label: '未开始'
+        },
+        {
+          id: 3,
+          label: '已完成'
+        },
+        {
+          id: 4,
+          label: '已过期已过期已过期已过期已过期已过期已过期'
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>

package/resources/mobile-first/app/action-sheet/slot.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <span>
+      <tiny-button @click="boxVisibility3 = true">头部左侧插槽</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility3" @update:visible="boxVisibility3 = $event">
+        <template #header-left>
+          <div @click="activeName = ''">清空</div>
+        </template>
+      </tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility4 = true">头部右侧插槽</tiny-button>
+      <tiny-action-sheet ref="actionSheet4" v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility4" @update:visible="boxVisibility4 = $event">
+        <template #header-right>
+          <div @click="$refs.actionSheet4.close()">自定义关闭</div>
+        </template>
+      </tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility5 = true">内容插槽</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility5" @update:visible="boxVisibility5 = $event">
+        <div class="text-center">
+          <div>选项1</div>
+          <div>选项2</div>
+          <div>选项3</div>
+          <div>选项4</div>
+        </div>
+      </tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility6 = true">底部插槽</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :show-footer="true" :menus="menus" :visible="boxVisibility6" @update:visible="boxVisibility6 = $event">
+        <template #footer>
+          <tiny-button>自定义按钮1</tiny-button> &nbsp;&nbsp; <tiny-button>自定义按钮2</tiny-button>
+        </template>
+      </tiny-action-sheet>
+    </span>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: 1,
+      boxVisibility1: false,
+      boxVisibility2: false,
+      boxVisibility3: false,
+      boxVisibility4: false,
+      boxVisibility5: false,
+      boxVisibility6: false,
+      menus: [
+        {
+          id: 1,
+          label: '进行中'
+        },
+        {
+          id: 2,
+          label: '未开始'
+        },
+        {
+          id: 3,
+          label: '已完成'
+        },
+        {
+          id: 4,
+          label: '已过期已过期已过期已过期已过期已过期已过期'
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>

package/resources/mobile-first/app/alert/base.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <tiny-alert description="type 为默认值 info"></tiny-alert>
+    <tiny-alert type="error" description="type 为 error"></tiny-alert>
+    <tiny-alert type="success" description="type 为 success"></tiny-alert>
+    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+    <tiny-alert type="warning" single-line scrolling description="single-line 开启单行，scrolling 开启滚动，通过属性 close-text 自定义关闭按钮文本，通过 center 属性可使文字显示居中,通过 type 设置不同的类型。可选值：success、warning、info、error，默认值：info "></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>

package/resources/mobile-first/app/alert/center.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-alert center description="文字居中"></tiny-alert>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>

package/resources/mobile-first/app/alert/closable.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <tiny-alert description="closable 默认值为 true"></tiny-alert>
+    <tiny-alert :closable="false" description="closable 设置为 false"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>

package/resources/mobile-first/app/alert/close-text.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-alert description="默认关闭按钮"></tiny-alert>
+    <tiny-alert description="关闭按钮自定义文本" close-text="关闭" @close="close"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+import { alert } from '@opentiny/vue-modal'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  methods: {
+    close() {
+      alert('关闭了')
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/alert/close.vue

@@ -0,0 +1,18 @@
+<template>
+  <tiny-alert description="自定义的 close 事件" @close="close"></tiny-alert>
+</template>
+
+<script>
+import { Alert, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  methods: {
+    close() {
+      Modal.message('关闭了')
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/alert/custom-description.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <tiny-alert size="large" description="size 为 large 时根据 description 属性自定义内容"></tiny-alert>
+    <br />
+    <tiny-alert size="large">
+      <template #description> size 为 large 时根据 description slot 自定义内容 </template>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>

package/resources/mobile-first/app/alert/feedback-of-result.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
+      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini">取消操作</tiny-button>
+    </tiny-alert>
+    <br />
+    <tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
+    <br />
+    <tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
+      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini">取消操作</tiny-button>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert,
+    TinyButton: Button
+  }
+}
+</script>

package/resources/mobile-first/app/alert/icon.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-alert :icon="IconBoat" description="自定义图标"></tiny-alert>
+    <tiny-alert description="默认图标"></tiny-alert>
+    <tiny-alert type="success" description="type 为 success 的默认图标"></tiny-alert>
+    <tiny-alert type="warning" description="type 为 warning 的默认图标"></tiny-alert>
+    <tiny-alert type="error" description="type 为 error 的默认图标"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+import { IconBoat } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  data() {
+    return {
+      IconBoat: IconBoat()
+    }
+  }
+}
+</script>