vue-devui 1.0.0-beta.18 → 1.0.0-beta.20220808

package/form/style.css

@@ -1 +1 @@
-.d-form{position:relative}.devui-popover{position:relative;display:inline-flex}.devui-popover.devui-popover-isVisible .devui-popover-content{display:inline-flex}.devui-popover .devui-popover-content{position:absolute;display:none;padding:5px 14px;align-items:center;flex-wrap:wrap;white-space:nowrap;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover .devui-popover-content .after{content:"";width:12px;height:12px;transform:rotate(45deg);position:absolute;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-popover .devui-popover-content.is-icon{flex-wrap:nowrap}.devui-popover .devui-popover-content .devui-popover-icon{margin-right:5px}@keyframes some-animation{0%{opacity:0;display:inline-flex}to{opacity:1}}.devui-popover.devui-popover-animation .devui-popover-content{animation:some-animation .5s var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1)) 1 forwards}.devui-popover.left .devui-popover-content{left:-8px;top:0;transform:translate(-100%);top:50%;transform:translate(-100%,-50%)}.devui-popover.left .after{right:-6px;top:50%;margin-top:-6px;margin-left:-8px}.devui-popover.left-top .devui-popover-content{left:-8px;top:0;transform:translate(-100%)}.devui-popover.left-top .after{right:-6px;top:50%;margin-left:-8px;top:8px;margin-top:auto}.devui-popover.left-bottom .devui-popover-content{left:-8px;top:0;transform:translate(-100%);top:auto;bottom:0}.devui-popover.left-bottom .after{right:-6px;top:50%;margin-left:-8px;bottom:8px;margin-top:auto}.devui-popover.top .devui-popover-content{top:-8px;left:0;transform:translateY(-100%);left:50%;transform:translate(-50%,-100%)}.devui-popover.top .after{left:50%;bottom:-6px;margin-left:-6px}.devui-popover.top-left .devui-popover-content{top:-8px;left:0;transform:translateY(-100%)}.devui-popover.top-left .after{bottom:-6px;left:8px;margin-left:auto;margin-right:-6px}.devui-popover.top-right .devui-popover-content{top:-8px;left:0;transform:translateY(-100%);left:auto;right:0}.devui-popover.top-right .after{bottom:-6px;margin-left:-6px;right:8px}.devui-popover.right .devui-popover-content{right:-8px;top:50%;transform:translate(100%);transform:translate(100%,-50%)}.devui-popover.right .after{left:-6px;margin-right:-6px;top:8px;top:50%;margin-top:-6px}.devui-popover.right-top .devui-popover-content{right:-8px;top:50%;transform:translate(100%);top:0}.devui-popover.right-top .after{left:-6px;margin-right:-6px;top:8px}.devui-popover.right-bottom .devui-popover-content{right:-8px;top:50%;transform:translate(100%);bottom:0;top:auto}.devui-popover.right-bottom .after{left:-6px;margin-right:-6px;top:8px;top:auto;bottom:8px}.devui-popover.bottom .devui-popover-content{left:0;margin-bottom:-6px;transform:translateY(100%);left:50%;bottom:0;transform:translate(-50%,100%)}.devui-popover.bottom .after{left:8px;top:-6px;margin-bottom:-6px;left:50%;margin-right:auto;margin-left:-6px}.devui-popover.bottom-left .devui-popover-content{left:0;bottom:0;margin-bottom:-6px;transform:translateY(100%)}.devui-popover.bottom-left .after{left:8px;top:-6px;margin-bottom:-6px;margin-right:-6px}.devui-popover.bottom-right .devui-popover-content{left:0;bottom:0;margin-bottom:-6px;transform:translateY(100%);left:auto;right:0}.devui-popover.bottom-right .after{left:8px;top:-6px;margin-bottom:-6px;left:auto;margin-right:auto;right:8px;margin-left:-6px}.form-label{-moz-box-flex:1;text-align:left;padding-bottom:8px;justify-content:flex-start;align-self:flex-start;margin-right:16px}.form-label .devui-required{display:inline-flex;align-items:center}.form-label .devui-required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.form-label_sm{width:80px;min-width:80px}.form-label_sd{width:100px;min-width:100px}.form-label_lg{width:150px;min-width:150px}.form-label_center{text-align:center}.form-label_end{text-align:end}.form-label-help{border-radius:50%;display:inline-flex;justify-content:center;align-items:center;position:relative;margin-left:10px}.form-item{display:flex;margin-bottom:20px}.form-item-vertical{flex-direction:column}.form-item-columns{flex-direction:column;display:inline-block!important}.column-item{margin-bottom:20px}.column-item .form-control{width:60%!important}.d-validate-tip-horizontal{margin-left:10px}.form-control{position:relative}.form-control .star{color:red}.form-control .devui-form-control-container{position:relative}.form-control .devui-form-control-container .feedback-status{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;margin-top:-7px;line-height:16px;text-align:center;visibility:visible;pointer-events:none}.form-control .devui-form-control-container .devui-radio:not(:last-child){margin-bottom:20px}.form-control .devui-form-control-container-horizontal{display:flex}.form-control .devui-form-control-container-horizontal .devui-radio:not(:last-child){margin-bottom:0;margin-right:20px}.form-control .devui-form-control-container-horizontal .devui-checkbox-group>div:first-child{display:flex;align-items:center}.form-control .devui-form-control-container-horizontal .devui-checkbox-column-margin:not(:last-child){margin-right:20px}.form-control .devui-form-control-container-horizontal input,.form-control .devui-form-control-container-horizontal .devui-tags-host{width:200px}.form-control .devui-form-control-container-horizontal .d-validate-tip{margin:0 10px}.form-control .devui-control-content-wrapper .devui-popover-wrapper{position:absolute;width:100%;height:100%;left:0;top:0;z-index:9}.form-control .devui-control-content-wrapper .devui-popover-wrapper>div{width:inherit;height:100%}.form-control .with-popover{position:relative}.form-control .with-popover>div{z-index:10}.form-control .has-feedback{display:flex;align-items:center}.form-control .has-feedback input{padding-right:28px}.form-control .feedback-error{border:1px solid #f66f6a;border-radius:2px}.form-control .feedback-error input{background-color:#ffeeed;border-color:transparent}.form-control .feedback-error input:hover{border-color:transparent!important}.form-control .feedback-error input:focus{border-color:transparent!important}.form-control .feedback-error .devui-select-arrow{right:24px!important}.form-control .devui-form-control-extra-info{font-size:12px;color:#8a8e99;min-height:20px;line-height:1.5;text-align:justify}.form-operation .star{color:red}.d-validate-rules-error-pristine input{background-color:#ffeeed;border:1px solid #f66f6a}.d-validate-rules-error-pristine input:focus{border:1px solid #f66f6a!important}.d-validate-rules-error-pristine input:hover{border:1px solid #f66f6a!important}.d-validate-tip{display:flex;justify-content:center;align-items:center;font-size:12px;color:#f66f6a}
+.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 14px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 14px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}

package/fullscreen/index.es.js

@@ -1,146 +1,152 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount, renderSlot, useSlots, createVNode } from "vue";
-var fullscreen = "";
+import { toRefs, onMounted, onUnmounted, watch, defineComponent, ref, renderSlot, useSlots, createVNode } from "vue";
 const fullscreenProps = {
-  fullscreenLaunch: {
-    type: Function,
-    default: void 0
+  modelValue: {
+    type: Boolean,
+    default: false
   },
   mode: {
     type: String,
-    default: "immersive"
+    default: "normal"
   },
   zIndex: {
     type: Number,
     default: 10
   }
 };
+const ESC_KEY_CODE = 27;
+function useKeydown(props, ctx) {
+  const { modelValue } = toRefs(props);
+  const handleKeydown = (event) => {
+    if (event.keyCode === ESC_KEY_CODE && modelValue) {
+      ctx.emit("update:modelValue", false);
+    }
+  };
+  onMounted(() => {
+    document.addEventListener("keydown", handleKeydown);
+  });
+  onUnmounted(() => {
+    document.removeEventListener("keydown", handleKeydown);
+  });
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+const ns = useNamespace("fullscreen");
+const launchNormalFullscreen = (targetElement, props) => {
+  targetElement.classList.add(ns.b());
+  if (props.zIndex) {
+    targetElement.setAttribute("style", `z-index: ${props.zIndex}`);
+  }
+};
+const exitNormalFullscreen = (targetElement) => {
+  targetElement.classList.remove(ns.b());
+  targetElement.style.zIndex = "";
+};
+const launchImmersiveFullScreen = async (docElement) => {
+  let fullscreenLaunch = null;
+  if (docElement.requestFullscreen) {
+    fullscreenLaunch = docElement.requestFullscreen();
+  } else if (docElement.mozRequestFullScreen) {
+    fullscreenLaunch = docElement.mozRequestFullScreen();
+  } else if (docElement.webkitRequestFullScreen) {
+    fullscreenLaunch = Promise.resolve(docElement.webkitRequestFullScreen());
+  } else if (docElement.msRequestFullscreen) {
+    fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
+  }
+  return await (fullscreenLaunch == null ? void 0 : fullscreenLaunch.then(() => !!document.fullscreenElement));
+};
+const exitImmersiveFullScreen = async (doc) => {
+  let fullscreenExit = null;
+  if (doc.exitFullscreen) {
+    fullscreenExit = doc.exitFullscreen();
+  } else if (doc.mozCancelFullScreen) {
+    fullscreenExit = doc.mozCancelFullScreen();
+  } else if (doc.webkitCancelFullScreen) {
+    fullscreenExit = Promise.resolve(doc.webkitCancelFullScreen());
+  } else if (doc.msExitFullscreen) {
+    fullscreenExit = Promise.resolve(doc.msExitFullscreen());
+  }
+  return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => !!document.fullscreenElement));
+};
+const addFullScreenStyle = () => {
+  document.getElementsByTagName("html")[0].classList.add(ns.e("html"));
+};
+const removeFullScreenStyle = () => {
+  document.getElementsByTagName("html")[0].classList.remove(ns.e("html"));
+};
+function useFullscreen(props, slotElement, ctx) {
+  const { modelValue, mode } = toRefs(props);
+  let exitByKeydown = false;
+  const handleNormalFullscreen = (isOpen) => {
+    if (isOpen) {
+      launchNormalFullscreen(slotElement.value, props);
+      addFullScreenStyle();
+    } else {
+      exitNormalFullscreen(slotElement.value);
+      removeFullScreenStyle();
+    }
+  };
+  const handleImmersiveFullscreen = (isOpen) => {
+    if (isOpen) {
+      launchImmersiveFullScreen(slotElement.value);
+    } else {
+      if (!exitByKeydown) {
+        exitImmersiveFullScreen(document);
+      }
+    }
+  };
+  watch(modelValue, (newVal) => {
+    if (mode.value === "normal") {
+      handleNormalFullscreen(newVal);
+    }
+    if (mode.value === "immersive") {
+      handleImmersiveFullscreen(newVal);
+    }
+  });
+  const handleFullscreenChange = () => {
+    if (!document.fullscreenElement) {
+      ctx.emit("update:modelValue");
+      exitByKeydown = true;
+    } else {
+      exitByKeydown = false;
+    }
+  };
+  onMounted(() => {
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+  });
+  onUnmounted(() => {
+    document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  });
+}
+var fullscreen = "";
 var Fullscreen = defineComponent({
   name: "DFullscreen",
   props: fullscreenProps,
-  emits: ["fullscreenLaunch"],
+  emits: ["update:modelValue"],
   setup(props, ctx) {
-    let currentTarget = null;
-    const isFullscreen = ref(false);
-    const slotElement = ref(null);
-    const onFullScreenChange = () => {
-      if (currentTarget) {
-        const targetElement = currentTarget;
-        if (document.fullscreenElement) {
-          addFullScreenStyle();
-          launchNormalFullscreen(targetElement);
-        } else {
-          removeFullScreenStyle();
-          currentTarget = null;
-          exitNormalFullscreen(targetElement);
-        }
-        isFullscreen.value = !!document.fullscreenElement;
-        ctx.emit("fullscreenLaunch", isFullscreen.value);
-      }
-    };
-    const launchNormalFullscreen = (targetElement) => {
-      targetElement.classList.add("fullscreen");
-      if (props.zIndex) {
-        targetElement.setAttribute("style", `z-index: ${props.zIndex}`);
-      }
-    };
-    const exitNormalFullscreen = (targetElement) => {
-      targetElement.classList.remove("fullscreen");
-      targetElement.style.zIndex = null;
-    };
-    const handleFullscreen = async () => {
-      const targetElement = slotElement.value.querySelector("[fullscreen-target]");
-      let isFull = false;
-      if (props.mode === "normal") {
-        const fullscreen2 = targetElement.classList.contains("fullscreen");
-        if (!fullscreen2) {
-          addFullScreenStyle();
-          launchNormalFullscreen(targetElement);
-          isFull = true;
-        } else {
-          removeFullScreenStyle();
-          exitNormalFullscreen(targetElement);
-          isFull = false;
-        }
-      } else {
-        currentTarget = targetElement;
-        if (document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement) {
-          isFull = await exitImmersiveFullScreen(document);
-        } else {
-          isFull = await launchImmersiveFullScreen(currentTarget);
-        }
-      }
-      isFullscreen.value = isFull;
-      ctx.emit("fullscreenLaunch", isFullscreen.value);
-    };
-    const addFullScreenStyle = () => {
-      document.getElementsByTagName("html")[0].classList.add("devui-fullscreen");
-    };
-    const removeFullScreenStyle = () => {
-      document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen");
-    };
-    const exitImmersiveFullScreen = async (doc) => {
-      let fullscreenExit = null;
-      if (doc.exitFullscreen) {
-        fullscreenExit = doc.exitFullscreen();
-      } else if (doc.mozCancelFullScreen) {
-        fullscreenExit = doc.mozCancelFullScreen();
-      } else if (doc.webkitCancelFullScreen) {
-        fullscreenExit = Promise.resolve(doc.webkitCancelFullScreen());
-      } else if (doc.msExitFullscreen) {
-        fullscreenExit = Promise.resolve(doc.msExitFullscreen());
-      }
-      return await fullscreenExit.then(() => !!document.fullscreenElement);
-    };
-    const launchImmersiveFullScreen = async (docElement) => {
-      let fullscreenLaunch = null;
-      if (docElement.requestFullscreen) {
-        fullscreenLaunch = docElement.requestFullscreen();
-      } else if (docElement.mozRequestFullScreen) {
-        fullscreenLaunch = docElement.mozRequestFullScreen();
-      } else if (docElement.webkitRequestFullScreen) {
-        fullscreenLaunch = Promise.resolve(docElement.webkitRequestFullScreen());
-      } else if (docElement.msRequestFullscreen) {
-        fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
-      }
-      return await fullscreenLaunch.then(() => !!document.fullscreenElement);
-    };
-    const handleKeyDown = (event) => {
-      if (event.keyCode === 27) {
-        if (isFullscreen.value) {
-          const targetElement = slotElement.value.querySelector("[fullscreen-target]");
-          if (props.mode === "normal") {
-            removeFullScreenStyle();
-            exitNormalFullscreen(targetElement);
-          } else {
-            if (document.fullscreenElement) {
-              exitImmersiveFullScreen(document);
-            }
-          }
-          isFullscreen.value = false;
-          ctx.emit("fullscreenLaunch", isFullscreen.value);
-        }
-      }
-    };
-    onMounted(() => {
-      const btnLaunch = slotElement.value.querySelector("[fullscreen-launch]");
-      if (btnLaunch) {
-        btnLaunch.addEventListener("click", handleFullscreen);
-      }
-      document.addEventListener("fullscreenchange", onFullScreenChange);
-      document.addEventListener("MSFullscreenChange", onFullScreenChange);
-      document.addEventListener("webkitfullscreenchange", onFullScreenChange);
-      document.addEventListener("keydown", handleKeyDown);
-    });
-    onBeforeUnmount(() => {
-      const btnLaunch = slotElement.value.querySelector("[fullscreen-launch]");
-      if (btnLaunch) {
-        btnLaunch.removeEventListener("click", handleFullscreen);
-      }
-      document.removeEventListener("fullscreenchange", onFullScreenChange);
-      document.removeEventListener("MSFullscreenChange", onFullScreenChange);
-      document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
-      document.removeEventListener("keydown", handleKeyDown);
-    });
+    const slotElement = ref();
+    useFullscreen(props, slotElement, ctx);
+    useKeydown(props, ctx);
     return () => {
       const defaultSlot = renderSlot(useSlots(), "default");
       return createVNode("div", {
@@ -149,15 +155,12 @@ var Fullscreen = defineComponent({
     };
   }
 });
-Fullscreen.install = function(app) {
-  app.component(Fullscreen.name, Fullscreen);
-};
 var index = {
   title: "Fullscreen \u5168\u5C4F",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Fullscreen);
+    app.component(Fullscreen.name, Fullscreen);
   }
 };
-export { Fullscreen, index as default };
+export { Fullscreen, index as default, fullscreenProps };

package/fullscreen/index.umd.js

@@ -1 +1 @@
-(function(t,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis!="undefined"?globalThis:t||self,n(t.index={},t.Vue))})(this,function(t,n){"use strict";var E="";const y={fullscreenLaunch:{type:Function,default:void 0},mode:{type:String,default:"immersive"},zIndex:{type:Number,default:10}};var c=n.defineComponent({name:"DFullscreen",props:y,emits:["fullscreenLaunch"],setup(u,o){let i=null;const s=n.ref(!1),a=n.ref(null),r=()=>{if(i){const e=i;document.fullscreenElement?(F(),d(e)):(m(),i=null,f(e)),s.value=!!document.fullscreenElement,o.emit("fullscreenLaunch",s.value)}},d=e=>{e.classList.add("fullscreen"),u.zIndex&&e.setAttribute("style",`z-index: ${u.zIndex}`)},f=e=>{e.classList.remove("fullscreen"),e.style.zIndex=null},v=async()=>{const e=a.value.querySelector("[fullscreen-target]");let l=!1;u.mode==="normal"?e.classList.contains("fullscreen")?(m(),f(e),l=!1):(F(),d(e),l=!0):(i=e,document.fullscreenElement||document.msFullscreenElement||document.webkitFullscreenElement?l=await h(document):l=await g(i)),s.value=l,o.emit("fullscreenLaunch",s.value)},F=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen")},m=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen")},h=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await l.then(()=>!!document.fullscreenElement)},g=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await l.then(()=>!!document.fullscreenElement)},S=e=>{if(e.keyCode===27&&s.value){const l=a.value.querySelector("[fullscreen-target]");u.mode==="normal"?(m(),f(l)):document.fullscreenElement&&h(document),s.value=!1,o.emit("fullscreenLaunch",s.value)}};return n.onMounted(()=>{const e=a.value.querySelector("[fullscreen-launch]");e&&e.addEventListener("click",v),document.addEventListener("fullscreenchange",r),document.addEventListener("MSFullscreenChange",r),document.addEventListener("webkitfullscreenchange",r),document.addEventListener("keydown",S)}),n.onBeforeUnmount(()=>{const e=a.value.querySelector("[fullscreen-launch]");e&&e.removeEventListener("click",v),document.removeEventListener("fullscreenchange",r),document.removeEventListener("MSFullscreenChange",r),document.removeEventListener("webkitfullscreenchange",r),document.removeEventListener("keydown",S)}),()=>{const e=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:a},[e])}}});c.install=function(u){u.component(c.name,c)};var L={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(u){u.use(c)}};t.Fullscreen=c,t.default=L,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(r,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis!="undefined"?globalThis:r||self,n(r.index={},r.Vue))})(this,function(r,n){"use strict";const F={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},v=27;function S(e,l){const{modelValue:t}=n.toRefs(e),s=c=>{c.keyCode===v&&t&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",s)}),n.onUnmounted(()=>{document.removeEventListener("keydown",s)})}function i(e,l,t){let s=e;return l&&(s+=`__${l}`),t&&(s+=`--${t}`),s}function h(e,l=!1){const t=l?`.devui-${e}`:`devui-${e}`;return{b:()=>i(t),e:u=>u?i(t,u):"",m:u=>u?i(t,"",u):"",em:(u,a)=>u&&a?i(t,u,a):""}}const m=h("fullscreen"),p=(e,l)=>{e.classList.add(m.b()),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},x=e=>{e.classList.remove(m.b()),e.style.zIndex=""},b=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},w=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},C=()=>{document.getElementsByTagName("html")[0].classList.add(m.e("html"))},q=()=>{document.getElementsByTagName("html")[0].classList.remove(m.e("html"))};function z(e,l,t){const{modelValue:s,mode:c}=n.toRefs(e);let d=!1;const y=o=>{o?(p(l.value,e),C()):(x(l.value),q())},u=o=>{o?b(l.value):d||w(document)};n.watch(s,o=>{c.value==="normal"&&y(o),c.value==="immersive"&&u(o)});const a=()=>{document.fullscreenElement?d=!1:(t.emit("update:modelValue"),d=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",a)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",a)})}var N="",f=n.defineComponent({name:"DFullscreen",props:F,emits:["update:modelValue"],setup(e,l){const t=n.ref();return z(e,t,l),S(e,l),()=>{const s=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:t},[s])}}}),g={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(f.name,f)}};r.Fullscreen=f,r.default=g,r.fullscreenProps=F,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/fullscreen/style.css

@@ -1 +1 @@
-.fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen{overflow:hidden}:not(:root):fullscreen::backdrop{background:#ffffff}
+.devui-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen__html{overflow:hidden}:not(:root):fullscreen::backdrop{background:var(--devui-base-bg, #ffffff)}

package/grid/index.es.js

@@ -1,20 +1,4 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-import { computed, defineComponent, ref, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
+import { defineComponent, ref, computed, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
 const rowProps = {
   align: {
     type: String,
@@ -33,15 +17,6 @@ const rowProps = {
     default: false
   }
 };
-const screenSizesProp = [Number, Object];
-const screenSizes = {
-  xs: screenSizesProp,
-  sm: screenSizesProp,
-  md: screenSizesProp,
-  lg: screenSizesProp,
-  xl: screenSizesProp,
-  xxl: screenSizesProp
-};
 const numberProp = Number;
 const colPropsBaseStyle = {
   flex: [String, Number],
@@ -53,46 +28,16 @@ const colPropsBaseClass = {
   push: numberProp,
   span: numberProp
 };
-const colProps = __spreadValues(__spreadValues(__spreadValues({}, colPropsBaseStyle), colPropsBaseClass), screenSizes);
-const CLASS_PREFIX$1 = "devui-col";
-function formatClass(prefix, val) {
-  return val !== void 0 ? ` ${prefix}-${val}` : "";
-}
-function useColClassNames(props) {
-  return computed(() => {
-    const spanClass = formatClass(`${CLASS_PREFIX$1}-span`, props.span);
-    const offsetClass = formatClass(`${CLASS_PREFIX$1}-offset`, props.offset);
-    const pullClass = formatClass(`${CLASS_PREFIX$1}-pull`, props.pull);
-    const pushClass = formatClass(`${CLASS_PREFIX$1}-push`, props.push);
-    return `${spanClass}${offsetClass}${pullClass}${pushClass}`;
-  });
-}
-function setSpace(val) {
-  return ` ${val.trim()}${val && " "}`;
-}
-function useSize(colSizes) {
-  const keys = Object.keys(colSizes).filter((key) => key in screenSizes);
-  return computed(() => {
-    return keys.reduce((total, key) => {
-      const valueType = typeof colSizes[key];
-      if (valueType === "number") {
-        total = `${setSpace(total)}${CLASS_PREFIX$1}-${key}-span-${colSizes[key]}`;
-      } else if (valueType === "object") {
-        const colSizesKeys = Object.keys(colSizes[key]);
-        const sum = colSizesKeys.filter((item) => item in colPropsBaseClass).reduce((tot, k) => {
-          if (typeof colSizes[key][k] !== "number") {
-            return "";
-          } else {
-            tot = `${setSpace(tot)}${CLASS_PREFIX$1}-${key}-${k}-${colSizes[key][k]}`;
-          }
-          return tot;
-        }, "");
-        total = `${setSpace(total)}${sum}`;
-      }
-      return total;
-    }, "");
-  });
-}
+const screenSizesProp = [Number, Object];
+const screenSizes = {
+  xs: screenSizesProp,
+  sm: screenSizesProp,
+  md: screenSizesProp,
+  lg: screenSizesProp,
+  xl: screenSizesProp,
+  xxl: screenSizesProp
+};
+const colProps = { ...colPropsBaseStyle, ...colPropsBaseClass, ...screenSizes };
 const RESULT_SCREEN = ["xxl", "xl", "lg", "md", "sm", "xs"];
 const screenMedias = {
   xs: "screen and (max-width: 575px)",
@@ -106,20 +51,10 @@ const subscribers = /* @__PURE__ */ new Map();
 let subUid = -1;
 const screen = {};
 const results = {};
-function responesScreen(func) {
-  if (!subscribers.size) {
-    register();
-  }
-  subUid += 1;
-  subscribers.set(subUid, func);
-  func(__spreadValues({}, screen));
-  return subUid;
-}
-function removeSubscribeCb(id) {
-  subscribers.delete(id);
-  if (subscribers.size === 0) {
-    unRegister();
-  }
+function dispatch() {
+  subscribers.forEach((value) => {
+    value({ ...screen });
+  });
 }
 function register() {
   Object.keys(screenMedias).forEach((key) => {
@@ -139,6 +74,15 @@ function register() {
     };
   });
 }
+function responesScreen(func) {
+  if (!subscribers.size) {
+    register();
+  }
+  subUid += 1;
+  subscribers.set(subUid, func);
+  func({ ...screen });
+  return subUid;
+}
 function unRegister() {
   Object.keys(screenMedias).forEach((key) => {
     const handler = results[key];
@@ -146,13 +90,36 @@ function unRegister() {
   });
   subscribers.clear();
 }
-function dispatch() {
-  subscribers.forEach((value) => {
-    value(__spreadValues({}, screen));
-  });
+function removeSubscribeCb(id) {
+  subscribers.delete(id);
+  if (subscribers.size === 0) {
+    unRegister();
+  }
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
 }
 var row = "";
-const CLASS_PREFIX = "devui-row";
 var Row = defineComponent({
   name: "DRow",
   props: rowProps,
@@ -161,12 +128,12 @@ var Row = defineComponent({
     slots
   }) {
     const gutterScreenSize = ref({});
-    const rowClass = computed(() => {
-      const alignClass = formatClass(`${CLASS_PREFIX}-align`, props.align);
-      const justifyClass = formatClass(`${CLASS_PREFIX}-justify`, props.justify);
-      const wrapClass = props.wrap ? ` ${CLASS_PREFIX}-wrap` : "";
-      return `${alignClass}${justifyClass}${wrapClass}`;
-    });
+    const ns = useNamespace("row");
+    const rowClass = computed(() => ({
+      [ns.em("align", props.align)]: true,
+      [ns.em("justify", props.justify)]: true,
+      [ns.e("wrap")]: props.wrap
+    }));
     let token;
     onMounted(() => {
       token = responesScreen((screen2) => {
@@ -214,11 +181,48 @@ var Row = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": `${CLASS_PREFIX}${rowClass.value}`
+        "class": [ns.b(), rowClass.value]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
+const colNs = useNamespace("col");
+function useColClassNames(props) {
+  return computed(() => ({
+    [colNs.em("span", props.span ? String(props.span) : "")]: true,
+    [colNs.em("offset", props.offset ? String(props.offset) : "")]: true,
+    [colNs.em("pull", props.pull ? String(props.pull) : "")]: true,
+    [colNs.em("push", props.push ? String(props.push) : "")]: true
+  }));
+}
+function setSpace(val) {
+  return ` ${val.trim()}${val && " "}`;
+}
+function useSize(colSizes) {
+  const keys = Object.keys(colSizes).filter((key) => key in screenSizes);
+  return computed(() => {
+    return keys.reduce((total, key) => {
+      const valueType = typeof colSizes[key];
+      if (valueType === "number") {
+        total = `${setSpace(total)}${colNs.em(key, `span-${colSizes[key]}`)}`;
+      } else if (valueType === "object") {
+        const colSizesKeys = Object.keys(colSizes[key]);
+        const sum = colSizesKeys.filter((item) => item in colPropsBaseClass).reduce((tot, k) => {
+          const baseClass = colSizes[key];
+          const _class = baseClass[k];
+          if (typeof _class !== "number") {
+            return "";
+          } else {
+            tot = `${setSpace(tot)}${colNs.em(key, `${k}-${_class}`)}`;
+          }
+          return tot;
+        }, "");
+        total = `${setSpace(total)}${sum}`;
+      }
+      return total;
+    }, "");
+  });
+}
 var col = "";
 var Col = defineComponent({
   name: "DCol",
@@ -226,6 +230,7 @@ var Col = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("col");
     const formatFlex = (flex) => {
       if (typeof flex === "number") {
         return `${flex} ${flex} auto`;
@@ -245,25 +250,22 @@ var Col = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": `${CLASS_PREFIX$1}${colClassNames.value}${sizeClassNames.value}`,
-        "style": __spreadValues(__spreadValues({}, colStyle.value), gutterStyle.value)
+        "class": [ns.b(), colClassNames.value, sizeClassNames.value],
+        "style": {
+          ...colStyle.value,
+          ...gutterStyle == null ? void 0 : gutterStyle.value
+        }
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-Row.install = function(app) {
-  app.component(Row.name, Row);
-};
-Col.install = function(app) {
-  app.component(Col.name, Col);
-};
 var index = {
   title: "Grid \u6805\u683C",
   category: "\u5E03\u5C40",
   status: "100%",
   install(app) {
-    app.use(Col);
-    app.use(Row);
+    app.component(Row.name, Row);
+    app.component(Col.name, Col);
   }
 };
-export { Col, Row, index as default };
+export { Col, Row, colProps, colPropsBaseClass, colPropsBaseStyle, index as default, rowProps, screenSizes };