@veritree/ui 0.10.0 → 0.12.1

package/index.js

@@ -1,76 +1,76 @@
-import VTAvatar from "./src/Avatar/VTAvatar.vue";
-import VTAvatarImage from "./src/Avatar/VTAvatarImage.vue";
-import VTAvatarText from "./src/Avatar/VTAvatarText.vue";
-import VTImage from "./src/Image/VTImage.vue";
-import VTImageCounter from "./src/Image/VTImageCounter.vue";
-import VTImageHover from "./src/Image/VTImageHover.vue";
-import VTDropdownMenu from "./src/DropdownMenu/VTDropdownMenu.vue";
-import VTDropdownMenuContent from "./src/DropdownMenu/VTDropdownMenuContent.vue";
-import VTDropdownMenuDivider from "./src/DropdownMenu/VTDropdownMenuDivider.vue";
-import VTDropdownMenuGroup from "./src/DropdownMenu/VTDropdownMenuGroup.vue";
-import VTDropdownMenuItem from "./src/DropdownMenu/VTDropdownMenuItem.vue";
-import VTDropdownMenuLabel from "./src/DropdownMenu/VTDropdownMenuLabel.vue";
-import VTDropdownMenuTrigger from "./src/DropdownMenu/VTDropdownMenuTrigger.vue";
-import VTPopover from "./src/Popover/VTPopover.vue";
-import VTPopoverContent from "./src/Popover/VTPopoverContent.vue";
-import VTPopoverDivider from "./src/Popover/VTPopoverDivider.vue";
-import VTPopoverGroup from "./src/Popover/VTPopoverGroup.vue";
-import VTPopoverItem from "./src/Popover/VTPopoverItem.vue";
-import VTPopoverTrigger from "./src/Popover/VTPopoverTrigger.vue";
-import VTFormFeedback from "./src/Form/VTFormFeedback.vue";
-import VTFormGroup from "./src/Form/VTFormGroup.vue";
-import VTListbox from "./src/Listbox/VTListbox.vue";
-import VTListboxContent from "./src/Listbox/VTListboxContent.vue";
-import VTListboxItem from "./src/Listbox/VTListboxItem.vue";
-import VTListboxLabel from "./src/Listbox/VTListboxLabel.vue";
-import VTListboxList from "./src/Listbox/VTListboxList.vue";
-import VTListboxSearch from "./src/Listbox/VTListboxSearch.vue";
-import VTListboxTrigger from "./src/Listbox/VTListboxTrigger.vue";
+import VTAvatar from "./src/components/Avatar/VTAvatar.vue";
+import VTAvatarImage from "./src/components/Avatar/VTAvatarImage.vue";
+import VTAvatarText from "./src/components/Avatar/VTAvatarText.vue";
+import VTImage from "./src/components/Image/VTImage.vue";
+import VTImageCounter from "./src/components/Image/VTImageCounter.vue";
+import VTImageHover from "./src/components/Image/VTImageHover.vue";
+import VTDropdownMenu from "./src/components/DropdownMenu/VTDropdownMenu.vue";
+import VTDropdownMenuContent from "./src/components/DropdownMenu/VTDropdownMenuContent.vue";
+import VTDropdownMenuDivider from "./src/components/DropdownMenu/VTDropdownMenuDivider.vue";
+import VTDropdownMenuGroup from "./src/components/DropdownMenu/VTDropdownMenuGroup.vue";
+import VTDropdownMenuItem from "./src/components/DropdownMenu/VTDropdownMenuItem.vue";
+import VTDropdownMenuLabel from "./src/components/DropdownMenu/VTDropdownMenuLabel.vue";
+import VTDropdownMenuTrigger from "./src/components/DropdownMenu/VTDropdownMenuTrigger.vue";
+import VTPopover from "./src/components/Popover/VTPopover.vue";
+import VTPopoverContent from "./src/components/Popover/VTPopoverContent.vue";
+import VTPopoverDivider from "./src/components/Popover/VTPopoverDivider.vue";
+import VTPopoverGroup from "./src/components/Popover/VTPopoverGroup.vue";
+import VTPopoverItem from "./src/components/Popover/VTPopoverItem.vue";
+import VTPopoverTrigger from "./src/components/Popover/VTPopoverTrigger.vue";
+import VTFormFeedback from "./src/components/Form/VTFormFeedback.vue";
+import VTFormGroup from "./src/components/Form/VTFormGroup.vue";
+import VTListbox from "./src/components/Listbox/VTListbox.vue";
+import VTListboxContent from "./src/components/Listbox/VTListboxContent.vue";
+import VTListboxItem from "./src/components/Listbox/VTListboxItem.vue";
+import VTListboxLabel from "./src/components/Listbox/VTListboxLabel.vue";
+import VTListboxList from "./src/components/Listbox/VTListboxList.vue";
+import VTListboxSearch from "./src/components/Listbox/VTListboxSearch.vue";
+import VTListboxTrigger from "./src/components/Listbox/VTListboxTrigger.vue";
 
-import VTAlert from "./src/Alerts/VTAlert.vue";
+import VTAlert from "./src/components/Alerts/VTAlert.vue";
 
-import VTSpinner from "./src/Spinner/VTSpinner.vue";
+import VTSpinner from "./src/components/Spinner/VTSpinner.vue";
 
-import VTButton from "./src/Button/VTButton.vue";
-// import VTButtonSave from './src/Button/VTButtonSave.vue';
+import VTButton from "./src/components/Button/VTButton.vue";
+// import VTButtonSave from './src/components/Button/VTButtonSave.vue';
 
-import VTInput from "./src/Input/VTInput.vue";
-import VTInputDate from "./src/Input/VTInputDate.vue";
-import VTInputFile from "./src/Input/VTInputFile.vue";
-import VTInputUpload from "./src/Input/VTInputUpload.vue";
+import VTInput from "./src/components/Input/VTInput.vue";
+import VTInputDate from "./src/components/Input/VTInputDate.vue";
+import VTInputFile from "./src/components/Input/VTInputFile.vue";
+import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
 
-import VTTextarea from "./src/Textarea/VTTextarea.vue";
+import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
 
-import VTModal from "./src/Modal/VTModal.vue";
+import VTModal from "./src/components/Modal/VTModal.vue";
 
-import VTAccordion from "./src/Accordion/VTAccordion.vue";
-import VTAccordionButton from "./src/Accordion/VTAccordionButton.vue";
-import VTAccordionGroup from "./src/Accordion/VTAccordionGroup.vue";
-import VTAccordionPanel from "./src/Accordion/VTAccordionPanel.vue";
+import VTAccordion from "./src/components/Accordion/VTAccordion.vue";
+import VTAccordionButton from "./src/components/Accordion/VTAccordionButton.vue";
+import VTAccordionGroup from "./src/components/Accordion/VTAccordionGroup.vue";
+import VTAccordionPanel from "./src/components/Accordion/VTAccordionPanel.vue";
 
-import VTTab from "./src/Tabs/VTTab.vue";
-import VTTabGroup from "./src/Tabs/VTTabGroup.vue";
-import VTTabList from "./src/Tabs/VTTabList.vue";
-import VTTabPanel from "./src/Tabs/VTTabPanel.vue";
-import VTTabPanels from "./src/Tabs/VTTabPanels.vue";
+import VTTab from "./src/components/Tabs/VTTab.vue";
+import VTTabGroup from "./src/components/Tabs/VTTabGroup.vue";
+import VTTabList from "./src/components/Tabs/VTTabList.vue";
+import VTTabPanel from "./src/components/Tabs/VTTabPanel.vue";
+import VTTabPanels from "./src/components/Tabs/VTTabPanels.vue";
 
-import VTDialog from "./src/Dialog/VTDialog.vue";
-import VTDialogClose from "./src/Dialog/VTDialogClose.vue";
-import VTDialogContent from "./src/Dialog/VTDialogContent.vue";
-import VTDialogFooter from "./src/Dialog/VTDialogFooter.vue";
-import VTDialogHeader from "./src/Dialog/VTDialogHeader.vue";
-import VTDialogMain from "./src/Dialog/VTDialogMain.vue";
-import VTDialogOverlay from "./src/Dialog/VTDialogOverlay.vue";
-import VTDialogTitle from "./src/Dialog/VTDialogTitle.vue";
+import VTDialog from "./src/components/Dialog/VTDialog.vue";
+import VTDialogClose from "./src/components/Dialog/VTDialogClose.vue";
+import VTDialogContent from "./src/components/Dialog/VTDialogContent.vue";
+import VTDialogFooter from "./src/components/Dialog/VTDialogFooter.vue";
+import VTDialogHeader from "./src/components/Dialog/VTDialogHeader.vue";
+import VTDialogMain from "./src/components/Dialog/VTDialogMain.vue";
+import VTDialogOverlay from "./src/components/Dialog/VTDialogOverlay.vue";
+import VTDialogTitle from "./src/components/Dialog/VTDialogTitle.vue";
 
-import VTDrawer from "./src/Drawer/VTDrawer.vue";
-import VTDrawerClose from "./src/Drawer/VTDrawerClose.vue";
-import VTDrawerContent from "./src/Drawer/VTDrawerContent.vue";
-import VTDrawerFooter from "./src/Drawer/VTDrawerFooter.vue";
-import VTDrawerHeader from "./src/Drawer/VTDrawerHeader.vue";
-import VTDrawerTitle from "./src/Drawer/VTDrawerTitle.vue";
-import VTDrawerMain from "./src/Drawer/VTDrawerMain.vue";
-import VTDrawerOverlay from "./src/Drawer/VTDrawerOverlay.vue";
+import VTDrawer from "./src/components/Drawer/VTDrawer.vue";
+import VTDrawerClose from "./src/components/Drawer/VTDrawerClose.vue";
+import VTDrawerContent from "./src/components/Drawer/VTDrawerContent.vue";
+import VTDrawerFooter from "./src/components/Drawer/VTDrawerFooter.vue";
+import VTDrawerHeader from "./src/components/Drawer/VTDrawerHeader.vue";
+import VTDrawerTitle from "./src/components/Drawer/VTDrawerTitle.vue";
+import VTDrawerMain from "./src/components/Drawer/VTDrawerMain.vue";
+import VTDrawerOverlay from "./src/components/Drawer/VTDrawerOverlay.vue";
 
 export {
   VTAvatar,

package/nuxt.js

@@ -1,14 +1,14 @@
 import { join } from 'path';
 
 const components = [
-  'src/Avatar',
-  'src/Drawer',
-  'src/Dialog',
-  'src/DropdownMenu',
-  'src/Form',
-  'src/Listbox',
-  'src/Image',
-  'src/Tabs',
+  'src/components/Avatar',
+  'src/components/Drawer',
+  'src/components/Dialog',
+  'src/components/DropdownMenu',
+  'src/components/Form',
+  'src/components/Listbox',
+  'src/components/Image',
+  'src/components/Tabs',
 ]
 
 export default function () {

package/package.json

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

package/src/{Accordion → components/Accordion}/VTAccordionGroup.vue

@@ -1,18 +1,15 @@
 <template>
-  <div
-    :id="id"
-    class="accordion-group"
-  >
+  <div :id="id" class="accordion-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
-import { genId } from '../utils/genId';
+import { genId } from "../../utils/genId";
 
 export default {
-  name: 'VTAccordionGroup',
-  inject: ['api'],
+  name: "VTAccordionGroup",
+  inject: ["api"],
 
   data() {
     return {
@@ -24,6 +21,5 @@ export default {
   mounted() {
     this.api.registerAccordionGroup(this);
   },
-
 };
 </script>

package/src/{Dialog → components/Dialog}/VTDialog.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { genId } from "~/utils/ids";
+import { genId } from "../../utils/ids";
 
 export default {
   name: "VTDialog",

package/src/{Dialog → components/Dialog}/VTDialogContent.vue

@@ -13,7 +13,7 @@
       :id="id"
       :class="{
         'Dialog-content': headless,
-        'relative m-auto max-h-full max-w-full overflow-auto rounded p-6 focus:outline-none sm:p-10':
+        'relative m-auto max-h-full max-w-full overflow-auto rounded p-6 focus:outline-none sm:p-10 flex flex-col':
           !headless,
         'bg-white': !dark,
         'bg-fd-600': dark,

package/src/{Dialog → components/Dialog}/VTDialogFooter.vue

@@ -1,19 +1,22 @@
 <template>
-  <component :is="as" :class="{ 'Dialog-footer': headless }">
+  <component
+    :is="as"
+    :class="{ 'Dialog-footer': headless, 'w-full': !headless }"
+  >
     <slot></slot>
   </component>
 </template>
 
 <script>
 export default {
-  name: 'VTDialogFooter',
+  name: "VTDialogFooter",
 
-  inject: ['api'],
+  inject: ["api"],
 
   props: {
     as: {
       type: String,
-      default: 'footer',
+      default: "footer",
     },
   },
 

package/src/{Dialog → components/Dialog}/VTDialogHeader.vue

@@ -4,7 +4,7 @@
     :id="id"
     :class="{
       'Dialog-header': headless,
-      'mb-8 flex justify-between gap-x-3 items-center': !headless,
+      'mb-8 flex justify-between gap-x-3 items-center w-full': !headless,
     }"
   >
     <slot></slot>

package/src/{Dialog → components/Dialog}/VTDialogMain.vue

@@ -1,5 +1,12 @@
 <template>
-  <component :is="as" :id="id" :class="{ 'Dialog-body': headless }">
+  <component
+    :is="as"
+    :id="id"
+    :class="{
+      'Dialog-body': headless,
+      'flex-1 w-full h-full overflow-y-auto': !headless,
+    }"
+  >
     <slot></slot>
   </component>
 </template>

package/src/{Drawer → components/Drawer}/VTDrawer.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { genId } from "~/utils/ids";
+import { genId } from "../../utils/ids";
 
 export default {
   name: "VTDrawer",

package/src/{DropdownMenu → components/DropdownMenu}/VTDropdownMenu.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTDropdownMenu',
+  name: "VTDropdownMenu",
 
   provide() {
     return {

package/src/{DropdownMenu → components/DropdownMenu}/VTDropdownMenuContent.vue

@@ -27,12 +27,12 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTDropdownMenuContent',
+  name: "VTDropdownMenuContent",
 
-  inject: ['api'],
+  inject: ["api"],
 
   data() {
     return {
@@ -67,7 +67,7 @@ export default {
     });
 
     // TODO: Create a directive or mixin for this
-    document.addEventListener('click', (e) => {
+    document.addEventListener("click", (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
     });
@@ -75,7 +75,7 @@ export default {
 
   destroyed() {
     // TODO: Create a directive or mixin for this
-    document.removeEventListener('click', this.trigger.onClick());
+    document.removeEventListener("click", this.trigger.onClick());
   },
 
   methods: {
@@ -85,7 +85,7 @@ export default {
 
     hide() {
       this.visible = false;
-      this.$emit('hide');
+      this.$emit("hidden");
       this.api().unregisterItems();
     },
   },

package/src/{DropdownMenu → components/DropdownMenu}/VTDropdownMenuItem.vue

@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTDropdownMenuItem',
+  name: "VTDropdownMenuItem",
 
-  inject: ['api'],
+  inject: ["api"],
 
   props: {
     to: {
@@ -68,7 +68,7 @@ export default {
     },
 
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href ? "a" : this.to ? "NuxtLink" : "button";
     },
 
     items() {
@@ -163,7 +163,7 @@ export default {
     onClick() {
       if (this.disabled) return;
 
-      this.$emit('click');
+      this.$emit("click");
       this.$nextTick(() => this.leaveMenu());
     },
   },

package/src/{Image → components/Image}/VTImage.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { specifyImageWidth } from "~/utils/images";
+import { handleImageResizing } from "../../utils/images";
 
 export default {
   name: "VTImage",
@@ -46,7 +46,7 @@ export default {
         }
 
         if (this.cdnSrc) {
-          return this.specifyImageWidth(this.cdnSrc, this.$attrs.width);
+          return this.handleImageResizing(this.cdnSrc, this.$attrs.width);
         }
 
         if (this.src) {
@@ -59,7 +59,7 @@ export default {
   },
 
   methods: {
-    specifyImageWidth,
+    handleImageResizing,
 
     onLoad() {
       this.isLoaded = true;

package/src/{Listbox → components/Listbox}/VTListbox.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTListbox',
+  name: "VTListbox",
 
   provide() {
     return {
@@ -47,8 +47,8 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit('input', value);
-          this.$emit('change', value);
+          this.$emit("input", value);
+          this.$emit("change", value);
         };
 
         return {

package/src/{Listbox → components/Listbox}/VTListboxContent.vue

@@ -32,12 +32,12 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTListboxContent',
+  name: "VTListboxContent",
 
-  inject: ['api'],
+  inject: ["api"],
 
   props: {
     headless: {
@@ -104,7 +104,7 @@ export default {
     this.api().registerContent(content);
 
     // TODO: Create a directive or mixin for this
-    document.addEventListener('click', (e) => {
+    document.addEventListener("click", (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
     });
@@ -112,7 +112,7 @@ export default {
 
   destroyed() {
     // TODO: Create a directive or mixin for this
-    document.removeEventListener('click', this.trigger.onClick());
+    document.removeEventListener("click", this.trigger.onClick());
   },
 
   methods: {

package/src/{Listbox → components/Listbox}/VTListboxItem.vue

@@ -29,13 +29,13 @@
 </template>
 
 <script>
-import { scrollElementIntoView } from '~/utils/components';
-import { genId } from '~/utils/ids';
+import { scrollElementIntoView } from "../../utils/components";
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTListboxItem',
+  name: "VTListboxItem",
 
-  inject: ['api'],
+  inject: ["api"],
 
   props: {
     headless: {

package/src/{Listbox → components/Listbox}/VTListboxList.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTListboxList',
+  name: "VTListboxList",
 
-  inject: ['api'],
+  inject: ["api"],
 
   props: {
     headless: {

package/src/{Popover → components/Popover}/VTPopover.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTPopover',
+  name: "VTPopover",
 
   provide() {
     return {

package/src/{Popover → components/Popover}/VTPopoverContent.vue

@@ -13,8 +13,7 @@
       :id="id"
       :class="{
         PopoverPanel: headless,
-        'absolute top-full mt-3 rounded-md shadow-300 ':
-          !headless,
+        'absolute top-full mt-3 rounded-md shadow-300 ': !headless,
         'bg-white': !dark,
         'border-gray-700 bg-forest-default shadow-gray-700': dark,
         'left-0': !right,
@@ -27,12 +26,12 @@
 </template>
 
 <script>
-import { genId } from '~/utils/ids';
+import { genId } from "../../utils/ids";
 
 export default {
-  name: 'VTPopoverContent',
+  name: "VTPopoverContent",
 
-  inject: ['api'],
+  inject: ["api"],
 
   data() {
     return {
@@ -59,7 +58,7 @@ export default {
     this.api().registerContent(this);
 
     // TODO: Create a directive or mixin for this
-    document.addEventListener('click', (e) => {
+    document.addEventListener("click", (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.hide();
     });
@@ -67,7 +66,7 @@ export default {
 
   destroyed() {
     // TODO: Create a directive or mixin for this
-    document.removeEventListener('click', this.hide());
+    document.removeEventListener("click", this.hide());
   },
 
   methods: {

package/src/{Tabs → components/Tabs}/VTTab.vue

@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { keys } from '../utils/keyboard';
+import { keys } from "../../utils/keyboard";
 
 export default {
-  name: 'VTTabItem',
+  name: "VTTabItem",
 
-  inject: ['api'],
+  inject: ["api"],
 
   data() {
     return {
@@ -85,7 +85,7 @@ export default {
 
     onClick() {
       this.api.selectTab(this.index);
-      this.$emit('change');
+      this.$emit("change");
     },
 
     onKeyDown(event) {

package/src/utils/images.js

@@ -0,0 +1,38 @@
+export const handleImageResizing = (url, width) => {
+  // early exit if url is null for whatever reason
+  if (!url) {
+    return '';
+  }
+
+  let cdn;
+
+  if (typeof url === 'object') {
+    cdn = url.cdn_url;
+  } else if (typeof url === 'string') {
+    cdn = JSON.parse(url).cdn_url;
+  }
+
+  const base64String = cdn.split('net/');
+  const firstPart = base64String[0];
+
+  // if atob is crossed and your editor says is not supported,
+  // don't worry, it seems to be about NodeJS and not about
+  // browsers.
+  //
+  // Details: https://developer.mozilla.org/en-US/docs/Web/API/atob
+  const decodedString = JSON.parse(atob(base64String[1]));
+
+  width
+    ? (decodedString.edits.resize.width = width)
+    : (decodedString.edits.resize.width = 450);
+
+  // if btoa is crossed and your editor says is not supported,
+  // don't worry, it seems to be about NodeJS and not about
+  // browsers.
+  //
+  // Details: https://developer.mozilla.org/en-US/docs/Web/API/atob
+  const encodedString = btoa(JSON.stringify(decodedString));
+  const encodedUrl = `${firstPart}net/${encodedString}`;
+
+  return encodedUrl;
+};