zartui 3.2.0 → 3.2.2

package/lib/tabs/Tabs.js

@@ -44,6 +44,7 @@ var import_use_visibility_change = require("../composables/use-visibility-change
 var import_sticky = require("../sticky");
 var import_TabsTitle = __toESM(require("./TabsTitle"));
 var import_TabsContent = __toESM(require("./TabsContent"));
+var import_icon = require("../icon");
 const [name, bem] = (0, import_utils.createNamespace)("tabs");
 const tabsProps = {
   type: (0, import_utils.makeStringProp)("line"),
@@ -83,6 +84,8 @@ var stdin_default = (0, import_vue.defineComponent)({
     const navRef = (0, import_vue.ref)();
     const wrapRef = (0, import_vue.ref)();
     const navTopRef = (0, import_vue.ref)();
+    const leftIndicatorRef = (0, import_vue.ref)();
+    const rightIndicatorRef = (0, import_vue.ref)();
     const id = (0, import_use_id.useId)();
     const scroller = (0, import_use.useScrollParent)(root);
     const [titleRefs, setTitleRefs] = (0, import_use_refs.useRefs)();
@@ -99,9 +102,27 @@ var stdin_default = (0, import_vue.defineComponent)({
       showRightOverlay: false
     });
     const scrollable = (0, import_vue.computed)(() => children.length > +props.swipeThreshold || !props.ellipsis || props.shrink);
+    const leftIndicatorRefWidth = (0, import_vue.computed)(() => {
+      if (state.showLeftOverlay) {
+        const leftIndicator = leftIndicatorRef.value;
+        return leftIndicator ? leftIndicator.offsetWidth : 0;
+      } else {
+        return 0;
+      }
+    });
+    const rightIndicatorRefWidth = (0, import_vue.computed)(() => {
+      if (state.showRightOverlay) {
+        const rightIndicator = rightIndicatorRef.value;
+        return rightIndicator ? rightIndicator.offsetWidth : 0;
+      } else {
+        return 0;
+      }
+    });
     const navStyle = (0, import_vue.computed)(() => ({
       borderColor: props.color,
-      background: props.background
+      background: props.background,
+      marginLeft: leftIndicatorRefWidth ? leftIndicatorRefWidth + "px" : "0",
+      marginRight: rightIndicatorRefWidth ? rightIndicatorRefWidth + "px" : "0"
     }));
     const getTabName = (tab, index) => {
       var _a;
@@ -293,6 +314,30 @@ var stdin_default = (0, import_vue.defineComponent)({
         }, null);
       }
     };
+    const renderIndicatorLeft = () => {
+      if (state.showLeftOverlay) {
+        return (0, import_vue.createVNode)("div", {
+          "ref": leftIndicatorRef,
+          "class": bem("indicator-left")
+        }, [(0, import_vue.createVNode)(import_icon.Icon, {
+          "name": "back",
+          "size": "16",
+          "class": bem("icon-indicator-left")
+        }, null)]);
+      }
+    };
+    const renderIndicatorRight = () => {
+      if (state.showRightOverlay) {
+        return (0, import_vue.createVNode)("div", {
+          "ref": rightIndicatorRef,
+          "class": bem("indicator-right")
+        }, [(0, import_vue.createVNode)(import_icon.Icon, {
+          "name": "arrow-right",
+          "size": "16",
+          "class": bem("icon-indicator-right")
+        }, null)]);
+      }
+    };
     const renderOverlayLeft = () => {
       if (state.showLeftOverlay) {
         return (0, import_vue.createVNode)("div", {
@@ -328,7 +373,7 @@ var stdin_default = (0, import_vue.defineComponent)({
         "style": navStyle.value,
         "aria-orientation": "horizontal",
         "onScroll": onScrollHeader
-      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)]), scrollable.value ? renderOverlayLeft() : null, scrollable.value ? renderOverlayRight() : null]);
+      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)]), scrollable.value ? renderIndicatorLeft() : null, scrollable.value ? renderIndicatorRight() : null, scrollable.value ? renderOverlayLeft() : null, scrollable.value ? renderOverlayRight() : null]);
     };
     (0, import_vue.watch)([() => props.color, import_utils.windowWidth], setLine);
     (0, import_vue.watch)(() => props.active, (value) => {

package/lib/tabs/index.css

@@ -1 +1 @@
-:root{--zt-tab-active-text-color: var(--zt-text-color);--zt-tab-disabled-text-color: var(--zt-text-color-3);--zt-tab-active-opacity: .2;--zt-tabs-default-color: var(--zt-primary-color);--zt-tabs-line-height: 44px;--zt-tabs-line-bottom: 16px;--zt-tabs-card-height: 32px;--zt-tabs-bottom-bar-width: 12px;--zt-tabs-bottom-bar-height: 2px;--zt-tabs-bottom-bar-color: var(--zt-primary-color);--zt-tabs-bottom-bar-radius: 2px;--zt-tabs-nav-background: var(--zt-background);--zt-tab-text-color: var(--zt-gray-40);--zt-tabs-overlay-left-background: linear-gradient(90deg, #ffffff 0%, rgba(245, 250, 255, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)}.zt-tab{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--zt-padding-md);color:var(--zt-tab-text-color);font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-md);cursor:pointer}.zt-tab--active{color:var(--zt-tab-active-text-color);font-weight:var(--zt-font-bold)}.zt-tab--active:active{opacity:var(--zt-tab-active-opacity)}.zt-tab--disabled{color:var(--zt-tab-disabled-text-color);cursor:not-allowed;font-size:var(--zt-font-size-md)}.zt-tab--grow{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tab--shrink{flex:none;padding:0 var(--zt-padding-xs)}.zt-tab--card{color:var(--zt-tabs-default-color)}.zt-tab--card.zt-tab--active{color:var(--zt-white);background-color:var(--zt-tabs-default-color)}.zt-tab--card--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tab__title{flex:1;display:flex;align-items:center;justify-content:center}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tab__text-wrapper,.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden;position:relative}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__overlay-left,.zt-tabs__overlay-right{position:absolute;top:0;width:var(--zt-tabs-line-height);height:var(--zt-tabs-line-height);pointer-events:none}.zt-tabs__overlay-left{left:0;background:var(--zt-tabs-overlay-left-background)}.zt-tabs__overlay-right{right:0;background:var(--zt-tabs-overlay-right-background)}.zt-tabs__nav{position:relative;display:flex;justify-content:flex-start;background-color:var(--zt-tabs-nav-background);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--complete::-webkit-scrollbar{display:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:var(--zt-tabs-line-bottom)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tab,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tab{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav::-webkit-scrollbar,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav::-webkit-scrollbar{display:none}.zt-tabs__nav--card.zt-tabs__nav--shrink{display:inline-flex}.zt-tabs__line{position:absolute;bottom:var(--zt-tabs-line-bottom);left:0;z-index:1;width:var(--zt-tabs-bottom-bar-width);height:var(--zt-tabs-bottom-bar-height);background:var(--zt-tabs-bottom-bar-color);border-radius:var(--zt-tabs-bottom-bar-radius)}.zt-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:var(--zt-tabs-line-height)}.zt-tabs--card>.zt-tabs__wrap{height:var(--zt-tabs-card-height);display:flex;justify-content:center}.zt-theme-dark{--zt-tabs-overlay-left-background: linear-gradient(90deg, #0f1923 0%, rgba(15, 25, 35, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(15, 25, 35, 0) 3%, #0f1923 100%)}
+:root{--zt-tab-active-text-color: var(--zt-text-color);--zt-tab-disabled-text-color: var(--zt-text-color-3);--zt-tab-active-opacity: .2;--zt-tabs-default-color: var(--zt-primary-color);--zt-tabs-line-height: 44px;--zt-tabs-line-bottom: 16px;--zt-tabs-card-height: 32px;--zt-tabs-bottom-bar-width: 12px;--zt-tabs-bottom-bar-height: 2px;--zt-tabs-bottom-bar-color: var(--zt-primary-color);--zt-tabs-bottom-bar-radius: 2px;--zt-tabs-nav-background: var(--zt-background);--zt-tab-text-color: var(--zt-gray-40);--zt-tabs-overlay-left-background: linear-gradient(90deg, #ffffff 0%, rgba(245, 250, 255, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)}.zt-tab{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--zt-padding-md);color:var(--zt-tab-text-color);font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-md);cursor:pointer}.zt-tab--active{color:var(--zt-tab-active-text-color);font-weight:var(--zt-font-bold)}.zt-tab--active:active{opacity:var(--zt-tab-active-opacity)}.zt-tab--disabled{color:var(--zt-tab-disabled-text-color);cursor:not-allowed;font-size:var(--zt-font-size-md)}.zt-tab--grow{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tab--shrink{flex:none;padding:0 var(--zt-padding-xs)}.zt-tab--card{color:var(--zt-tabs-default-color)}.zt-tab--card.zt-tab--active{color:var(--zt-white);background-color:var(--zt-tabs-default-color)}.zt-tab--card--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tab__title{flex:1;display:flex;align-items:center;justify-content:center}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tab__text-wrapper,.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden;position:relative}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__overlay-left,.zt-tabs__overlay-right{position:absolute;top:0;width:var(--zt-tabs-line-height);height:var(--zt-tabs-line-height);pointer-events:none}.zt-tabs__overlay-left{left:0;background:var(--zt-tabs-overlay-left-background)}.zt-tabs__overlay-right{right:0;background:var(--zt-tabs-overlay-right-background)}.zt-tabs__indicator-left{position:absolute;left:0;top:0;width:35px;height:44px;background:var(--zt-tabs-nav-background)}.zt-tabs__indicator-right{position:absolute;right:0;top:0;width:35px;height:44px;background:var(--zt-tabs-nav-background)}.zt-tabs__icon-indicator-left{position:absolute;top:12px;left:12px;color:var(--zt-gray-40)}.zt-tabs__icon-indicator-right{position:absolute;top:12px;right:12px;color:var(--zt-gray-40)}.zt-tabs__nav{position:relative;display:flex;justify-content:flex-start;background-color:var(--zt-tabs-nav-background);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--complete::-webkit-scrollbar{display:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:var(--zt-tabs-line-bottom)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tab,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tab{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav::-webkit-scrollbar,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav::-webkit-scrollbar{display:none}.zt-tabs__nav--card.zt-tabs__nav--shrink{display:inline-flex}.zt-tabs__line{position:absolute;bottom:var(--zt-tabs-line-bottom);left:0;z-index:1;width:var(--zt-tabs-bottom-bar-width);height:var(--zt-tabs-bottom-bar-height);background:var(--zt-tabs-bottom-bar-color);border-radius:var(--zt-tabs-bottom-bar-radius)}.zt-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:var(--zt-tabs-line-height)}.zt-tabs--card>.zt-tabs__wrap{height:var(--zt-tabs-card-height);display:flex;justify-content:center}.zt-theme-dark{--zt-tabs-overlay-left-background: linear-gradient(90deg, #0f1923 0%, rgba(15, 25, 35, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(15, 25, 35, 0) 3%, #0f1923 100%)}

package/lib/tabs/style/index.js

@@ -1,5 +1,6 @@
 require("../../style/base.css");
 require("../../badge/index.css");
+require("../../icon/index.css");
 require("../../sticky/index.css");
 require("../../swipe/index.css");
 require("../index.css");

package/lib/time-picker/TimePicker.d.ts

@@ -30,6 +30,10 @@ export declare const timePickerProps: {
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -117,6 +121,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -202,6 +210,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/lib/time-picker/index.d.ts

@@ -28,6 +28,10 @@ export declare const TimePicker: import("../utils").WithInstall<import("vue").De
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -113,6 +117,10 @@ export declare const TimePicker: import("../utils").WithInstall<import("vue").De
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/lib/vue-sfc-shim.d.ts

@@ -1,6 +1,6 @@
-declare module '*.vue' {
-  // eslint-disable-next-line
-  import { DefineComponent } from 'vue';
-  const Component: DefineComponent;
-  export default Component;
-}
+declare module '*.vue' {
+  // eslint-disable-next-line
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent;
+  export default Component;
+}

package/lib/vue-tsx-shim.d.ts

@@ -1,23 +1,23 @@
-import 'vue';
-
-type EventHandler = (...args: any[]) => void;
-
-declare module 'vue' {
-  interface ComponentCustomProps {
-    id?: string;
-    role?: string;
-    tabindex?: number;
-    onClick?: EventHandler;
-    onTouchend?: EventHandler;
-    onTouchmove?: EventHandler;
-    onTouchstart?: EventHandler;
-    onTouchcancel?: EventHandler;
-    onTouchmovePassive?: EventHandler;
-    onTouchstartPassive?: EventHandler;
-  }
-
-  interface HTMLAttributes {
-    onTouchmovePassive?: EventHandler;
-    onTouchstartPassive?: EventHandler;
-  }
-}
+import 'vue';
+
+type EventHandler = (...args: any[]) => void;
+
+declare module 'vue' {
+  interface ComponentCustomProps {
+    id?: string;
+    role?: string;
+    tabindex?: number;
+    onClick?: EventHandler;
+    onTouchend?: EventHandler;
+    onTouchmove?: EventHandler;
+    onTouchstart?: EventHandler;
+    onTouchcancel?: EventHandler;
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+
+  interface HTMLAttributes {
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+}