vueless 0.0.14 → 0.0.16

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -966,7 +966,7 @@
               "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "left"
             },
@@ -3225,13 +3225,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
-              "description": "Show label outside the input block.",
+              "name": "labelAlign",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "placeholder",
@@ -3425,13 +3425,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
+              "name": "labelAlign",
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "files",
@@ -3888,13 +3888,13 @@
               "default": "false"
             },
             {
-              "name": "labelOutside",
+              "name": "labelAlign",
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "error",
@@ -4137,7 +4137,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top' | 'topWithDesc' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "top"
             },
@@ -4443,15 +4443,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "zIndex",
-              "description": "The z-list of the loader stripe.",
-              "value": {
-                "kind": "expression",
-                "type": "'auto' | '50' | '100'"
-              },
-              "default": "\"auto\""
-            },
             {
               "name": "position",
               "description": "Loader position.",
@@ -4459,7 +4450,7 @@
                 "kind": "expression",
                 "type": "'fixed' | 'absolute' | 'relative'"
               },
-              "default": "\"fixed\""
+              "default": "fixed"
             },
             {
               "name": "color",
@@ -4468,11 +4459,11 @@
                 "kind": "expression",
                 "type": "'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'violet' | 'fuchsia'"
               },
-              "default": "globalComponentConfig.ULoaderTop?.color"
+              "default": "blue"
             }
           ],
           "source": {
-            "module": "/src/ui.loader-top/index.vue",
+            "module": "/src/ui.other-loader-top/index.vue",
             "symbol": "default"
           }
         },
@@ -5401,7 +5392,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "UIService.get(defaultConfig, URadio).default.labelAlign"
             },
@@ -5453,10 +5444,13 @@
           ],
           "events": [
             {
-              "name": "update:value"
+              "name": "update:modelValue"
             }
           ],
           "slots": [
+            {
+              "name": "default"
+            },
             {
               "name": "footer"
             }
@@ -5534,6 +5528,14 @@
               },
               "default": "() => getRandomId()"
             },
+            {
+              "name": "labelAlign",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "top"
+            },
             {
               "name": "config",
               "description": "Sets component ui config object.",
@@ -5754,13 +5756,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
-              "description": "Show label outside the select block.",
+              "name": "labelAlign",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "placeholder",
@@ -6097,7 +6099,7 @@
               "description": "Label alignment.",
               "value": {
                 "kind": "expression",
-                "type": "'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "left"
             },
@@ -6665,10 +6667,10 @@
             },
             {
               "name": "labelAlign",
-              "description": "Input label place (above the input box or inside of it).",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -7004,104 +7006,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "VueTopprogress",
-          "description": "",
-          "attributes": [
-            {
-              "name": "speed",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "150"
-            },
-            {
-              "name": "color",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"#29d\""
-            },
-            {
-              "name": "colorShadow",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "errorColor",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"#f44336\""
-            },
-            {
-              "name": "trickle",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "trickleSpeed",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "100"
-            },
-            {
-              "name": "easing",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"linear\""
-            },
-            {
-              "name": "height",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "3"
-            },
-            {
-              "name": "minimum",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "0.8"
-            },
-            {
-              "name": "maximum",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "97.5"
-            },
-            {
-              "name": "zIndex",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "9999"
-            }
-          ],
-          "source": {
-            "module": "/src/ui.loader-top/components/TopProgress.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "YearView",
           "description": "",

package/ui.loader-top/components/TopProgress.vue

@@ -1,277 +0,0 @@
-<template>
-  <transition :css="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
-    <div v-if="show" class="top-progress" :style="barStyle">
-      <div class="peg" :style="pegStyle"></div>
-    </div>
-  </transition>
-</template>
-
-<script>
-function clamp(n, min, max) {
-  if (n < min) {
-    return min;
-  }
-
-  if (n > max) {
-    return max;
-  }
-
-  return n;
-}
-
-let queue = (() => {
-  let pending = [];
-
-  function next() {
-    let fn = pending.shift();
-
-    if (fn) {
-      fn(next);
-    }
-  }
-
-  return (fn) => {
-    pending.push(fn);
-
-    if (pending.length === 1) {
-      next();
-    }
-  };
-})();
-
-export default {
-  name: "VueTopprogress",
-
-  props: {
-    speed: {
-      type: Number,
-      default: 150,
-    },
-
-    color: {
-      type: String,
-      default: "#29d",
-    },
-
-    colorShadow: {
-      type: String,
-      default: "",
-    },
-
-    errorColor: {
-      type: String,
-      default: "#f44336",
-    },
-
-    trickle: {
-      type: Boolean,
-      default: true,
-    },
-
-    trickleSpeed: {
-      type: Number,
-      default: 100,
-    },
-
-    easing: {
-      type: String,
-      default: "linear",
-    },
-
-    height: {
-      type: Number,
-      default: 3,
-    },
-
-    minimum: {
-      type: Number,
-      default: 0.8,
-    },
-
-    maximum: {
-      type: Number,
-      default: 97.5,
-    },
-
-    zIndex: {
-      type: Number,
-      default: 9999,
-    },
-  },
-
-  data() {
-    return {
-      error: false,
-      show: false,
-      progress: 0,
-      opacity: 1,
-      status: null,
-      isPaused: false,
-    };
-  },
-
-  computed: {
-    progressColor() {
-      return this.error ? this.errorColor : this.color;
-    },
-
-    isStarted() {
-      return typeof this.status === "number";
-    },
-
-    boxShadow() {
-      return this.colorShadow || this.progressColor;
-    },
-
-    barStyle() {
-      return {
-        position: "fixed",
-        top: "0",
-        left: "0",
-        right: "0",
-        width: `${this.progress}%`,
-        height: `${this.height}px`,
-        backgroundColor: this.progressColor,
-        transition: `all ${this.speed}ms ${this.easing}`,
-        opacity: `${this.opacity}`,
-        zIndex: `${this.zIndex}`,
-      };
-    },
-
-    pegStyle() {
-      return {
-        display: "block",
-        position: "absolute",
-        right: "0",
-        width: "100px",
-        height: "100%",
-        opacity: this.progress ? "1" : "0",
-        boxShadow: `0 0 10px ${this.boxShadow}, 0 0 5px ${this.boxShadow}`,
-        transform: "rotate(3deg) translate(0px, -4px)",
-      };
-    },
-  },
-
-  methods: {
-    beforeEnter() {
-      this.opacity = 0;
-      this.progress = 0;
-      this.width = 0;
-    },
-
-    enter(el, done) {
-      this.opacity = 1;
-      done();
-    },
-
-    afterEnter() {
-      this._runStart();
-    },
-
-    _work() {
-      setTimeout(() => {
-        if (!this.isStarted || this.isPaused) {
-          return;
-        }
-
-        this.increase();
-        this._work();
-      }, this.trickleSpeed);
-    },
-
-    _runStart() {
-      this.status = this.progress === 100 ? null : this.progress;
-
-      if (this.trickle) {
-        this._work();
-      }
-    },
-
-    start() {
-      this.isPaused = false;
-
-      if (this.show) {
-        this._runStart();
-      } else {
-        this.show = true;
-      }
-    },
-
-    set(amount) {
-      this.isPaused = false;
-
-      let o;
-
-      if (this.isStarted) {
-        o = amount < this.progress ? clamp(amount, 0, 100) : clamp(amount, this.minimum, 100);
-      } else {
-        o = 0;
-      }
-
-      this.status = o === 100 ? null : o;
-
-      queue((next) => {
-        this.progress = o;
-
-        if (o === 100) {
-          setTimeout(() => {
-            this.opacity = 0;
-            setTimeout(() => {
-              this.show = false;
-              this.error = false;
-              next();
-            }, this.speed);
-          }, this.speed);
-        } else {
-          setTimeout(next, this.speed);
-        }
-      });
-    },
-
-    increase(amount) {
-      let o = this.progress;
-
-      if (o < 100 && typeof amount !== "number") {
-        if (o >= 0 && o < 25) {
-          amount = Math.random() * 3 + 3;
-        } else if (o >= 25 && o < 50) {
-          amount = Math.random() * 3;
-        } else if (o >= 50 && o < 85) {
-          amount = Math.random() * 2;
-        } else if (o >= 85 && o < 99) {
-          amount = 0.5;
-        } else {
-          amount = 0;
-        }
-      }
-
-      this.set(clamp(o + amount, 0, this.maximum));
-    },
-
-    decrease(amount) {
-      if (this.progress === 0) {
-        return;
-      }
-
-      this.increase(-amount);
-    },
-
-    done() {
-      this.set(100);
-    },
-
-    getProgress() {
-      return this.status ? this.progress : 0;
-    },
-
-    pause() {
-      this.isPaused = true;
-    },
-
-    fail() {
-      this.error = true;
-      this.done();
-    },
-  },
-};
-</script>