@utogether/udp-core 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/udp/index.ts

@@ -1,6 +1,6 @@
-import UtGrid2 from './grid/index.vue';
-import UtForm2 from './form/form.vue';
-import UtContent2 from './content/index.vue';
-import FormUpload2 from './form-upload/form-upload.vue';
-
-export { UtGrid2, UtForm2, UtContent2, FormUpload2 };
+import UtGrid2 from './grid/index.vue';
+import UtForm2 from './form/form.vue';
+import UtContent2 from './content/index.vue';
+import FormUpload2 from './form-upload/form-upload.vue';
+
+export { UtGrid2, UtForm2, UtContent2, FormUpload2 };

package/src/components/udp/ut-stamp-badge/index.vue

@@ -1,271 +1,271 @@
-<template>
-  <div
-    class="first-ring"
-    v-bind="getBindValue"
-    :class="getStampBadgeClass"
-    style="position: absolute"
-    :style="{ transform: `rotate(${rotate}deg)`, top: `${top}px`, right: `${right}px` }"
-  >
-    <div class="second-ring" :class="getStampBadgeClass">
-      <div class="third-ring" :class="getStampBadgeClass">
-        <div class="forth-ring" :class="getStampBadgeClass">
-          <div class="content-rectangle ellipsis" :class="getStampBadgeClass">
-            <span class="">{{ getContent(content) }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { storageLocal } from '@utogether/utils';
-export default {
-  name: 'UTStampBadge',
-  props: {
-    color: {
-      type: String,
-      default: 'primary',
-      validator: v => ['primary', 'error', 'warning', 'success', 'info'].includes(v)
-    },
-    /**
-     * stamp badge size.
-     * @default: middle
-     */
-    size: {
-      type: String,
-      default: 'large',
-      validator: v => ['large', 'middle', 'small'].includes(v)
-    },
-    /**
-     * stamp badge rotate deg.
-     * @default: 0
-     */
-    rotate: { type: Number, default: 45 },
-    top: { type: Number, default: 60 },
-    right: { type: Number, default: 40 },
-    content: { type: String, default: 'Unknown' },
-    code: { type: String, default: '' }
-  },
-  computed: {
-    getStampBadgeClass() {
-      const { color, size } = this.$props;
-      return [
-        {
-          [`stamp-badge-${color}`]: !!color,
-          [`stamp-badge-${size}`]: !!size
-        }
-      ];
-    },
-    getBindValue() {
-      return { ...this.$attrs, ...this.$props };
-    }
-  },
-  methods: {
-    getContent(content) {
-      if (!content) return content;
-      if (this.code) {
-        const dict = storageLocal.getItem('kLov')[this.code];
-        const data = dict.children.find(f => f.dictCode === this.content);
-        return data ? data.dictName : content;
-      }
-      return content;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.first-ring {
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100px;
-}
-
-.second-ring {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-  border-radius: 100px;
-}
-
-.third-ring {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100px;
-}
-
-.forth-ring {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-  border-radius: 100px;
-}
-
-.content-rectangle {
-  position: absolute;
-  font-weight: bold;
-  text-align: center;
-  background: #fff;
-}
-
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// primary
-.stamp-badge-primary.first-ring {
-  background: #1890ff;
-}
-
-.stamp-badge-primary.third-ring {
-  background: #1890ff;
-}
-
-.stamp-badge-primary.content-rectangle {
-  color: #1890ff;
-  border: 1px solid #1890ff;
-}
-
-// success
-.stamp-badge-success.first-ring {
-  background: #52c41a;
-}
-
-.stamp-badge-success.third-ring {
-  background: #52c41a;
-}
-
-.stamp-badge-success.content-rectangle {
-  color: #52c41a;
-  border: 1px solid #52c41a;
-}
-
-// error
-.stamp-badge-error.first-ring {
-  background: #ff4d4f;
-}
-
-.stamp-badge-error.third-ring {
-  background: #ff4d4f;
-}
-
-.stamp-badge-error.content-rectangle {
-  color: #ff4d4f;
-  border: 1px solid #ff4d4f;
-}
-
-// warning
-.stamp-badge-warning.first-ring {
-  background: #faad14;
-}
-
-.stamp-badge-warning.third-ring {
-  background: #faad14;
-}
-
-.stamp-badge-warning.content-rectangle {
-  color: #faad14;
-  border: 1px solid #faad14;
-}
-
-// info
-.stamp-badge-info.first-ring {
-  background: #ccc;
-}
-
-.stamp-badge-info.third-ring {
-  background: #ccc;
-}
-
-.stamp-badge-info.content-rectangle {
-  color: #ccc;
-  border: 1px solid #ccc;
-}
-
-// large
-.stamp-badge-large.first-ring {
-  width: 84px;
-  height: 84px;
-}
-
-.stamp-badge-large.second-ring {
-  width: 80px;
-  height: 80px;
-}
-
-.stamp-badge-large.third-ring {
-  width: 74px;
-  height: 74px;
-}
-
-.stamp-badge-large.forth-ring {
-  width: 64px;
-  height: 64px;
-}
-
-.stamp-badge-large.content-rectangle {
-  width: 90px;
-  font-size: 1.2rem;
-}
-
-// middle
-.stamp-badge-middle.first-ring {
-  width: 64px;
-  height: 64px;
-}
-
-.stamp-badge-middle.second-ring {
-  width: 60px;
-  height: 60px;
-}
-
-.stamp-badge-middle.third-ring {
-  width: 56px;
-  height: 56px;
-}
-
-.stamp-badge-middle.forth-ring {
-  width: 48px;
-  height: 48px;
-}
-
-.stamp-badge-middle.content-rectangle {
-  width: 70px;
-  font-size: 1rem;
-}
-
-// small
-.stamp-badge-small.first-ring {
-  width: 54px;
-  height: 54px;
-}
-
-.stamp-badge-small.second-ring {
-  width: 50px;
-  height: 50px;
-}
-
-.stamp-badge-small.third-ring {
-  width: 46px;
-  height: 46px;
-}
-
-.stamp-badge-small.forth-ring {
-  width: 38px;
-  height: 38px;
-}
-
-.stamp-badge-small.content-rectangle {
-  width: 60px;
-  font-size: 0.8rem;
-}
-</style>
+<template>
+  <div
+    class="first-ring"
+    v-bind="getBindValue"
+    :class="getStampBadgeClass"
+    style="position: absolute"
+    :style="{ transform: `rotate(${rotate}deg)`, top: `${top}px`, right: `${right}px` }"
+  >
+    <div class="second-ring" :class="getStampBadgeClass">
+      <div class="third-ring" :class="getStampBadgeClass">
+        <div class="forth-ring" :class="getStampBadgeClass">
+          <div class="content-rectangle ellipsis" :class="getStampBadgeClass">
+            <span class="">{{ getContent(content) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { storageLocal } from '@utogether/utils';
+export default {
+  name: 'UTStampBadge',
+  props: {
+    color: {
+      type: String,
+      default: 'primary',
+      validator: v => ['primary', 'error', 'warning', 'success', 'info'].includes(v)
+    },
+    /**
+     * stamp badge size.
+     * @default: middle
+     */
+    size: {
+      type: String,
+      default: 'large',
+      validator: v => ['large', 'middle', 'small'].includes(v)
+    },
+    /**
+     * stamp badge rotate deg.
+     * @default: 0
+     */
+    rotate: { type: Number, default: 45 },
+    top: { type: Number, default: 60 },
+    right: { type: Number, default: 40 },
+    content: { type: String, default: 'Unknown' },
+    code: { type: String, default: '' }
+  },
+  computed: {
+    getStampBadgeClass() {
+      const { color, size } = this.$props;
+      return [
+        {
+          [`stamp-badge-${color}`]: !!color,
+          [`stamp-badge-${size}`]: !!size
+        }
+      ];
+    },
+    getBindValue() {
+      return { ...this.$attrs, ...this.$props };
+    }
+  },
+  methods: {
+    getContent(content) {
+      if (!content) return content;
+      if (this.code) {
+        const dict = storageLocal.getItem('kLov')[this.code];
+        const data = dict.children.find(f => f.dictCode === this.content);
+        return data ? data.dictName : content;
+      }
+      return content;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.first-ring {
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+}
+
+.second-ring {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 100px;
+}
+
+.third-ring {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+}
+
+.forth-ring {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 100px;
+}
+
+.content-rectangle {
+  position: absolute;
+  font-weight: bold;
+  text-align: center;
+  background: #fff;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// primary
+.stamp-badge-primary.first-ring {
+  background: #1890ff;
+}
+
+.stamp-badge-primary.third-ring {
+  background: #1890ff;
+}
+
+.stamp-badge-primary.content-rectangle {
+  color: #1890ff;
+  border: 1px solid #1890ff;
+}
+
+// success
+.stamp-badge-success.first-ring {
+  background: #52c41a;
+}
+
+.stamp-badge-success.third-ring {
+  background: #52c41a;
+}
+
+.stamp-badge-success.content-rectangle {
+  color: #52c41a;
+  border: 1px solid #52c41a;
+}
+
+// error
+.stamp-badge-error.first-ring {
+  background: #ff4d4f;
+}
+
+.stamp-badge-error.third-ring {
+  background: #ff4d4f;
+}
+
+.stamp-badge-error.content-rectangle {
+  color: #ff4d4f;
+  border: 1px solid #ff4d4f;
+}
+
+// warning
+.stamp-badge-warning.first-ring {
+  background: #faad14;
+}
+
+.stamp-badge-warning.third-ring {
+  background: #faad14;
+}
+
+.stamp-badge-warning.content-rectangle {
+  color: #faad14;
+  border: 1px solid #faad14;
+}
+
+// info
+.stamp-badge-info.first-ring {
+  background: #ccc;
+}
+
+.stamp-badge-info.third-ring {
+  background: #ccc;
+}
+
+.stamp-badge-info.content-rectangle {
+  color: #ccc;
+  border: 1px solid #ccc;
+}
+
+// large
+.stamp-badge-large.first-ring {
+  width: 84px;
+  height: 84px;
+}
+
+.stamp-badge-large.second-ring {
+  width: 80px;
+  height: 80px;
+}
+
+.stamp-badge-large.third-ring {
+  width: 74px;
+  height: 74px;
+}
+
+.stamp-badge-large.forth-ring {
+  width: 64px;
+  height: 64px;
+}
+
+.stamp-badge-large.content-rectangle {
+  width: 90px;
+  font-size: 1.2rem;
+}
+
+// middle
+.stamp-badge-middle.first-ring {
+  width: 64px;
+  height: 64px;
+}
+
+.stamp-badge-middle.second-ring {
+  width: 60px;
+  height: 60px;
+}
+
+.stamp-badge-middle.third-ring {
+  width: 56px;
+  height: 56px;
+}
+
+.stamp-badge-middle.forth-ring {
+  width: 48px;
+  height: 48px;
+}
+
+.stamp-badge-middle.content-rectangle {
+  width: 70px;
+  font-size: 1rem;
+}
+
+// small
+.stamp-badge-small.first-ring {
+  width: 54px;
+  height: 54px;
+}
+
+.stamp-badge-small.second-ring {
+  width: 50px;
+  height: 50px;
+}
+
+.stamp-badge-small.third-ring {
+  width: 46px;
+  height: 46px;
+}
+
+.stamp-badge-small.forth-ring {
+  width: 38px;
+  height: 38px;
+}
+
+.stamp-badge-small.content-rectangle {
+  width: 60px;
+  font-size: 0.8rem;
+}
+</style>