@eturnity/eturnity_reusable_components 8.26.11-autiFill.2 → 8.26.11-autiFill.6

package/dist/main.es25.js

@@ -1,66 +1,218 @@
-function makeMap(str, expectsLowerCase) {
-  const map = /* @__PURE__ */ Object.create(null);
-  const list = str.split(",");
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true;
-  }
-  return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val];
-}
-!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
-!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
-const onRE = /^on[^a-z]/;
-const isOn = (key) => onRE.test(key);
-const isModelListener = (key) => key.startsWith("onUpdate:");
-const extend = Object.assign;
-const isArray = Array.isArray;
-const isFunction = (val) => typeof val === "function";
-const isString = (val) => typeof val === "string";
-const cacheStringFunction = (fn) => {
-  const cache = /* @__PURE__ */ Object.create(null);
-  return (str) => {
-    const hit = cache[str];
-    return hit || (cache[str] = fn(str));
-  };
+import styled from "./main.es7.js";
+import _sfc_main$1 from "./main.es376.js";
+import theme from "./main.es8.js";
+import "./main.es3.js";
+import _export_sfc from "./main.es11.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createCommentVNode, createTextVNode } from "./main.es6.js";
+import { toDisplayString } from "./main.es16.js";
+const PageContainer = styled.div``;
+const ButtonAttrs = {
+  type: String,
+  isDisabled: Boolean,
+  minWidth: String,
+  noWrap: Boolean,
+  height: String,
+  variant: String,
+  buttonSize: String,
+  appTheme: String
 };
-const hyphenateRE = /\B([A-Z])/g;
-const hyphenate = cacheStringFunction(
-  (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
-);
-const capitalize = cacheStringFunction(
-  (str) => str.charAt(0).toUpperCase() + str.slice(1)
-);
-const invokeArrayFns = (fns, arg) => {
-  for (let i = 0; i < fns.length; i++) {
-    fns[i](arg);
-  }
+const ButtonContainer = styled("div", ButtonAttrs)`
+    display: flex;
+    justify-content: center;
+    padding: ${(props) => {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_b = (_a = props.theme) == null ? void 0 : _a.mainButton) == null ? void 0 : _b.size) == null ? void 0 : _c[props.buttonSize]) == null ? void 0 : _d.padding;
+}};
+    font-size: ${(props) => {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_b = (_a = props.theme) == null ? void 0 : _a.mainButton) == null ? void 0 : _b.size) == null ? void 0 : _c[props.buttonSize]) == null ? void 0 : _d.fontSize;
+}};
+    color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.textColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.textColor};
+    background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.backgroundColor};
+    border: ${(props) => {
+  const borderValue = props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.borderColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.borderColor;
+  return borderValue ? "1px solid " + borderValue : "none";
+}};
+    border-radius: 4px;
+    text-align: center;
+    cursor: ${(props) => props.isDisabled ? "not-allowed" : "pointer"};
+    user-select: none;
+    ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""};
+    ${(props) => props.noWrap ? `white-space: nowrap;` : ""};
+    height: ${(props) => props.height};
+    line-height: 1;
+
+    &:hover {
+      background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].hover.backgroundColor};
+    }
+
+    &:active {
+      background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].active.backgroundColor};
+    }
+  `;
+const AltAttrs = {
+  altStyle: Boolean,
+  color: String
 };
-const looseToNumber = (val) => {
-  const n = parseFloat(val);
-  return isNaN(n) ? val : n;
+styled("div", AltAttrs)`
+    background-color: ${(props) => props.color ? props.color : props.theme.colors.transparentWhite1};
+    padding: 7px;
+    height: 100%;
+    width: 30%;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    border-radius: 4px 0 0 4px;
+    color: ${(props) => props.theme.colors.white};
+    all: ${(props) => props.altStyle ? "" : "unset"};
+  `;
+styled("span", AltAttrs)`
+    padding: ${(props) => props.altStyle ? "7px" : "0"};
+    all: ${(props) => props.altStyle ? "" : "unset"};
+  `;
+const LabelAttrs = {
+  hasIcon: Boolean
+};
+const LabelComponent = styled("span", LabelAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${(props) => props.hasIcon ? "5px" : "0"};
+  `;
+const _sfc_main = {
+  name: "MainButton",
+  components: {
+    Icon: _sfc_main$1,
+    LabelComponent,
+    PageContainer,
+    ButtonContainer
+  },
+  props: {
+    type: {
+      required: false,
+      default: "primary",
+      // primary, secondary, tertiary, ghost
+      type: String
+    },
+    variant: {
+      required: false,
+      default: "main",
+      // main, cancel
+      type: String
+    },
+    isDisabled: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    icon: {
+      required: false,
+      default: null,
+      type: String
+    },
+    iconColor: {
+      required: false,
+      default: "",
+      type: String
+    },
+    iconAltStyle: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    iconAltStyleColor: {
+      required: false,
+      default: null,
+      type: String
+    },
+    text: {
+      required: true,
+      type: String
+    },
+    noWrap: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    minWidth: {
+      required: false,
+      default: null,
+      type: String
+    },
+    height: {
+      required: false,
+      default: "auto",
+      type: String
+    },
+    id: {
+      required: false,
+      default: null,
+      type: String
+    },
+    dataId: {
+      type: String,
+      default: ""
+    },
+    dataQaId: {
+      type: String,
+      default: ""
+    },
+    appTheme: {
+      type: String,
+      default: "light"
+    },
+    buttonSize: {
+      type: String,
+      default: "medium",
+      required: false
+    }
+  },
+  computed: {
+    theme() {
+      return theme;
+    },
+    getIconColor() {
+      return this.isDisabled ? this.theme.mainButton[this.appTheme][this.type][this.variant].disabled.textColor : this.iconColor ? this.iconColor : this.theme.mainButton[this.appTheme][this.type][this.variant].default.textColor;
+    }
+  }
 };
-const HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
-const SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view";
-const isHTMLTag = /* @__PURE__ */ makeMap(HTML_TAGS);
-const isSVGTag = /* @__PURE__ */ makeMap(SVG_TAGS);
-const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
-const isSpecialBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs);
-function includeBooleanAttr(value) {
-  return !!value || value === "";
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Icon = resolveComponent("Icon");
+  const _component_LabelComponent = resolveComponent("LabelComponent");
+  const _component_ButtonContainer = resolveComponent("ButtonContainer");
+  const _component_PageContainer = resolveComponent("PageContainer");
+  return openBlock(), createBlock(_component_PageContainer, null, {
+    default: withCtx(() => [createVNode(_component_ButtonContainer, {
+      id: $props.id,
+      "app-theme": $props.appTheme,
+      "button-size": $props.buttonSize,
+      "data-id": $props.dataId,
+      "data-qa-id": $props.dataQaId,
+      height: $props.height,
+      "is-disabled": $props.isDisabled,
+      "min-width": $props.minWidth,
+      "no-wrap": $props.noWrap,
+      type: $props.type,
+      variant: $props.variant
+    }, {
+      default: withCtx(() => [createVNode(_component_LabelComponent, {
+        "has-icon": Boolean($props.icon)
+      }, {
+        default: withCtx(() => [$props.icon ? (openBlock(), createBlock(_component_Icon, {
+          key: 0,
+          color: $options.getIconColor,
+          "hovered-color": $options.getIconColor,
+          name: $props.icon,
+          size: "14px"
+        }, null, 8, ["color", "hovered-color", "name"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString($props.text), 1)]),
+        _: 1
+      }, 8, ["has-icon"])]),
+      _: 1
+    }, 8, ["id", "app-theme", "button-size", "data-id", "data-qa-id", "height", "is-disabled", "min-width", "no-wrap", "type", "variant"])]),
+    _: 1
+  });
 }
+const RCButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  capitalize,
-  extend,
-  hyphenate,
-  includeBooleanAttr,
-  invokeArrayFns,
-  isArray,
-  isFunction,
-  isHTMLTag,
-  isModelListener,
-  isOn,
-  isSVGTag,
-  isSpecialBooleanAttr,
-  isString,
-  looseToNumber,
-  makeMap
+  RCButton as default
 };

package/dist/main.es376.js

@@ -1,9 +1,9 @@
 import "./main.es3.js";
 import styled from "./main.es7.js";
 import { fetchIcon } from "./main.es381.js";
-import { reactive } from "./main.es16.js";
+import { reactive } from "./main.es18.js";
 import { computed, onMounted, watch, openBlock, createBlock, withCtx, createVNode, createElementVNode as createBaseVNode, createTextVNode, createCommentVNode } from "./main.es6.js";
-import { toDisplayString } from "./main.es23.js";
+import { toDisplayString } from "./main.es16.js";
 const _hoisted_1 = ["innerHTML"];
 const _sfc_main = {
   __name: "index",

package/dist/main.es5.js

@@ -1,8 +1,8 @@
 import { isRuntimeOnly, warn, createRenderer, callWithAsyncErrorHandling } from "./main.es6.js";
 import { Comment, Fragment, Static, Teleport, Text, callWithErrorHandling, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, devtools, getCurrentInstance, guardReactiveProps, h, handleError, initCustomFormatter, inject, isVNode, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, openBlock, provide, queuePostFlushCb, renderList, renderSlot, resolveComponent, resolveDynamicComponent, setBlockTracking, setDevtoolsHook, ssrContextKey, useSSRContext, version, watch, watchEffect, withCtx, withDirectives } from "./main.es6.js";
-import { isFunction, isHTMLTag, isSVGTag, isString, looseToNumber, isArray, invokeArrayFns, hyphenate, extend, isOn, isModelListener, capitalize, isSpecialBooleanAttr, includeBooleanAttr } from "./main.es25.js";
-import { camelize } from "./main.es23.js";
-import { capitalize as capitalize2, normalizeClass, normalizeStyle, toDisplayString, toHandlerKey } from "./main.es23.js";
+import { isFunction, isHTMLTag, isSVGTag, isString, looseToNumber, isArray, invokeArrayFns, hyphenate, extend, isOn, isModelListener, capitalize, isSpecialBooleanAttr, includeBooleanAttr } from "./main.es15.js";
+import { camelize } from "./main.es16.js";
+import { capitalize as capitalize2, normalizeClass, normalizeStyle, toDisplayString, toHandlerKey } from "./main.es16.js";
 const svgNS = "http://www.w3.org/2000/svg";
 const doc = typeof document !== "undefined" ? document : null;
 const templateContainer = doc && /* @__PURE__ */ doc.createElement("template");
@@ -460,6 +460,44 @@ const withKeys = (fn, modifiers) => {
     }
   };
 };
+const vShow = {
+  beforeMount(el, { value }, { transition }) {
+    el._vod = el.style.display === "none" ? "" : el.style.display;
+    if (transition && value) {
+      transition.beforeEnter(el);
+    } else {
+      setDisplay(el, value);
+    }
+  },
+  mounted(el, { value }, { transition }) {
+    if (transition && value) {
+      transition.enter(el);
+    }
+  },
+  updated(el, { value, oldValue }, { transition }) {
+    if (!value === !oldValue)
+      return;
+    if (transition) {
+      if (value) {
+        transition.beforeEnter(el);
+        setDisplay(el, true);
+        transition.enter(el);
+      } else {
+        transition.leave(el, () => {
+          setDisplay(el, false);
+        });
+      }
+    } else {
+      setDisplay(el, value);
+    }
+  },
+  beforeUnmount(el, { value }) {
+    setDisplay(el, value);
+  }
+};
+function setDisplay(el, value) {
+  el.style.display = value ? el._vod : "none";
+}
 const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
 let renderer;
 function ensureRenderer() {
@@ -603,6 +641,7 @@ export {
   toHandlerKey,
   useSSRContext,
   vModelText,
+  vShow,
   version,
   warn,
   watch,

package/dist/main.es6.js

@@ -1,7 +1,7 @@
-import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es16.js";
-import { readonly, ref, shallowRef, unref } from "./main.es16.js";
-import { isString, isFunction, getGlobalThis, isArray, NOOP, EMPTY_OBJ, normalizeClass, isObject, extend, normalizeStyle, isOn, isPromise, hasChanged, remove, isSet, isMap, isPlainObject, camelize, capitalize, toHandlerKey, hasOwn, EMPTY_ARR, NO, isBuiltInDirective, isReservedProp, invokeArrayFns, makeMap, looseToNumber, hyphenate, def, toRawType, isModelListener } from "./main.es23.js";
-import { toDisplayString } from "./main.es23.js";
+import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es18.js";
+import { readonly, ref, shallowRef, unref } from "./main.es18.js";
+import { isString, isFunction, getGlobalThis, isArray, NOOP, EMPTY_OBJ, normalizeClass, isObject, extend, normalizeStyle, isOn, isPromise, hasChanged, remove, isSet, isMap, isPlainObject, camelize, capitalize, toHandlerKey, hasOwn, EMPTY_ARR, NO, isBuiltInDirective, isReservedProp, invokeArrayFns, makeMap, looseToNumber, hyphenate, def, toRawType, isModelListener } from "./main.es16.js";
+import { toDisplayString } from "./main.es16.js";
 const stack = [];
 function pushWarningContext(vnode) {
   stack.push(vnode);

package/dist/main.es9.js

@@ -1,4 +1,4 @@
-import RCButton from "./main.es24.js";
+import RCButton from "./main.es25.js";
 import "./main.es3.js";
 import _export_sfc from "./main.es11.js";
 import { resolveComponent, openBlock, createBlock } from "./main.es6.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.26.11-autiFill.2",
+  "version": "8.26.11-autiFill.6",
   "files": [
     "dist",
     "src"

package/src/components/accordion/index.vue

@@ -5,7 +5,7 @@
       <RCCaret :is-down="isOpenByClick" />
     </WrapperHead>
     <WrapperContent
-      v-if="isOpenByClick"
+      v-show="isOpenByClick"
       class="accordion-content"
       :class="{ openAccordion: isOpenByClick && openingMode == 'click' }"
     >
@@ -69,7 +69,7 @@
         default: 'click',
       },
     },
-    emits: ['on-open'],
+    emits: ['on-open', 'on-close'],
     data() {
       return {
         isOpenByClick: false,
@@ -77,14 +77,17 @@
     },
     methods: {
       toggleOpenByClick() {
-        if (!this.isOpenByClick) {
-          this.$emit('on-open')
-        }
+        this.$emit(this.isOpenByClick ? 'on-close' : 'on-open')
         this.isOpenByClick = !this.isOpenByClick
       },
       close() {
+        this.$emit('on-close')
         this.isOpenByClick = false
       },
+      open() {
+        this.$emit('on-open')
+        this.isOpenByClick = true
+      },
     },
   }
 </script>

package/src/components/statusIndicator/index.vue

@@ -2,15 +2,15 @@
   <BoxContainer
     :border-radius="borderRadius"
     :is-active="isActive"
+    :is-dirty="isDirty"
     :is-disabled="isDisabled"
     :is-error="isError"
-    :is-touched="isTouched"
     :is-valid="isValid"
     :is-warning="isWarning"
     :size="size"
   >
     <RcIcon
-      v-if="isValid && isTouched"
+      v-if="isValid"
       :color="theme.semanticColors.purple[500]"
       :hovered-color="theme.semanticColors.purple[500]"
       name="checkmark_thin"
@@ -20,15 +20,15 @@
       v-else-if="isError"
       :color="theme.colors.white"
       :hovered-color="theme.colors.white"
-      name="close"
-      size="16px"
+      name="cross"
+      size="10x"
     />
     <RcIcon
       v-else-if="isWarning"
       :color="theme.colors.white"
       :hovered-color="theme.colors.white"
       name="warning_triangle"
-      size="16px"
+      size="10px"
     />
     <NumberContainer v-else :is-active="isActive" :is-valid="isValid">
       <slot></slot>
@@ -41,7 +41,7 @@
   // <StatusIndicator
   //  :is-error="true"
   //  :is-warning="true"
-  //  :is-touched="true"
+  //  :is-dirty="true"
   //  :is-disabled="true"
   //  :is-active="true"
   // >
@@ -62,7 +62,7 @@
       isValid: Boolean,
       isError: Boolean,
       isWarning: Boolean,
-      isTouched: Boolean,
+      isDirty: Boolean,
       isDisabled: Boolean,
       size: String,
       borderRadius: String,
@@ -79,18 +79,36 @@
         isActive,
         isError,
         isWarning,
-        isTouched,
+        isDirty,
         isDisabled,
       }) => {
         if (isDisabled) return theme.semanticColors.grey[200]
         if (isError) return theme.semanticColors.red[500]
         if (isWarning) return theme.semanticColors.yellow[500]
-        if (!isTouched) return theme.semanticColors.grey[200]
         if (isActive) {
-          if (isValid) return theme.semanticColors.purple[200]
           return theme.semanticColors.purple[500]
         }
-        return theme.semanticColors.grey[200]
+        if (!isDirty) return theme.semanticColors.grey[50]
+        if (isValid) return theme.semanticColors.purple[50]
+        return theme.semanticColors.grey[50]
+      }};
+      border: 1px solid;
+      border-color: ${({
+        theme,
+        isValid,
+        isActive,
+        isError,
+        isWarning,
+        isDirty,
+        isDisabled,
+      }) => {
+        if (isDisabled) return theme.semanticColors.grey[500]
+        if (isError) return theme.semanticColors.red[500]
+        if (isWarning) return theme.semanticColors.yellow[600]
+        if (!isDirty) return theme.semanticColors.grey[400]
+        if (isActive) return theme.semanticColors.purple[600]
+        if (isValid) return theme.semanticColors.purple[50]
+        return theme.semanticColors.grey[400]
       }};
       color: ${({ theme, isValid, isActive }) =>
         isActive ? theme.colors.white : theme.semanticColors.grey[800]};
@@ -121,7 +139,7 @@
         type: Boolean,
         default: false,
       },
-      isTouched: {
+      isDirty: {
         type: Boolean,
         default: false,
       },
@@ -149,7 +167,7 @@
     },
     computed: {
       isValid() {
-        return this.isTouched && !this.isError && !this.isWarning
+        return this.isDirty && !this.isError && !this.isWarning
       },
     },
   }