@veritree/ui 0.82.0-9 → 0.83.0

package/mixins/form-control.js

@@ -33,6 +33,10 @@ export const formControlMixin = {
       type: String,
       default: 'large',
     },
+    min: {
+      type: [String, Number],
+      default: null,
+    },
   },
 
   computed: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.82.0-9",
+  "version": "0.83.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Badge/VTBadgeNew.vue

@@ -1,6 +1,24 @@
 <template>
   <span
-    class="ml-auto flex min-w-5 place-content-center rounded-xl bg-gray-800 p-1 text-xs leading-none text-white"
+    :class="[
+      // default styles
+      headless
+        ? 'badge'
+        : 'ml-auto flex min-w-5 place-content-center rounded-xl  p-1 text-xs leading-none ',
+      // variant styles
+      headless
+        ? `badge--${variant}`
+        : isDefault
+          ? 'bg-gray-800 text-white'
+          : isSuccess
+            ? 'bg-success-200 text-success-700'
+            : isError
+              ? 'bg-error-200 text-error-700'
+              : isWarning
+                ? 'bg-warning-200 text-warning-700'
+                : null,
+      // sizes styles
+    ]"
   >
     <slot />
   </span>
@@ -9,5 +27,34 @@
 <script>
 export default {
   name: 'VTBadgeNew',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+
+  computed: {
+    isDefault() {
+      return this.variant === 'default';
+    },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+  },
 };
 </script>

package/src/components/Disclosure/VTDisclosure.vue

@@ -11,11 +11,8 @@ export default {
   provide() {
     return {
       apiDisclosure: () => {
-        const details = this.details;
-        const contents = this.contents;
         const accordion = this.accordion;
-        const headers = this.headers;
-        const icons = this.icons;
+        const details = this.details;
 
         const register = (objKey, item) => {
           if (!item) return;
@@ -28,11 +25,8 @@ export default {
         };
 
         return {
-          details,
-          contents,
-          headers,
-          icons,
           accordion,
+          details,
           register,
           unregister,
         };
@@ -50,9 +44,6 @@ export default {
   data() {
     return {
       details: [],
-      contents: [],
-      headers: [],
-      icons: [],
     };
   },
 };

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -6,10 +6,10 @@
         ? 'details-content'
         : 'grid transition-[grid-template-rows] duration-300 ease-linear',
       headless
-        ? expanded
+        ? isVisible
           ? 'details-content--expanded'
           : null
-        : expanded
+        : isVisible
           ? 'grid-rows-[1fr]'
           : 'grid-rows-[0fr]',
     ]"
@@ -40,9 +40,6 @@ export default {
   data() {
     return {
       idGroup: this.apiDetails().idGroup,
-      expanded: this.open,
-      expandedHeight: null,
-      invisible: false,
     };
   },
 
@@ -50,35 +47,23 @@ export default {
     id() {
       return `disclosure-content-${this.idGroup}`;
     },
-  },
-
-  mounted() {
-    const content = {
-      id: this.id,
-      idGroup: this.idGroup,
-      collapse: this.collapse,
-      expand: this.expand,
-      isVisible: this.isVisible,
-    };
 
-    this.apiDisclosure().register('contents', content);
-  },
-
-  beforeDestroy() {
-    this.apiDisclosure().unregister('contents', this.id);
+    isVisible() {
+      return this.apiDetails().isVisible();
+    },
   },
 
-  methods: {
-    expand() {
-      this.expanded = true;
+  watch: {
+    open(value) {
+      this.apiDetails().setVisible(value);
+      this.expand = value;
     },
+  },
 
-    collapse() {
-      this.expanded = false;
-    },
-    isVisible() {
-      return this.expanded;
-    },
+  mounted() {
+    if (this.open) {
+      this.apiDetails().setVisible(this.open);
+    }
   },
 };
 </script>

package/src/components/Disclosure/VTDisclosureDetails.vue

@@ -26,6 +26,7 @@ export default {
         const idContent = `details-content-${idGroup}`;
 
         const isVisible = () => this.isVisible();
+        const setVisible = (visible) => this.setVisible(visible);
 
         return {
           idGroup,
@@ -33,6 +34,8 @@ export default {
           idIcon,
           idContent,
           isVisible,
+          setVisible,
+          visible: this.visible,
         };
       },
     };
@@ -52,6 +55,18 @@ export default {
     };
   },
 
+  watch: {
+    visible(value) {
+      if (value && this.apiDisclosure().accordion) {
+        this.apiDisclosure().details.forEach((detail) => {
+          if (detail.idGroup !== this.idGroup) {
+            detail.hide();
+          }
+        });
+      }
+    },
+  },
+
   mounted() {
     const detail = {
       idGroup: this.idGroup,
@@ -81,6 +96,10 @@ export default {
     isVisible() {
       return this.visible;
     },
+
+    setVisible(visible) {
+      this.visible = visible;
+    },
   },
 };
 </script>

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -7,7 +7,7 @@
         : 'flex cursor-pointer justify-between gap-3 text-body font-semibold',
     ]"
     :aria-controls="ariaControls"
-    :aria-expanded="String(ariaExpanded)"
+    :aria-expanded="ariaExpanded"
     role="button"
     tabindex="0"
     @click.prevent="toggle"
@@ -30,106 +30,26 @@ export default {
     },
   },
 
-  data() {
-    return {
-      ariaExpanded: false,
-    };
-  },
-
   computed: {
     id() {
       return this.apiDetails().idSummary;
     },
-
-    idGroup() {
-      return this.apiDetails().idGroup;
-    },
-
     ariaControls() {
       return this.apiDetails().idContent;
     },
 
-    details() {
-      return this.apiDisclosure().details;
-    },
-
-    headers() {
-      return this.apiDisclosure().headers;
+    isVisible() {
+      return this.apiDetails().isVisible();
     },
 
-    icons() {
-      return this.apiDisclosure().icons;
+    ariaExpanded() {
+      return String(this.isVisible);
     },
-
-    contents() {
-      return this.apiDisclosure().contents;
-    },
-  },
-
-  mounted() {
-    this.isExpanded();
-
-    const header = {
-      id: this.id,
-      idGroup: this.idGroup,
-      isExpanded: this.isExpanded,
-    };
-
-    this.apiDisclosure().register('headers', header);
-  },
-
-  beforeDestroy() {
-    this.apiDisclosure().unregister('headers', this.id);
   },
 
   methods: {
     toggle() {
-      this.toggleDetails();
-      this.toggleHeaders();
-      this.toggleContents();
-      this.toggleIcons();
-    },
-
-    isExpanded() {
-      this.ariaExpanded = this.apiDetails().isVisible();
-    },
-
-    toggleDetails() {
-      this.details.forEach((detail) => {
-        const isSameGroup = detail.idGroup === this.idGroup;
-        const isAccordion = this.apiDisclosure().accordion;
-
-        if (isSameGroup) {
-          detail.isVisible() ? detail.hide() : detail.show();
-        }
-
-        if (isAccordion && !isSameGroup) {
-          detail.hide();
-        }
-      });
-    },
-
-    toggleContents() {
-      this.contents.forEach((content) => {
-        const isSameGroup = content.idGroup === this.idGroup;
-        const isAccordion = this.apiDisclosure().accordion;
-
-        if (isSameGroup) {
-          content.isVisible() ? content.collapse() : content.expand();
-        }
-
-        if (isAccordion && !isSameGroup) {
-          content.collapse();
-        }
-      });
-    },
-
-    toggleHeaders() {
-      this.headers.forEach((summary) => summary.isExpanded());
-    },
-
-    toggleIcons() {
-      this.icons.forEach((icon) => icon.isExpanded());
+      this.apiDetails().setVisible(!this.isVisible);
     },
   },
 };

package/src/components/Disclosure/VTDisclosureIcon.vue

@@ -22,42 +22,36 @@ export default {
     },
   },
 
-  data() {
-    return {
-      expanded: false,
-    };
-  },
+  // data() {
+  //   return {
+  //     expanded: false,
+  //   };
+  // },
 
   computed: {
-    id() {
-      return this.apiDetails().idIcon;
-    },
+    // id() {
+    //   return this.apiDetails().idIcon;
+    // },
 
-    idGroup() {
-      return this.apiDetails().idGroup;
+    // idGroup() {
+    //   return this.apiDetails().idGroup;
+    // },
+
+    expanded() {
+      return this.apiDetails().visible;
     },
   },
 
   mounted() {
-    this.isExpanded();
-
-    const icon = {
-      id: this.id,
-      idGroup: this.idGroup,
-      isExpanded: this.isExpanded,
-    };
-
-    this.apiDisclosure().register('icons', icon);
+    // const icon = {
+    //   id: this.id,
+    //   idGroup: this.idGroup,
+    // };
+    // this.apiDisclosure().register('icons', icon);
   },
 
   beforeDestroy() {
-    this.apiDisclosure().unregister('icons', this.id);
-  },
-
-  methods: {
-    isExpanded() {
-      this.expanded = this.apiDetails().isVisible();
-    },
+    // this.apiDisclosure().unregister('icons', this.id);
   },
 };
 </script>

package/src/components/Form/VTFormFeedback.vue

@@ -56,10 +56,10 @@ export default {
         this.headless
           ? `form-feedback__icon--${this.variant}`
           : this.isError
-          ? 'text-error-500'
-          : this.isSuccess
-          ? 'text-success-500'
-          : null,
+            ? 'text-error-500'
+            : this.isSuccess
+              ? 'text-success-500'
+              : null,
       ];
     },
 
@@ -76,6 +76,14 @@ export default {
     },
   },
 
+  destroyed() {
+    this.$emit('destroyed');
+  },
+
+  mounted() {
+    this.$emit('mounted');
+  },
+
   methods: {
     onClick() {
       this.$emit('click');

package/src/components/Form/VTInput.vue

@@ -3,6 +3,7 @@
     :class="classComputed"
     :value="value"
     :disabled="disabled"
+    :min="min"
     v-on="listeners"
   />
 </template>

package/src/components/Form/VTInputNumber.vue

@@ -85,10 +85,6 @@ export default {
 
     valueFormatted: {
       get() {
-        if (this.value === 0 && this.event === 'blur') {
-          return null;
-        }
-
         let options = {};
 
         // only add the fraction digits on blur because on input it won't behave nicely

package/src/utils/images.js

@@ -1,21 +1,34 @@
+/**
+ * Resizes an image by adjusting its width and returns the modified URL.
+ *
+ * This method processes image URLs from CloudFront CDN. If the URL is a valid
+ * string or object, it decodes the URL, adjusts the width in the `resize` edits,
+ * and returns the updated encoded URL. If no width is provided, a default value
+ * of 450 is used. If an error occurs, the original CDN URL is returned.
+ *
+ * @param {(string|object)} url - The URL of the image, either as a string or object.
+ * @param {number} [width=450] - The width to resize the image to (default is 450 if not specified).
+ *
+ * @returns {string} The updated image URL with the resized width, or the original URL if an error occurs.
+ */
 export const handleImageResizing = (url, width) => {
   // early exit if url is null for whatever reason
   if (!url) {
     return '';
   }
-  
+
   let cdn;
-  
+
   try {
     // new code
-    if(typeof url === 'string' && url.includes('cloudfront.net/')) {
+    if (typeof url === 'string' && url.includes('cloudfront.net/')) {
       cdn = url;
     } else {
       // old code
       if (typeof url === 'object') {
         cdn = url.cdn_url;
       }
-  
+
       if (typeof url === 'string') {
         cdn = JSON.parse(url).cdn_url;
       }
@@ -29,7 +42,7 @@ export const handleImageResizing = (url, width) => {
     // browsers.
     //
     // Details: https://developer.mozilla.org/en-US/docs/Web/API/atob
-      const decodedString = JSON.parse(atob(base64String[1]));
+    const decodedString = JSON.parse(atob(base64String[1]));
 
     width
       ? (decodedString.edits.resize.width = width)
@@ -43,8 +56,8 @@ export const handleImageResizing = (url, width) => {
     const encodedString = btoa(JSON.stringify(decodedString));
     const encodedUrl = `${firstPart}net/${encodedString}`;
 
-    return encodedUrl
-  } catch(error) {
-    console.error(`${error} in ${cdn}`);
+    return encodedUrl;
+  } catch (error) {
+    return cdn;
   }
-};
+};