@web-utils/component 2.8.30 → 2.9.0

package/custom-scrollbar/index.mjs

@@ -1,93 +1,42 @@
-var c = Object.defineProperty, h = Object.defineProperties;
-var d = Object.getOwnPropertyDescriptors;
-var o = Object.getOwnPropertySymbols;
-var v = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
-var l = (t, e, s) => e in t ? c(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, i = (t, e) => {
-  for (var s in e || (e = {}))
-    v.call(e, s) && l(t, s, e[s]);
-  if (o)
-    for (var s of o(e))
-      p.call(e, s) && l(t, s, e[s]);
-  return t;
-}, a = (t, e) => h(t, d(e));
-import r from "overlayscrollbars";
-import "overlayscrollbars/css/OverlayScrollbars.css";
-import { n as f } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var u = function() {
-  var t = this, e = t.$createElement, s = t._self._c || e;
-  return s("div", {
-    staticClass: "os-host"
-  }, [s("div", {
-    staticClass: "os-resize-observer-host"
-  }), s("div", {
-    staticClass: "os-padding"
-  }, [s("div", {
-    ref: "viewport",
-    staticClass: "os-viewport"
-  }, [s("div", {
-    ref: "content",
-    staticClass: "os-content"
-  }, [t._t("default")], 2)])]), t._m(0), t._m(1), s("div", {
-    staticClass: "os-scrollbar-corner"
-  })]);
-}, m = [function() {
-  var t = this, e = t.$createElement, s = t._self._c || e;
-  return s("div", {
-    staticClass: "os-scrollbar os-scrollbar-horizontal "
-  }, [s("div", {
-    staticClass: "os-scrollbar-track"
-  }, [s("div", {
-    staticClass: "os-scrollbar-handle"
-  })])]);
-}, function() {
-  var t = this, e = t.$createElement, s = t._self._c || e;
-  return s("div", {
-    staticClass: "os-scrollbar os-scrollbar-vertical"
-  }, [s("div", {
-    staticClass: "os-scrollbar-track"
-  }, [s("div", {
-    staticClass: "os-scrollbar-handle"
-  })])]);
-}];
-const _ = {
+import "overlayscrollbars/overlayscrollbars.css";
+import { OverlayScrollbars as r } from "overlayscrollbars";
+import c from "lodash/defaults";
+import { n as a } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var h = function() {
+  var t = this, e = t.$createElement, o = t._self._c || e;
+  return o(t.element, {
+    tag: "Component"
+  }, [t._t("default")], 2);
+}, p = [];
+const u = {
   name: "CustomScrollbar",
   props: {
-    options: {
-      type: Object,
-      default: void 0
-    },
-    extensions: {
-      type: [String, Array, Object],
-      default: void 0
+    element: {
+      type: String,
+      default: "div"
     },
+    options: Object,
     theme: {
       type: String,
-      default: void 0
-    },
-    onLoadMore: {
-      type: Function,
-      default: null
-    },
-    onScroll: {
-      type: Function
-    },
-    reverse: {
-      type: Boolean,
-      default: !1
+      default: "os-theme-dark"
     },
-    textarea: {
-      type: Boolean,
-      default: !1
-    }
+    onLoadMore: Function,
+    onScroll: Function,
+    reverse: Boolean
+  },
+  data() {
+    return {
+      scrollTop: 0
+    };
   },
   computed: {
     innerOptions() {
-      const t = this.options || {};
-      return a(i({}, t), {
-        className: this.theme || "os-theme-dark",
-        scrollbars: { autoHide: "l", autoHideDelay: 100 },
-        callbacks: { onScroll: this.internalScroll }
-      });
+      return c(
+        {
+          scrollbars: { autoHide: "leave", autoHideDelay: 100, theme: this.theme }
+        },
+        this.options
+      );
     }
   },
   watch: {
@@ -97,71 +46,71 @@ const _ = {
     }
   },
   mounted() {
-    this.viewport = this.$refs.viewport, this.scroller = r(
-      this.getContentWrapper(),
-      this.options || {
-        className: this.theme || "os-theme-dark",
-        scrollbars: { autoHide: "l", autoHideDelay: 100 },
-        callbacks: { onScroll: this.internalScroll }
-      },
-      this.extensions
+    this.scroller = r(
+      this.$el,
+      this.innerOptions,
+      {
+        scroll: this.internalScroll,
+        initialized: this.initialized
+      }
     );
   },
   activated() {
     var t;
-    this.$refs.viewport.scrollTop = (t = this.scrollOffset) != null ? t : 0;
+    this.viewport.scrollTop = (t = this.scrollTop) != null ? t : 0;
   },
   deactivated() {
-    this.scrollOffset = this.$refs.viewport.scrollTop;
+    this.scrollTop = this.viewport.scrollTop;
   },
   beforeDestroy() {
     const t = this.scroller;
     r.valid(t) && (t.destroy(), this.scroller = null);
   },
   methods: {
+    initialized(t) {
+      const { viewport: e } = t.elements();
+      this.viewport = e;
+    },
     scrollBottom() {
-      this.$refs.viewport.scrollTop = this.$refs.viewport.scrollHeight;
+      this.viewport.scrollTop = this.viewport.scrollHeight;
     },
     getScroller() {
       return this.scroller;
     },
     getScrollHeight() {
-      return this.$refs.viewport.scrollHeight;
+      return this.viewport.scrollHeight;
     },
     setScrollTop(t) {
-      this.$refs.viewport.scrollTop = t;
-    },
-    getContentWrapper() {
-      return this.textarea ? this.$refs.content.querySelector("textarea") : this.$el;
+      this.viewport.scrollTop = t;
     },
-    internalScroll(t) {
-      this.onScroll && this.onScroll(t);
-      const e = t.target;
-      if (!this.reverse && Math.ceil(e.clientHeight + e.scrollTop) >= e.scrollHeight) {
-        this.onLoadMore && this.onLoadMore();
+    internalScroll(t, e) {
+      var l, i, s;
+      const o = this.viewport;
+      if ((l = this.onScroll) == null || l.call(this, e), !this.reverse && Math.ceil(o.clientHeight + o.scrollTop) >= o.scrollHeight) {
+        (i = this.onLoadMore) == null || i.call(this);
         return;
       }
-      this.reverse && e.scrollTop === 0 && this.onLoadMore && this.onLoadMore();
+      this.reverse && o.scrollTop === 0 && ((s = this.onLoadMore) == null || s.call(this));
     }
   }
 }, n = {};
-var b = /* @__PURE__ */ f(
-  _,
+var d = /* @__PURE__ */ a(
   u,
-  m,
+  h,
+  p,
   !1,
-  S,
+  v,
   null,
   null,
   null
 );
-function S(t) {
+function v(t) {
   for (let e in n)
     this[e] = n[e];
 }
-const w = /* @__PURE__ */ function() {
-  return b.exports;
+const g = /* @__PURE__ */ function() {
+  return d.exports;
 }();
 export {
-  w as default
+  g as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/component",
   "description": "Web Components",
-  "version": "2.8.30",
+  "version": "2.9.0",
   "author": "Simple",
   "license": "MIT",
   "type": "module",
@@ -13,5 +13,10 @@
     },
     "./*": "./*"
   },
-  "web-types": "web-types.json"
+  "web-types": "web-types.json",
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "*.sass"
+  ]
 }

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@web-utils/component",
-  "version": "2.8.30",
+  "version": "2.9.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1027,20 +1027,20 @@
           "description": "",
           "attributes": [
             {
-              "name": "options",
+              "name": "element",
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "string"
               },
-              "default": "undefined"
+              "default": "'div'"
             },
             {
-              "name": "extensions",
+              "name": "options",
               "value": {
                 "kind": "expression",
-                "type": "string|array|object"
+                "type": "object"
               },
-              "default": "undefined"
+              "default": ""
             },
             {
               "name": "theme",
@@ -1048,7 +1048,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "undefined"
+              "default": "'os-theme-dark'"
             },
             {
               "name": "onLoadMore",
@@ -1056,7 +1056,7 @@
                 "kind": "expression",
                 "type": "func"
               },
-              "default": "null"
+              "default": ""
             },
             {
               "name": "onScroll",
@@ -1072,15 +1072,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "false"
-            },
-            {
-              "name": "textarea",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+              "default": ""
             }
           ],
           "slots": [