vue-devui 1.0.0-rc.0 → 1.0.0-rc.11

package/form/style.css

@@ -1 +1 @@
-.devui-form{position:relative}.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(0, 0, 0, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover-icon{width:16px;height:16px;margin-right:8px}.devui-popover-icon .devui-icon.devui-icon-success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover-icon .devui-icon.devui-icon-success>g>circle,.devui-popover-icon .devui-icon.devui-icon-success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover-icon .devui-icon.devui-icon-warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover-icon .devui-icon.devui-icon-info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover-icon .devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover-reference{display:inline-block}.devui-popover-content{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.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{-moz-box-flex:1;text-align:left;padding-bottom:8px;justify-content:flex-start;align-self:flex-start;margin-right:16px}.devui-form-label .devui-required{display:inline-flex;align-items:center}.devui-form-label .devui-required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form-label_sm{width:80px;min-width:80px}.devui-form-label_sd{width:100px;min-width:100px}.devui-form-label_lg{width:150px;min-width:150px}.devui-form-label_center{text-align:center}.devui-form-label_end{text-align:end}.devui-form-label-help{border-radius:50%;display:inline-flex;justify-content:center;align-items:center;position:relative;margin-left:10px}.devui-form-item{display:flex;margin-bottom:20px}.devui-form-item-vertical{flex-direction:column}.devui-form-item-columns{flex-direction:column;display:inline-block!important}.devui-column-item{margin-bottom:20px}.devui-validate-tip-horizontal{margin-left:10px}.devui-form-control{position:relative;width:100%}.devui-form-control .devui-star{color:red}.devui-form-control .devui-form-control-container{position:relative}.devui-form-control .devui-form-control-container .devui-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}.devui-form-control .devui-form-control-container .devui-radio:not(:last-child){margin-bottom:20px}.devui-form-control .devui-form-control-container-horizontal{display:flex;width:100%}.devui-form-control .devui-form-control-container-horizontal .devui-radio:not(:last-child){margin-bottom:0;margin-right:20px}.devui-form-control .devui-form-control-container-horizontal .devui-checkbox-group>div:first-child{display:flex;align-items:center}.devui-form-control .devui-form-control-container-horizontal .devui-checkbox-column-margin:not(:last-child){margin-right:20px}.devui-form-control .devui-form-control-container-horizontal .devui-validate-tip{margin:0}.devui-form-control .devui-control-content-wrapper{width:100%}.devui-form-control .devui-has-feedback{display:flex;align-items:center}.devui-form-control .devui-has-feedback input{padding-right:28px}.devui-form-control .devui-feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form-control .devui-feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form-control .devui-feedback-error input:hover{border-color:transparent!important}.devui-form-control .devui-feedback-error input:focus{border-color:transparent!important}.devui-form-control .devui-feedback-error .devui-select-arrow{right:24px!important}.devui-form-control .devui-form-control-extra-info{font-size:12px;color:#8a8e99;min-height:20px;line-height:1.5;text-align:justify}.devui-form-operation .star{color:red}.devui-validate-rules-error-pristine input{background-color:#ffeeed;border:1px solid #f66f6a}.devui-validate-rules-error-pristine input:focus{border:1px solid #f66f6a!important}.devui-validate-rules-error-pristine input:hover{border:1px solid #f66f6a!important}.devui-validate-tip{display:flex;justify-content:center;align-items:center;font-size:12px;color:#f66f6a}.devui-error input,.devui-error .devui-tags{border-color:var(--devui-danger-line, #f66f6a)!important;background-color:var(--devui-danger-bg, #ffeeed)!important}
+.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

@@ -28,15 +28,39 @@ function useKeydown(props, ctx) {
     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("devui-fullscreen");
+  targetElement.classList.add(ns.b());
   if (props.zIndex) {
     targetElement.setAttribute("style", `z-index: ${props.zIndex}`);
   }
 };
 const exitNormalFullscreen = (targetElement) => {
-  targetElement.classList.remove("devui-fullscreen");
-  targetElement.style.zIndex = null;
+  targetElement.classList.remove(ns.b());
+  targetElement.style.zIndex = "";
 };
 const launchImmersiveFullScreen = async (docElement) => {
   let fullscreenLaunch = null;
@@ -49,7 +73,7 @@ const launchImmersiveFullScreen = async (docElement) => {
   } else if (docElement.msRequestFullscreen) {
     fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
   }
-  return await fullscreenLaunch.then(() => !!document.fullscreenElement);
+  return await (fullscreenLaunch == null ? void 0 : fullscreenLaunch.then(() => !!document.fullscreenElement));
 };
 const exitImmersiveFullScreen = async (doc) => {
   let fullscreenExit = null;
@@ -62,25 +86,17 @@ const exitImmersiveFullScreen = async (doc) => {
   } else if (doc.msExitFullscreen) {
     fullscreenExit = Promise.resolve(doc.msExitFullscreen());
   }
-  return await fullscreenExit.then(() => !!document.fullscreenElement);
+  return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => !!document.fullscreenElement));
 };
 const addFullScreenStyle = () => {
-  document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html");
+  document.getElementsByTagName("html")[0].classList.add(ns.e("html"));
 };
 const removeFullScreenStyle = () => {
-  document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html");
+  document.getElementsByTagName("html")[0].classList.remove(ns.e("html"));
 };
 function useFullscreen(props, slotElement, ctx) {
   const { modelValue, mode } = toRefs(props);
   let exitByKeydown = false;
-  watch(modelValue, (newVal) => {
-    if (mode.value === "normal") {
-      handleNormalFullscreen(newVal);
-    }
-    if (mode.value === "immersive") {
-      handleImmersiveFullscreen(newVal);
-    }
-  });
   const handleNormalFullscreen = (isOpen) => {
     if (isOpen) {
       launchNormalFullscreen(slotElement.value, props);
@@ -99,6 +115,14 @@ function useFullscreen(props, slotElement, ctx) {
       }
     }
   };
+  watch(modelValue, (newVal) => {
+    if (mode.value === "normal") {
+      handleNormalFullscreen(newVal);
+    }
+    if (mode.value === "immersive") {
+      handleImmersiveFullscreen(newVal);
+    }
+  });
   const handleFullscreenChange = () => {
     if (!document.fullscreenElement) {
       ctx.emit("update:modelValue");
@@ -120,7 +144,7 @@ var Fullscreen = defineComponent({
   props: fullscreenProps,
   emits: ["update:modelValue"],
   setup(props, ctx) {
-    const slotElement = ref(null);
+    const slotElement = ref();
     useFullscreen(props, slotElement, ctx);
     useKeydown(props, ctx);
     return () => {
@@ -131,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";const d={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},m=27;function f(e,l){const{modelValue:s}=n.toRefs(e),u=o=>{o.keyCode===m&&s&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)})}const F=(e,l)=>{e.classList.add("devui-fullscreen"),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},y=e=>{e.classList.remove("devui-fullscreen"),e.style.zIndex=null},v=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=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)},h=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html")},x=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html")};function p(e,l,s){const{modelValue:u,mode:o}=n.toRefs(e);let c=!1;n.watch(u,r=>{o.value==="normal"&&C(r),o.value==="immersive"&&q(r)});const C=r=>{r?(F(l.value,e),h()):(y(l.value),x())},q=r=>{r?v(l.value):c||S(document)},a=()=>{document.fullscreenElement?c=!1:(s.emit("update:modelValue"),c=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",a)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",a)})}var z="",i=n.defineComponent({name:"DFullscreen",props:d,emits:["update:modelValue"],setup(e,l){const s=n.ref(null);return p(e,s,l),f(e,l),()=>{const u=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:s},[u])}}});i.install=function(e){e.component(i.name,i)};var w={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.use(i)}};t.Fullscreen=i,t.default=w,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 @@
-.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)}
+.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

@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   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 +33,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 +44,16 @@ const colPropsBaseClass = {
   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 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 RESULT_SCREEN = ["xxl", "xl", "lg", "md", "sm", "xs"];
 const screenMedias = {
   xs: "screen and (max-width: 575px)",
@@ -106,20 +67,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(__spreadValues({}, screen));
+  });
 }
 function register() {
   Object.keys(screenMedias).forEach((key) => {
@@ -139,6 +90,15 @@ function register() {
     };
   });
 }
+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];
@@ -146,13 +106,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 +144,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 +197,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 +246,7 @@ var Col = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("col");
     const formatFlex = (flex) => {
       if (typeof flex === "number") {
         return `${flex} ${flex} auto`;
@@ -245,25 +266,19 @@ 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": __spreadValues(__spreadValues({}, 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 };

package/grid/index.umd.js

@@ -1 +1 @@
-var X=Object.defineProperty;var L=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var M=(u,t,i)=>t in u?X(u,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):u[t]=i,l=(u,t)=>{for(var i in t||(t={}))q.call(t,i)&&M(u,i,t[i]);if(L)for(var i of L(t))H.call(t,i)&&M(u,i,t[i]);return u};(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";const i={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},m=[Number,Object],E={xs:m,sm:m,md:m,lg:m,xl:m,xxl:m},g=Number,T={flex:[String,Number],order:g},N={offset:g,pull:g,push:g,span:g},A=l(l(l({},T),N),E),d="devui-col";function p(e,n){return n!==void 0?` ${e}-${n}`:""}function _(e){return t.computed(()=>{const n=p(`${d}-span`,e.span),o=p(`${d}-offset`,e.offset),c=p(`${d}-pull`,e.pull),a=p(`${d}-push`,e.push);return`${n}${o}${c}${a}`})}function w(e){return` ${e.trim()}${e&&" "}`}function z(e){const n=Object.keys(e).filter(o=>o in E);return t.computed(()=>n.reduce((o,c)=>{const a=typeof e[c];if(a==="number")o=`${w(o)}${d}-${c}-span-${e[c]}`;else if(a==="object"){const s=Object.keys(e[c]).filter(r=>r in N).reduce((r,f)=>typeof e[c][f]!="number"?"":(r=`${w(r)}${d}-${c}-${f}-${e[c][f]}`,r),"");o=`${w(o)}${s}`}return o},""))}const B=["xxl","xl","lg","md","sm","xs"],j={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)"},$=new Map;let v=-1;const C={},P={};function F(e){return $.size||V(),v+=1,$.set(v,e),e(l({},C)),v}function U(e){$.delete(e),$.size===0&&D()}function V(){Object.keys(j).forEach(e=>{const n=window.matchMedia(j[e]);n.matches&&(C[e]=!0,R());const o=c=>{C[e]=c.matches,R()};n.addEventListener("change",o),P[e]={res:n,listener:o}})}function D(){Object.keys(j).forEach(e=>{const n=P[e];n.res.removeEventListener("change",n.listener)}),$.clear()}function R(){$.forEach(e=>{e(l({},C))})}var J="";const h="devui-row";var y=t.defineComponent({name:"DRow",props:i,emits:[],setup(e,{slots:n}){const o=t.ref({}),c=t.computed(()=>{const s=p(`${h}-align`,e.align),r=p(`${h}-justify`,e.justify),f=e.wrap?` ${h}-wrap`:"";return`${s}${r}${f}`});let a;t.onMounted(()=>{a=F(s=>{o.value=s})}),t.onUnmounted(()=>{U(a)});const x=t.computed(()=>{if(!e.gutter)return{};let s=[0,0];Array.isArray(e.gutter)?s=e.gutter:typeof e.gutter=="number"?s=[e.gutter,0]:B.some(O=>{const S=e.gutter[O];return o.value[O]&&S?(typeof S=="number"?s=[S,0]:s=S,!0):!1});const r=`${(s[0]||0)/2}px`,f=`${(s[0]||0)/2}px`,I=`${(s[1]||0)/2}px`,K=`${(s[1]||0)/2}px`;return{paddingLeft:r,paddingRight:f,paddingTop:I,paddingBottom:K}});return t.provide("gutterStyle",x),()=>{var s;return t.createVNode("div",{class:`${h}${c.value}`},[(s=n.default)==null?void 0:s.call(n)])}}}),Q="",b=t.defineComponent({name:"DCol",props:A,setup(e,{slots:n}){const o=r=>typeof r=="number"?`${r} ${r} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(r)?`0 0 ${r}`:r,c=_(e),a=z(e),x=t.computed(()=>({flex:o(e.flex),order:e.order})),s=t.inject("gutterStyle");return()=>{var r;return t.createVNode("div",{class:`${d}${c.value}${a.value}`,style:l(l({},x.value),s.value)},[(r=n.default)==null?void 0:r.call(n)])}}});y.install=function(e){e.component(y.name,y)},b.install=function(e){e.component(b.name,b)};var G={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.use(b),e.use(y)}};u.Col=b,u.Row=y,u.default=G,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
+var I=Object.defineProperty;var _=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var L=(s,n,i)=>n in s?I(s,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[n]=i,a=(s,n)=>{for(var i in n||(n={}))J.call(n,i)&&L(s,i,n[i]);if(_)for(var i of _(n))Q.call(n,i)&&L(s,i,n[i]);return s};(function(s,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(s=typeof globalThis!="undefined"?globalThis:s||self,n(s.index={},s.Vue))})(this,function(s,n){"use strict";const i={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},b=Number,B={flex:[String,Number],order:b},w={offset:b,pull:b,push:b,span:b},d=[Number,Object],x={xs:d,sm:d,md:d,lg:d,xl:d,xxl:d},O=a(a(a({},B),w),x),A=["xxl","xl","lg","md","sm","xs"],C={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)"},f=new Map;let j=-1;const y={},R={};function z(){f.forEach(e=>{e(a({},y))})}function U(){Object.keys(C).forEach(e=>{const c=window.matchMedia(C[e]);c.matches&&(y[e]=!0,z());const r=u=>{y[e]=u.matches,z()};c.addEventListener("change",r),R[e]={res:c,listener:r}})}function V(e){return f.size||U(),j+=1,f.set(j,e),e(a({},y)),j}function D(){Object.keys(C).forEach(e=>{const c=R[e];c.res.removeEventListener("change",c.listener)}),f.clear()}function G(e){f.delete(e),f.size===0&&D()}function h(e,c,r){let u=e;return c&&(u+=`__${c}`),r&&(u+=`--${r}`),u}function N(e,c=!1){const r=c?`.devui-${e}`:`devui-${e}`;return{b:()=>h(r),e:t=>t?h(r,t):"",m:t=>t?h(r,"",t):"",em:(t,o)=>t&&o?h(r,t,o):""}}var W="",v=n.defineComponent({name:"DRow",props:i,emits:[],setup(e,{slots:c}){const r=n.ref({}),u=N("row"),l=n.computed(()=>({[u.em("align",e.align)]:!0,[u.em("justify",e.justify)]:!0,[u.e("wrap")]:e.wrap}));let p;n.onMounted(()=>{p=V(t=>{r.value=t})}),n.onUnmounted(()=>{G(p)});const g=n.computed(()=>{if(!e.gutter)return{};let t=[0,0];Array.isArray(e.gutter)?t=e.gutter:typeof e.gutter=="number"?t=[e.gutter,0]:A.some(T=>{const $=e.gutter[T];return r.value[T]&&$?(typeof $=="number"?t=[$,0]:t=$,!0):!1});const o=`${(t[0]||0)/2}px`,M=`${(t[0]||0)/2}px`,S=`${(t[1]||0)/2}px`,H=`${(t[1]||0)/2}px`;return{paddingLeft:o,paddingRight:M,paddingTop:S,paddingBottom:H}});return n.provide("gutterStyle",g),()=>{var t;return n.createVNode("div",{class:[u.b(),l.value]},[(t=c.default)==null?void 0:t.call(c)])}}});const m=N("col");function K(e){return n.computed(()=>({[m.em("span",e.span?String(e.span):"")]:!0,[m.em("offset",e.offset?String(e.offset):"")]:!0,[m.em("pull",e.pull?String(e.pull):"")]:!0,[m.em("push",e.push?String(e.push):"")]:!0}))}function P(e){return` ${e.trim()}${e&&" "}`}function q(e){const c=Object.keys(e).filter(r=>r in x);return n.computed(()=>c.reduce((r,u)=>{const l=typeof e[u];if(l==="number")r=`${P(r)}${m.em(u,`span-${e[u]}`)}`;else if(l==="object"){const g=Object.keys(e[u]).filter(t=>t in w).reduce((t,o)=>{const S=e[u][o];return typeof S!="number"?"":(t=`${P(t)}${m.em(u,`${o}-${S}`)}`,t)},"");r=`${P(r)}${g}`}return r},""))}var X="",E=n.defineComponent({name:"DCol",props:O,setup(e,{slots:c}){const r=N("col"),u=o=>typeof o=="number"?`${o} ${o} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(o)?`0 0 ${o}`:o,l=K(e),p=q(e),g=n.computed(()=>({flex:u(e.flex),order:e.order})),t=n.inject("gutterStyle");return()=>{var o;return n.createVNode("div",{class:[r.b(),l.value,p.value],style:a(a({},g.value),t==null?void 0:t.value)},[(o=c.default)==null?void 0:o.call(c)])}}}),F={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(v.name,v),e.component(E.name,E)}};s.Col=E,s.Row=v,s.colProps=O,s.colPropsBaseClass=w,s.colPropsBaseStyle=B,s.default=F,s.rowProps=i,s.screenSizes=x,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});