@opentiny/vue-docs 3.19.3 → 3.19.4

package/demos/pc/app/user/nodata-text.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy-all-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy-all.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/text-field-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/text-field.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/user-options-composition-api.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/user-options.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -23,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/user-select-size-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -17,6 +17,9 @@ const user = ref('421000103624183')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/user-select-size.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -25,6 +25,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-field-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-split-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-split.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/virtual-tree/basic-usage-composition-api.vue

@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>

package/demos/pc/app/virtual-tree/basic-usage.vue

@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.3",
+  "version": "3.19.4",
   "license": "MIT",
   "dependencies": {
     "@opentiny/vue-repl": "^1.1.2",
@@ -16,19 +16,19 @@
     "vue": "^3.4.31",
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
-    "@opentiny/vue-common": "~3.19.0",
     "@opentiny/vue": "~3.19.0",
-    "@opentiny/vue-design-aurora": "~3.19.0",
+    "@opentiny/vue-common": "~3.19.0",
     "@opentiny/vue-design-saas": "~3.19.0",
+    "@opentiny/vue-directive": "~3.19.0",
+    "@opentiny/vue-hooks": "~3.19.0",
+    "@opentiny/vue-design-aurora": "~3.19.0",
     "@opentiny/vue-icon": "~3.19.0",
     "@opentiny/vue-icon-multicolor": "~3.19.0",
-    "@opentiny/vue-directive": "~3.19.0",
     "@opentiny/vue-icon-saas": "~3.19.0",
+    "@opentiny/vue-theme": "~3.19.4",
+    "@opentiny/vue-theme-mobile": "~3.19.0",
     "@opentiny/vue-theme-saas": "~3.19.0",
-    "@opentiny/vue-theme": "~3.19.3",
-    "@opentiny/vue-vite-import": "~1.2.0",
-    "@opentiny/vue-hooks": "~3.19.0",
-    "@opentiny/vue-theme-mobile": "~3.19.0"
+    "@opentiny/vue-vite-import": "~1.2.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.42.0",

package/playground/App.vue

@@ -72,9 +72,8 @@ const createImportMap = (version) => {
     'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
   }
   if (['aurora', 'saas'].includes(tinyTheme)) {
-    imports[
-      `@opentiny/vue-design-${tinyTheme}`
-    ] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
+    imports[`@opentiny/vue-design-${tinyTheme}`] =
+      `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
   }
   if (isSaas) {
     imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`

package/public/static/css/design-common.css

@@ -553,3 +553,268 @@
     height: 3.33333333vw;
   }
 }
+
+.tinyui-design-footer {
+  font-size: 16px;
+  color: #2c2e30;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+.tinyui-design-footer .footer-content {
+  display: flex;
+  margin: 0 auto;
+  padding: 10vh 0 6.8vh;
+  justify-content: center;
+  width: 70%;
+  box-sizing: border-box;
+}
+.tinyui-design-footer .footer-content .contact {
+  width: fit-content;
+}
+.tinyui-design-footer .footer-content .contact .group-code {
+  margin: 30px 0;
+}
+.tinyui-design-footer .footer-content .contact .group-code > img {
+  width: 150px;
+  border: solid 0.55vw #f2f6f9;
+}
+.tinyui-design-footer .footer-content .links {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  justify-content: space-between;
+  flex: 1 1 auto;
+}
+.tinyui-design-footer .footer-content .links .link-item .list-item {
+  width: 100%;
+  display: block;
+  text-decoration: none;
+  color: #2c2e30;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tinyui-design-footer .footer-content .links .link-item .list-item:hover {
+  color: #2f5bea;
+}
+.tinyui-design-footer .footer-text-list {
+  font-size: 14px;
+  line-height: 39px;
+  white-space: nowrap;
+}
+.tinyui-design-footer .footer-title {
+  display: inline-block;
+  height: 22px;
+  line-height: 22px;
+  margin-left: 3px;
+  font-size: 16px;
+  font-weight: 600;
+  vertical-align: middle;
+}
+.tinyui-design-footer .footer-title-container {
+  margin-bottom: 17px;
+}
+.tinyui-design-footer .copyright {
+  height: 86px;
+  line-height: 1.8;
+  text-align: center;
+  font-size: 14px;
+  color: #fff;
+  background-color: #3e4345;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.tinyui-design-footer .copyright p {
+  margin: 0;
+}
+.footer-logo-container {
+  position: relative;
+  padding-right: 4.7%;
+  margin-right: 4.7%;
+  box-sizing: border-box;
+}
+.footer-logo-container::after {
+  content: '';
+  position: absolute;
+  display: block;
+  height: 135px;
+  border-right: 1px solid #979797;
+  opacity: 0.28;
+  top: 60px;
+  right: 0;
+}
+.footer-promotional-container {
+  margin: 10px 0;
+  padding-left: 1.05vw;
+}
+.footer-logo-link {
+  display: inline-block;
+  text-decoration: none;
+  cursor: pointer;
+  height: 38px;
+}
+.footer-logo-link-list {
+  height: 26px;
+  margin-right: 30px;
+}
+.footer-logo-link-list:last-child {
+  margin-right: 0;
+}
+.footer-logo-link-list img {
+  height: 100%;
+}
+.footer-promotional-label {
+  font-size: 14px;
+  height: 40px;
+  line-height: 40px;
+  white-space: nowrap;
+}
+.footer-logo-title {
+  display: inline-block;
+  height: 38px;
+  font-size: 21px;
+  font-weight: 700;
+  color: #242424;
+  margin-left: 0.53vw;
+}
+.footer-logo {
+  vertical-align: middle;
+  width: 53px;
+}
+.footer-logo-s {
+  vertical-align: middle;
+  width: 16px;
+}
+.footer-logolist-container {
+  margin-top: 10px;
+}
+.footer-logo-list {
+  margin-right: 1.46vw;
+}
+.icon-arrow {
+  display: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  transform: rotate(0deg);
+  transition: all 0.3s ease-out;
+  transform-origin: center center;
+  background: url(assets/icon-arrow.png) no-repeat;
+  background-size: 100% 100%;
+}
+@media screen and (max-width: 1339px) {
+  .tinyui-design-footer .footer-content {
+    width: 84%;
+  }
+  .tinyui-design-footer .footer-content .contact .group-code > img {
+    width: 85px;
+  }
+}
+@media screen and (max-width: 1279px) {
+  .tinyui-design-footer .footer-content {
+    width: 96%;
+  }
+  .tinyui-design-footer .footer-logo-container {
+    padding-right: 2%;
+    margin-right: 2%;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .tinyui-design-footer .footer-logo-container {
+    display: flex;
+    padding-right: 0;
+    margin-right: 0;
+    margin-bottom: 20px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 40px;
+    border-bottom: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .footer-logo-container::after {
+    display: none;
+  }
+  .tinyui-design-footer .footer-logo-container .footer-logolist-container {
+    padding-left: 0;
+  }
+  .tinyui-design-footer .footer-logo-container .footer-promotional-container {
+    padding: 0;
+    margin-left: 0;
+    width: 100%;
+    text-align: center;
+  }
+  .tinyui-design-footer .footer-content {
+    flex-direction: column;
+    width: 100%;
+    padding: 50px 30px 20px;
+  }
+  .tinyui-design-footer .footer-content .links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .tinyui-design-footer .footer-content .links .link-item {
+    text-align: center;
+    width: 100%;
+    border-bottom: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .footer-content .links .link-item .list-item {
+    width: 100%;
+  }
+  .tinyui-design-footer .footer-content .links .link-item div {
+    width: 100%;
+    text-align: left;
+  }
+  .tinyui-design-footer .footer-content .contact {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .tinyui-design-footer .footer-content .contact .group-code {
+    margin-left: 0;
+    margin: 30px auto 12px;
+  }
+  .tinyui-design-footer .footer-content .contact .footer-logo-s {
+    display: none;
+  }
+  .tinyui-design-footer .footer-content .contact .footer-title {
+    font-size: 16px;
+    color: #2c2e30;
+    line-height: 22px;
+  }
+  .tinyui-design-footer .footer-content .footer-text-list {
+    padding-left: 23px;
+    height: 0;
+    overflow: hidden;
+    transition: all 0.5s ease-out;
+  }
+  .tinyui-design-footer .footer-content .footer-text-list.current {
+    height: fit-content;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container {
+    margin: 19px 0;
+    position: relative;
+    text-align: left;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container .icon-arrow {
+    display: block;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container.current .icon-arrow {
+    transform: rotate(180deg);
+  }
+  .tinyui-design-footer .copyright {
+    background: transparent;
+    border-top: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .copyright p {
+    font-size: 12px;
+    text-align: center;
+    color: #2c2e30;
+    line-height: 21px;
+    margin: 0;
+  }
+}

package/public/static/images/footer/cli.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <g id="logo-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-2" transform="translate(-1329.000000, -159.000000)">
+            <g id="编组-10" transform="translate(1329.000000, 159.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组备份" transform="translate(8.508089, 6.782504)">
+                    <polygon id="路径" fill="#FFFFFF" points="11.4919113 0 18.2721326 3.91330138 9.86688013 8.77230087 9.8738316 8.78433712 6.80512257 10.5554917 6.80512257 15.9762015 11.5011123 18.6865564 14.5641738 16.9186486 14.5731456 16.93418 22.9838048 12.0720729 22.9838226 19.8981426 11.4919113 26.5308568 0 19.8981426 0 6.6327142"></polygon>
+                    <polygon id="路径" fill="#A0B3F1" points="11.5011123 18.6865564 22.9225159 12.0615019 22.9225338 19.8875716 11.4919113 26.5308568"></polygon>
+                    <polygon id="路径" fill="#BFCCF6" points="6.80512257 15.9762015 11.5011123 18.6865564 11.4919113 26.5308568 0 19.8981426"></polygon>
+                    <polygon id="路径" fill="#DFE5FA" points="11.4919113 0 18.2721326 3.91330138 11.4966193 7.83016359"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/public/static/images/footer/footer-title-community.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-953.000000, -4115.000000)" fill="#2C2E30" fill-rule="nonzero">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="2" transform="translate(953.000000, 120.000000)">
+                    <path d="M15.3469388,7.88382687 C14.9478458,6.93621867 14.3673469,6.06150342 13.6417233,5.33257404 L13.5328798,5.22323462 C12.0453515,3.80182232 10.0498866,3 7.98185941,3 C5.84126984,3 3.84580499,3.8382688 2.32199547,5.33257404 L2.32199547,5.3690205 C0.834467124,6.89977221 0,8.90432802 0,11.0182232 C0,11.8929385 0.145124718,12.6947608 0.39909297,13.4965831 C0.653061223,14.2255125 0.979591842,14.9179954 1.41496598,15.5740319 L1.48752835,15.6469248 L1.48752835,18.7084282 C1.48752835,18.8542141 1.63265307,19 1.77777778,19 L7.98185941,19 C9.07029479,19 10.0861678,18.7813212 11.1020408,18.38041 C12.0453515,17.9794989 12.9160998,17.3963554 13.6417233,16.667426 L13.7505669,16.5580866 C15.2018141,15.0637813 16,13.095672 16,10.9817768 C15.9637188,9.92482916 15.7460317,8.90432802 15.3469388,7.88382687 Z M10.8480726,12.2938497 L7.98185941,15.0637813 C7.94557822,15.1002278 7.87301587,15.1366743 7.80045351,15.1366743 C7.72789114,15.1366743 7.69160997,15.1002278 7.61904762,15.0637813 L4.78911564,12.3302961 L4.75283446,12.2938497 C4.06349206,11.6013667 3.88208617,10.7266515 4.20861677,9.88838268 C4.57142856,8.97722095 5.47845804,8.35763098 6.42176871,8.35763098 C6.85714286,8.35763098 7.292517,8.50341686 7.69160997,8.75854214 L7.76417234,8.79498862 L7.83673469,8.75854214 C8.23582766,8.50341686 8.67120181,8.35763098 9.10657597,8.35763098 C10.0498866,8.35763098 10.9569161,8.97722095 11.3197279,9.88838268 C11.7188209,10.7266515 11.537415,11.6013667 10.8480726,12.2938497 L10.8480726,12.2938497 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>