eco-vue-js 0.9.7 → 0.9.9

package/dist/components/Tabs/components/TabTitleButton.vue.js

@@ -1,6 +1,18 @@
-import { defineComponent, useTemplateRef, watch, nextTick, onMounted, openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, createBlock, Suspense, withCtx, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
+import { defineComponent, useTemplateRef, watch, nextTick, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, unref, createCommentVNode, renderSlot, normalizeProps, mergeProps, Suspense, withCtx, resolveDynamicComponent, createTextVNode, toDisplayString, guardReactiveProps, createVNode, Transition } from 'vue';
+import IconCheckCircle from '../../../assets/icons/sax/IconCheckCircle.svg.js';
+import IconClose from '../../../assets/icons/sax/IconClose.svg.js';
+import IconNegativeInfo from '../../../assets/icons/sax/IconNegativeInfo.svg.js';
 
-const _hoisted_1 = { class: "whitespace-nowrap px-4" };
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "p-8"
+};
+const _hoisted_3 = { class: "whitespace-nowrap px-4" };
+const _hoisted_4 = {
+  key: 2,
+  class: "absolute bottom-0 h-1 w-full rounded-sm bg-current"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TabTitleButton",
   props: {
@@ -8,29 +20,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     index: {},
     hasError: { type: Boolean },
     hasChanges: { type: Boolean },
+    hasValue: { type: Boolean },
     title: {},
     icon: {},
+    first: { type: Boolean },
+    last: { type: Boolean },
+    disabled: { type: Boolean },
+    stepper: { type: Boolean },
+    showHasValue: { type: Boolean },
+    noIndicator: { type: Boolean },
     side: { type: Boolean }
   },
   emits: ["click", "update:indicator-style", "update:scroll-position"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const buttonRef = useTemplateRef("button");
+    const containerRef = useTemplateRef("container");
     const updateIndicator = () => {
-      if (!props.active) return;
-      if (!buttonRef.value || !buttonRef.value.offsetWidth) return;
+      if (!props.active || props.noIndicator) return;
+      if (!containerRef.value || !containerRef.value.offsetWidth) return;
       if (props.side) {
         emit("update:indicator-style", {
-          height: buttonRef.value.offsetHeight + "px",
-          top: buttonRef.value.offsetTop + "px",
+          height: containerRef.value.offsetHeight + "px",
+          top: containerRef.value.offsetTop + "px",
           left: "0",
           width: "0.25rem"
         });
       } else {
         emit("update:indicator-style", {
-          width: buttonRef.value.offsetWidth + "px",
-          left: buttonRef.value.offsetLeft + "px",
+          width: containerRef.value.offsetWidth + "px",
+          left: containerRef.value.offsetLeft + "px",
           bottom: "0",
           height: "0.25rem"
         });
@@ -38,11 +57,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const updateScrollPosition = () => {
       if (!props.active) return;
-      if (!buttonRef.value || !buttonRef.value.offsetWidth) return;
+      if (!containerRef.value || !containerRef.value.offsetWidth) return;
       if (props.side) {
-        emit("update:scroll-position", { top: buttonRef.value.offsetTop });
+        emit("update:scroll-position", { top: containerRef.value.offsetTop + containerRef.value.offsetHeight / 2 });
       } else {
-        emit("update:scroll-position", { left: buttonRef.value.offsetLeft });
+        emit("update:scroll-position", { left: containerRef.value.offsetLeft + containerRef.value.offsetWidth / 2 });
       }
     };
     const update = () => {
@@ -64,60 +83,97 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       update
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        ref: "button",
-        class: "text-description grid cursor-pointer select-none snap-center font-semibold outline-none transition-colors duration-500",
-        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      return openBlock(), createElementBlock("div", {
+        ref: "container",
+        class: normalizeClass(["relative grid", {
+          "col-span-2 grid grid-cols-subgrid": _ctx.side,
+          "grid-cols-[1fr,auto]": !_ctx.side
+        }])
       }, [
-        createElementVNode("div", {
-          class: normalizeClass(["w-ripple w-ripple-hover relative", {
-            "text-primary-default dark:text-primary-dark": _ctx.active && !_ctx.hasError,
-            "text-negative dark:text-negative-dark": _ctx.hasError
-          }])
+        createElementVNode("button", {
+          disabled: _ctx.disabled,
+          class: normalizeClass(["w-ripple-trigger grid select-none snap-center grid-cols-[auto,1fr] font-semibold outline-none transition-colors duration-500", {
+            "text-primary-default dark:text-primary-dark": !_ctx.hasError && _ctx.active,
+            "text-negative dark:text-negative-dark": _ctx.hasError,
+            "text-positive dark:text-positive-dark": _ctx.showHasValue && !_ctx.active && !_ctx.hasError && _ctx.hasValue,
+            "text-description": !_ctx.active && !_ctx.hasError && (_ctx.showHasValue ? !_ctx.hasValue : true),
+            "cursor-not-allowed opacity-50": _ctx.disabled,
+            "cursor-pointer": !_ctx.disabled
+          }]),
+          onClick: _cache[0] || (_cache[0] = ($event) => !_ctx.disabled && _ctx.$emit("click", $event))
         }, [
-          _ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: normalizeClass(["flex items-center", {
-              "h-10 justify-center text-center": !_ctx.side,
-              "py-3 text-start": _ctx.side
+          _ctx.stepper ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createElementVNode("div", {
+              class: normalizeClass(["text-default dark:text-default-dark rounded-full bg-[inherit] bg-opacity-100 p-1 outline transition-[outline-width] duration-500", {
+                "bg-negative dark:bg-negative-dark outline-negative/10 dark:outline-negative-dark/10": _ctx.hasError,
+                "bg-positive dark:bg-positive-dark outline-positive/10 dark:outline-positive-dark/10": !_ctx.hasError && _ctx.hasValue,
+                "bg-gray-400 outline-gray-400/10 dark:bg-gray-600 dark:outline-gray-600/10": !_ctx.hasError && !_ctx.hasValue,
+                "outline-[1.5rem]": _ctx.active
+              }])
+            }, [
+              _ctx.hasError ? (openBlock(), createBlock(unref(IconNegativeInfo), {
+                key: 0,
+                class: "size-8"
+              })) : _ctx.hasValue ? (openBlock(), createBlock(unref(IconCheckCircle), {
+                key: 1,
+                class: "size-8"
+              })) : (openBlock(), createBlock(unref(IconClose), {
+                key: 2,
+                class: "size-8"
+              }))
+            ], 2)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["relative col-start-2", {
+              "mt-3": _ctx.stepper,
+              "w-ripple w-ripple-hover": !_ctx.disabled
             }])
           }, [
-            createElementVNode("div", _hoisted_1, [
-              _ctx.icon !== void 0 ? (openBlock(), createBlock(Suspense, { key: 0 }, {
-                fallback: withCtx(() => _cache[1] || (_cache[1] = [
-                  createElementVNode("svg", { class: "square-5 -mt-1 inline" }, [
-                    createElementVNode("g")
-                  ], -1)
-                ])),
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { class: "square-5 -mt-1 inline" }))
-                ]),
-                _: 1
-              })) : createCommentVNode("", true),
-              createTextVNode(" " + toDisplayString(_ctx.title), 1)
-            ]),
-            renderSlot(_ctx.$slots, "suffix")
-          ], 2)),
-          createVNode(Transition, {
-            "enter-active-class": "transition-opacity",
-            "leave-active-class": "transition-opacity",
-            "enter-from-class": "opacity-0",
-            "leave-to-class": "opacity-0"
-          }, {
-            default: withCtx(() => [
-              _ctx.hasChanges ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass(["square-2 absolute right-0 top-0 rounded-full transition-colors duration-500", {
-                  "bg-info dark:bg-info-dark": !_ctx.hasError,
-                  "bg-negative dark:bg-negative-dark": _ctx.hasError
-                }])
-              }, null, 2)) : createCommentVNode("", true)
-            ]),
-            _: 1
-          })
-        ], 2),
-        renderSlot(_ctx.$slots, "right")
-      ], 512);
+            _ctx.$slots.title ? renderSlot(_ctx.$slots, "title", normalizeProps(mergeProps({ key: 0 }, { hasChanges: _ctx.hasChanges, hasError: _ctx.hasError, hasValue: _ctx.hasValue }))) : (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(["flex items-center", {
+                "h-10 justify-center text-center": !_ctx.side,
+                "py-3 text-start": _ctx.side
+              }])
+            }, [
+              createElementVNode("div", _hoisted_3, [
+                _ctx.icon !== void 0 ? (openBlock(), createBlock(Suspense, { key: 0 }, {
+                  fallback: withCtx(() => _cache[1] || (_cache[1] = [
+                    createElementVNode("svg", { class: "square-5 -mt-1 inline" }, [
+                      createElementVNode("g")
+                    ], -1)
+                  ])),
+                  default: withCtx(() => [
+                    (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { class: "square-5 -mt-1 inline" }))
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(_ctx.title), 1)
+              ]),
+              renderSlot(_ctx.$slots, "suffix", normalizeProps(guardReactiveProps({ hasChanges: _ctx.hasChanges, hasError: _ctx.hasError, hasValue: _ctx.hasValue })))
+            ], 2)),
+            createVNode(Transition, {
+              "enter-active-class": "transition-opacity",
+              "leave-active-class": "transition-opacity",
+              "enter-from-class": "opacity-0",
+              "leave-to-class": "opacity-0"
+            }, {
+              default: withCtx(() => [
+                _ctx.hasChanges ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(["square-2 absolute right-0 top-0 rounded-full transition-colors duration-500", {
+                    "bg-info dark:bg-info-dark": !_ctx.hasError,
+                    "bg-negative dark:bg-negative-dark": _ctx.hasError
+                  }])
+                }, null, 2)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }),
+            _ctx.stepper ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
+          ], 2)
+        ], 10, _hoisted_1),
+        renderSlot(_ctx.$slots, "right", normalizeProps(guardReactiveProps({ hasChanges: _ctx.hasChanges, hasError: _ctx.hasError, hasValue: _ctx.hasValue })))
+      ], 2);
     };
   }
 });

package/dist/components/Tabs/types.d.ts

@@ -8,8 +8,11 @@ export interface TabsProps {
     disableMinHeight?: boolean;
     noHeader?: boolean;
     switchToNew?: boolean;
+    noIndicator?: boolean;
+    stepper?: boolean;
+    showHasValue?: boolean;
 }
-export type TabsStepperProps = Omit<TabsProps, 'switchToNew' | 'noHeader' | 'side'>;
+export type TabsStepperProps = Omit<TabsProps, 'switchToNew' | 'noIndicator' | 'side'>;
 export type TabsItemScopedProps = {
     hasError: boolean;
     hasChanges: boolean;

package/dist/components/Tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,KAAK,CAAA;AAE9B,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,KAAK,EAAE,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,GAAG,UAAU,GAAG,MAAM,CAAC,CAAA;AAEnF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,KAAK,CAAA;AAE9B,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,KAAK,EAAE,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,GAAG,aAAa,GAAG,MAAM,CAAC,CAAA;AAEtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA"}

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.9.7",
+  "version": "0.9.9",
   "scripts": {
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",