vue-devui 1.0.0-beta.2 → 1.0.0-beta.220801

package/form/style.css

@@ -1 +1 @@
-.d-form{position:relative}.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}.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-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 .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.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/fullscreen/index.es.js

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

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/grid/index.es.js

@@ -0,0 +1,284 @@
+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 { defineComponent, ref, computed, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
+const rowProps = {
+  align: {
+    type: String,
+    default: "top"
+  },
+  gutter: {
+    type: [Number, Object, Array],
+    default: 0
+  },
+  justify: {
+    type: String,
+    default: "start"
+  },
+  wrap: {
+    type: Boolean,
+    default: false
+  }
+};
+const numberProp = Number;
+const colPropsBaseStyle = {
+  flex: [String, Number],
+  order: numberProp
+};
+const colPropsBaseClass = {
+  offset: numberProp,
+  pull: numberProp,
+  push: numberProp,
+  span: numberProp
+};
+const screenSizesProp = [Number, Object];
+const screenSizes = {
+  xs: screenSizesProp,
+  sm: screenSizesProp,
+  md: screenSizesProp,
+  lg: screenSizesProp,
+  xl: screenSizesProp,
+  xxl: screenSizesProp
+};
+const colProps = __spreadValues(__spreadValues(__spreadValues({}, colPropsBaseStyle), colPropsBaseClass), screenSizes);
+const RESULT_SCREEN = ["xxl", "xl", "lg", "md", "sm", "xs"];
+const screenMedias = {
+  xs: "screen and (max-width: 575px)",
+  sm: "screen and (min-width: 576px)",
+  md: "screen and (min-width: 768px)",
+  lg: "screen and (min-width: 992px)",
+  xl: "screen and (min-width: 1200px)",
+  xxl: "screen and (min-width: 1600px)"
+};
+const subscribers = /* @__PURE__ */ new Map();
+let subUid = -1;
+const screen = {};
+const results = {};
+function dispatch() {
+  subscribers.forEach((value) => {
+    value(__spreadValues({}, screen));
+  });
+}
+function register() {
+  Object.keys(screenMedias).forEach((key) => {
+    const result = window.matchMedia(screenMedias[key]);
+    if (result.matches) {
+      screen[key] = true;
+      dispatch();
+    }
+    const listener = (e) => {
+      screen[key] = e.matches;
+      dispatch();
+    };
+    result.addEventListener("change", listener);
+    results[key] = {
+      res: result,
+      listener
+    };
+  });
+}
+function responesScreen(func) {
+  if (!subscribers.size) {
+    register();
+  }
+  subUid += 1;
+  subscribers.set(subUid, func);
+  func(__spreadValues({}, screen));
+  return subUid;
+}
+function unRegister() {
+  Object.keys(screenMedias).forEach((key) => {
+    const handler = results[key];
+    handler.res.removeEventListener("change", handler.listener);
+  });
+  subscribers.clear();
+}
+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 = "";
+var Row = defineComponent({
+  name: "DRow",
+  props: rowProps,
+  emits: [],
+  setup(props, {
+    slots
+  }) {
+    const gutterScreenSize = ref({});
+    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) => {
+        gutterScreenSize.value = screen2;
+      });
+    });
+    onUnmounted(() => {
+      removeSubscribeCb(token);
+    });
+    const gutterStyle = computed(() => {
+      if (!props.gutter) {
+        return {};
+      }
+      let currentGutter = [0, 0];
+      if (Array.isArray(props.gutter)) {
+        currentGutter = props.gutter;
+      } else if (typeof props.gutter === "number") {
+        currentGutter = [props.gutter, 0];
+      } else {
+        RESULT_SCREEN.some((size) => {
+          const gzs = props.gutter[size];
+          if (gutterScreenSize.value[size] && gzs) {
+            if (typeof gzs === "number") {
+              currentGutter = [gzs, 0];
+            } else {
+              currentGutter = gzs;
+            }
+            return true;
+          }
+          return false;
+        });
+      }
+      const paddingLeft = `${(currentGutter[0] || 0) / 2}px`;
+      const paddingRight = `${(currentGutter[0] || 0) / 2}px`;
+      const paddingTop = `${(currentGutter[1] || 0) / 2}px`;
+      const paddingBottom = `${(currentGutter[1] || 0) / 2}px`;
+      return {
+        paddingLeft,
+        paddingRight,
+        paddingTop,
+        paddingBottom
+      };
+    });
+    provide("gutterStyle", gutterStyle);
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "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",
+  props: colProps,
+  setup(props, {
+    slots
+  }) {
+    const ns = useNamespace("col");
+    const formatFlex = (flex) => {
+      if (typeof flex === "number") {
+        return `${flex} ${flex} auto`;
+      }
+      if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(flex)) {
+        return `0 0 ${flex}`;
+      }
+      return flex;
+    };
+    const colClassNames = useColClassNames(props);
+    const sizeClassNames = useSize(props);
+    const colStyle = computed(() => ({
+      flex: formatFlex(props.flex),
+      order: props.order
+    }));
+    const gutterStyle = inject("gutterStyle");
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": [ns.b(), colClassNames.value, sizeClassNames.value],
+        "style": __spreadValues(__spreadValues({}, colStyle.value), gutterStyle == null ? void 0 : gutterStyle.value)
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var index = {
+  title: "Grid \u6805\u683C",
+  category: "\u5E03\u5C40",
+  status: "100%",
+  install(app) {
+    app.component(Row.name, Row);
+    app.component(Col.name, Col);
+  }
+};
+export { Col, Row, colProps, colPropsBaseClass, colPropsBaseStyle, index as default, rowProps, screenSizes };