@fangzhongya/fang-ui 0.0.96 → 0.0.98

package/dist/components/uploads/src/index2.js

@@ -0,0 +1,417 @@
+import { defineComponent, ref, useAttrs, computed, reactive, createElementBlock, openBlock, mergeProps, unref, createElementVNode, createBlock, createCommentVNode, normalizeClass, Fragment, renderList, renderSlot, createVNode, withCtx, toDisplayString } from "vue";
+import Document from "../../../icons/vue/document.js";
+import Download from "../../../icons/vue/download.js";
+import Plus from "../../../icons/vue/plus.js";
+import Views from "../../../icons/vue/views.js";
+import Delete from "../../../icons/vue/delete.js";
+import { Icon } from "../../icon/index.js";
+import { Upload } from "../../upload/index.js";
+import { Message } from "../../message/index.js";
+import { Image } from "../../image/index.js";
+import { ImageViewer } from "../../image-viewer/index.js";
+import { useInherit } from "../../../hooks/inherit/index.js";
+import { useCssName } from "../../../hooks/cssname/index.js";
+import { useExpose } from "../../../hooks/expose/index.js";
+import { dataHandle, types, dataSlot, dataEmits, dataProps } from "./data.js";
+import { useLocale } from "../../../hooks/locale/index.js";
+import { getUrlCatalogueObj } from "@fangzhongya/utils/urls/getUrlCatalogueObj";
+import { downloadFromURL } from "@fangzhongya/utils/window/download";
+import { getListValue } from "../../players/common/util.js";
+const _hoisted_1 = ["title"];
+const _hoisted_2 = ["onClick", "title"];
+const _hoisted_3 = ["onClick", "title"];
+const _hoisted_4 = ["onClick", "title"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "index",
+  props: dataProps,
+  emits: dataEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const { getLocale } = useLocale();
+    const refEl = ref();
+    const elRef = ref();
+    const attrs = useInherit(useAttrs());
+    const cs = useCssName("uploads");
+    const props = __props;
+    const emit = __emit;
+    const listFuObj = dataHandle(props, emit);
+    const value = listFuObj.value;
+    const multiple = listFuObj.multiple;
+    const isloading = ref(false);
+    const accept = computed(() => {
+      if (props.accept) {
+        return props.accept;
+      } else {
+        if (props.type) {
+          const s = types[props.type];
+          if (s) {
+            return s.join(",");
+          } else if (props.type.startsWith("i")) {
+            return "image/*";
+          } else if (props.type.startsWith("a")) {
+            return "audio/*";
+          } else if (props.type.startsWith("v")) {
+            return "video/*";
+          }
+        }
+        return "";
+      }
+    });
+    const getExtension = (fileName) => {
+      const extension = fileName.toLowerCase();
+      if (extension) {
+        const ks = Object.keys(types);
+        for (let index = 0; index < ks.length; index++) {
+          const key = ks[index];
+          if (types[key].includes(extension)) {
+            return key;
+          }
+        }
+      }
+      return "";
+    };
+    const getType = (accept2 = "") => {
+      if (accept2) {
+        if (accept2.includes("image/")) {
+          return "i";
+        } else if (accept2.includes("audio/")) {
+          return "a";
+        } else if (accept2.includes("video/")) {
+          return "v";
+        } else {
+          const extension = accept2.toLowerCase().split(",")[0];
+          return getExtension(extension);
+        }
+      }
+      return "";
+    };
+    const type = computed(() => {
+      return props.type ?? getType(accept.value);
+    });
+    const getListType = (obj) => {
+      if (props.type) {
+        return props.type;
+      }
+      if (obj) {
+        if (obj.type) {
+          return obj.type;
+        } else {
+          let v = getUrlCatalogueObj(obj.url);
+          if (v.suffix) {
+            return getExtension("." + v.suffix);
+          }
+          return getType(accept.value);
+        }
+      }
+      return "";
+    };
+    const getFileList = (arr) => {
+      if (props.formatter) {
+        return arr.map((v) => {
+          return props.formatter(v);
+        });
+      } else {
+        return getListValue(arr);
+      }
+    };
+    const fileList = computed(() => {
+      if (value.value instanceof Array) {
+        return getFileList(value.value);
+      } else {
+        if (value.value) {
+          return getFileList([value.value]);
+        }
+        return [];
+      }
+    });
+    const isUp = computed(() => {
+      if (props.disabled) {
+        return false;
+      }
+      if (multiple.value) {
+        if (!value.value) {
+          return true;
+        }
+        if (props.limit) {
+          if (value.value && value.value.length < props.limit) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          return true;
+        }
+      } else {
+        if (value.value) {
+          return false;
+        } else {
+          return true;
+        }
+      }
+    });
+    const views = reactive({
+      show: false,
+      value: void 0
+    });
+    const getIsViews = (item) => {
+      if (props.isViews) {
+        if (typeof props.isViews === "boolean") {
+          return true;
+        } else {
+          const type2 = getListType(item);
+          if (props.isViews.includes(type2)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    const onDownload = (item, index) => {
+      if (props.onDownload) {
+        props.onDownload(item, index);
+      } else {
+        downloadFromURL(item.url);
+      }
+    };
+    const onViews = (item, index) => {
+      views.value = item;
+      views.show = true;
+      emit("views", item, index);
+    };
+    const onDelete = (item, index) => {
+      if (props.onDelete) {
+        props.onDelete(
+          (is) => {
+            if (is) {
+              if (multiple.value) {
+                value.value.splice(index, 1);
+              } else {
+                value.value = "";
+              }
+            }
+          },
+          item,
+          index
+        );
+      } else {
+        if (multiple.value) {
+          value.value.splice(index, 1);
+        } else {
+          value.value = "";
+        }
+      }
+    };
+    const errorPrompt = (ts, num) => {
+      if (props.errorPrompt) {
+        props.errorPrompt(ts, num);
+      } else {
+        Message.error(ts);
+      }
+    };
+    const onBeforeUpload = (file) => {
+      const fileName = file.name.toLowerCase();
+      const ext = fileName.includes(".") ? fileName.split(".").pop() : "";
+      let is = true;
+      if (accept.value) {
+        if (!ext) {
+          const ts = getLocale("upload.error.name", file.name);
+          errorPrompt(ts, 1);
+          is = false;
+        }
+        const allowedExts = accept.value.split(",").map((ext2) => ext2.trim().toLowerCase());
+        if (!allowedExts.includes(`.${ext}`)) {
+          const ts = getLocale(
+            "upload.error.format",
+            getLocale("upload.type." + type.value),
+            accept.value,
+            file.name
+          );
+          errorPrompt(ts, 2);
+          is = false;
+        }
+      }
+      if (props.fileSize) {
+        if (file.size > props.fileSize) {
+          const ts = getLocale(
+            "upload.error.size",
+            getLocale("upload.type." + type.value),
+            props.fileSize,
+            file.name
+          );
+          errorPrompt(ts, 3);
+          is = false;
+        }
+      }
+      return is;
+    };
+    const callback = (v) => {
+      if (v) {
+        if (multiple.value) {
+          if (v instanceof Array) {
+            if (value.value) {
+              value.value.push(...v);
+            } else {
+              value.value = [...v];
+            }
+          } else {
+            if (value.value) {
+              value.value.push(v);
+            } else {
+              value.value = [v];
+            }
+          }
+        } else {
+          value.value = v;
+        }
+      }
+      isloading.value = false;
+    };
+    const httpRequest = (obj) => {
+      isloading.value = true;
+      emit("httpRequest", obj, callback);
+    };
+    __expose(
+      useExpose(
+        {
+          el: refEl
+        },
+        elRef
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "refEl",
+        ref: refEl
+      }, unref(attrs).root, {
+        class: unref(cs).z()
+      }), [
+        createElementVNode("div", {
+          class: normalizeClass(unref(cs).z("list"))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass(unref(cs).z("list-li")),
+              key: index
+            }, [
+              renderSlot(_ctx.$slots, unref(dataSlot).default, { value: item }, () => {
+                var _a;
+                return [
+                  createElementVNode("div", {
+                    class: normalizeClass(unref(cs).z("list-li-operation")),
+                    title: item.url
+                  }, [
+                    props.isDownload ? (openBlock(), createElementBlock("span", {
+                      key: 0,
+                      onClick: ($event) => onDownload(item, index),
+                      title: unref(getLocale)("upload.download")
+                    }, [
+                      createVNode(unref(Icon), null, {
+                        default: withCtx(() => [
+                          createVNode(Download)
+                        ]),
+                        _: 1
+                      })
+                    ], 8, _hoisted_2)) : createCommentVNode("", true),
+                    getIsViews(item) ? (openBlock(), createElementBlock("span", {
+                      key: 1,
+                      onClick: ($event) => onViews(item, index),
+                      title: unref(getLocale)("upload.views")
+                    }, [
+                      createVNode(unref(Icon), null, {
+                        default: withCtx(() => [
+                          createVNode(Views)
+                        ]),
+                        _: 1
+                      })
+                    ], 8, _hoisted_3)) : createCommentVNode("", true),
+                    !(props.disabled || item.disabled) ? (openBlock(), createElementBlock("span", {
+                      key: 2,
+                      class: normalizeClass(unref(cs).z("list-li-operation-delete")),
+                      onClick: ($event) => onDelete(item, index),
+                      title: unref(getLocale)("upload.delete")
+                    }, [
+                      createVNode(unref(Icon), null, {
+                        default: withCtx(() => [
+                          createVNode(Delete)
+                        ]),
+                        _: 1
+                      })
+                    ], 10, _hoisted_4)) : createCommentVNode("", true)
+                  ], 10, _hoisted_1),
+                  createElementVNode("div", {
+                    class: normalizeClass(unref(cs).z("list-li-value"))
+                  }, [
+                    getListType(item).startsWith("i") ? (openBlock(), createBlock(unref(Image), {
+                      key: 0,
+                      class: normalizeClass(unref(cs).z("list-li-value-img")),
+                      fit: "cover",
+                      src: item.url
+                    }, null, 8, ["class", "src"])) : (openBlock(), createElementBlock("div", {
+                      key: 1,
+                      class: normalizeClass(unref(cs).z("list-li-value-document"))
+                    }, [
+                      createElementVNode("span", {
+                        class: normalizeClass(unref(cs).z("list-li-value-document-bg"))
+                      }, [
+                        createVNode(Document)
+                      ], 2),
+                      createElementVNode("span", {
+                        class: normalizeClass(unref(cs).z("list-li-value-document-text"))
+                      }, toDisplayString(((_a = unref(getUrlCatalogueObj)(item.url)) == null ? void 0 : _a.name) || item.url), 3)
+                    ], 2))
+                  ], 2)
+                ];
+              })
+            ], 2);
+          }), 128)),
+          views.show ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(unref(cs).z("list-views"))
+          }, [
+            renderSlot(_ctx.$slots, unref(dataSlot).views, { views }, () => {
+              var _a;
+              return [
+                getListType(views.value).startsWith("i") ? (openBlock(), createBlock(unref(ImageViewer), {
+                  key: 0,
+                  "url-list": [(_a = views.value) == null ? void 0 : _a.url],
+                  "show-progress": "",
+                  onClose: _cache[0] || (_cache[0] = ($event) => views.show = false)
+                }, null, 8, ["url-list"])) : createCommentVNode("", true)
+              ];
+            })
+          ], 2)) : createCommentVNode("", true)
+        ], 2),
+        isUp.value ? (openBlock(), createBlock(unref(Upload), mergeProps({ key: 0 }, unref(attrs).assem, {
+          ref_key: "elRef",
+          ref: elRef,
+          disabled: isloading.value,
+          class: unref(cs).z("upload"),
+          action: "#",
+          multiple: unref(multiple),
+          "show-file-list": false,
+          accept: accept.value,
+          limit: unref(multiple) ? props.limit : 1,
+          "before-upload": onBeforeUpload,
+          "http-request": httpRequest
+        }), {
+          trigger: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(unref(cs).z("upload-trigger"))
+            }, [
+              createVNode(unref(Icon), null, {
+                default: withCtx(() => [
+                  !isloading.value ? (openBlock(), createBlock(Plus, { key: 0 })) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
+            ], 2)
+          ]),
+          _: 1
+        }, 16, ["disabled", "class", "multiple", "accept", "limit"])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/uploads/style/index2.scss

@@ -0,0 +1,7 @@
+@use '../../select/style/index2.scss' as *;
+@use '../../upload/style/index2.scss' as *;
+@use '../../icon/style/index2.scss' as *;
+@use '../../message/style/index2.scss' as *;
+@use '../../image/style/index2.scss' as *;
+
+@use '../index.scss' as *;

package/dist/components/videos/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+;/* empty css                   */
+const withInstall = require("../../utils/vues/withInstall.cjs");
+require("./src/index.cjs");
+const index_vue_vue_type_script_setup_true_lang = require("./src/index2.cjs");
+const Videos = withInstall.withInstall(index_vue_vue_type_script_setup_true_lang.default, "Videos");
+exports.Videos = Videos;
+exports.default = Videos;

package/dist/components/videos/index.css

@@ -0,0 +1,122 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.videos {
+  display: flex;
+  height: 100%;
+  border-radius: 8px;
+  background: #000;
+  color: #fff;
+  position: relative;
+  --videos-list-width: 20%;
+}
+.videos.is-fullscreen {
+  border-radius: 0;
+}
+.videos.is-fullscreen .videos-controls-bottom {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.videos.is-fullscreen .videos-list {
+  background-color: rgba(238, 238, 238, 0.5);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.videos.is-list .videos-controls-bottom {
+  width: calc(100% - var(--videos-list-width));
+}
+.videos-videos {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.videos-videos .videos-controls-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  padding: 5px;
+  background-color: rgba(238, 238, 238, 0.5);
+}
+.videos-videos .videos-video {
+  flex: 1;
+  margin: 0 auto;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+.videos-videos .videos-video video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: pointer;
+}
+.videos-videos .videos-controls-bottom .videos-slider {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-slider-slider {
+  margin-left: 10px;
+}
+.videos-videos .videos-controls-bottom .videos-slider .videos-duration {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-buts {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume-but {
+  margin-left: 10px;
+  margin-right: 15px;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume-slider {
+  min-width: 40px;
+  max-width: 120px;
+  margin-right: 5px;
+}
+.videos-videos .videos-controls-bottom .videos-control-more {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-more-rate {
+  width: 60px;
+  margin: 0 10px;
+}
+.videos-list {
+  width: var(--videos-list-width);
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}

package/dist/components/videos/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/vues';
+import { DefineComponent } from 'vue';
+declare const Videos: SFCWithInstall<DefineComponent<{}, {}, any>>;
+export { Videos, Videos as default };

package/dist/components/videos/index.js

@@ -0,0 +1,9 @@
+/* empty css                 */
+import { withInstall } from "../../utils/vues/withInstall.js";
+import "./src/index.js";
+import _sfc_main from "./src/index2.js";
+const Videos = withInstall(_sfc_main, "Videos");
+export {
+  Videos,
+  Videos as default
+};

package/dist/components/videos/index.scss

@@ -0,0 +1,115 @@
+@use '../scss/common.scss' as *;
+
+$videos: 'videos';
+@include b($videos) {
+	display: flex;
+	height: 100%;
+	border-radius: 8px;
+	background: #000;
+	color: #fff;
+	position: relative;
+	#{vdm('list-width', $videos)}: 20%;
+	&.#{is('fullscreen')} {
+		border-radius: 0;
+		.#{z($videos, 'controls-bottom')} {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+		}
+		.#{z($videos, 'list')} {
+			background-color: rgba(238, 238, 238, 0.5);
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+		}
+	}
+	&.#{is('list')} {
+		.#{z($videos, 'controls-bottom')} {
+			width: calc(100% - var(#{vdm('list-width', $videos)}));
+		}
+	}
+	&-videos {
+		flex: 1;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		.#{z($videos, 'controls-top')} {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 100;
+			padding: 5px;
+			background-color: rgba(238, 238, 238, 0.5);
+		}
+		.#{z($videos, 'video')} {
+			flex: 1;
+			margin: 0 auto;
+			position: relative;
+			height: 100%;
+			width: 100%;
+			video {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+				cursor: pointer;
+			}
+		}
+		.#{z($videos, 'controls-bottom')} {
+			.#{z($videos, 'slider')} {
+				display: flex;
+				align-items: center;
+				&-slider {
+					margin-left: 10px;
+				}
+				.#{z($videos, 'duration')} {
+					margin-left: 20px;
+					display: flex;
+					align-items: center;
+				}
+			}
+			.#{z($videos, 'control')} {
+				display: flex;
+				align-items: center;
+				&-buts {
+					display: flex;
+					align-items: center;
+				}
+				&-volume {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					&-but {
+						margin-left: 10px;
+						margin-right: 15px;
+					}
+					&-slider {
+						min-width: 40px;
+						max-width: 120px;
+						margin-right: 5px;
+					}
+				}
+				&-more {
+					display: flex;
+					align-items: center;
+					&-rate {
+						width: 60px;
+						margin: 0 10px;
+					}
+				}
+			}
+		}
+	}
+	&-list {
+		width: var(#{vdm('list-width', $videos)});
+		height: 100%;
+		box-sizing: border-box;
+		padding: 10px;
+	}
+}