@veritree/ui 0.12.0 → 0.13.0

package/.prettierignore

@@ -0,0 +1,96 @@
+###
+# Place your Prettier ignore content here
+
+###
+# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
+
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

package/index.js

@@ -1,76 +1,71 @@
-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 VTAlert from "./src/components/Alert/VTAlert.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 VTButton from "./src/components/Button/VTButton.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 VTSpinner from "./src/components/Spinner/VTSpinner.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 VTAlert from "./src/Alerts/VTAlert.vue";
+import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
 
-import VTSpinner from "./src/Spinner/VTSpinner.vue";
+import VTModal from "./src/components/Modal/VTModal.vue";
 
-import VTButton from "./src/Button/VTButton.vue";
-// import VTButtonSave from './src/Button/VTButtonSave.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 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 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 VTTextarea from "./src/Textarea/VTTextarea.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 VTModal from "./src/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 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 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 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,
@@ -104,7 +99,6 @@ export {
   VTListboxSearch,
   VTListboxTrigger,
   VTButton,
-  // VTButtonSave,
   VTInput,
   VTInputDate,
   VTInputFile,

package/nuxt.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "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/components/Alert/VTAlert.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    v-if="show"
+    :class="[
+      // default styles
+      headless
+        ? 'alert'
+        : 'flex items-start gap-3 rounded border border-solid p-3',
+      // variant styles
+      headless
+        ? `alert--${variant}`
+        : isSuccess
+        ? 'border-success-300 bg-success-200 text-success-700'
+        : isError
+        ? 'border-error-300 bg-error-200 text-error-700'
+        : isWarning
+        ? 'border-warning-300 bg-warning-200 text-warning-700'
+        : null,
+    ]"
+    role="alert"
+  >
+    <slot></slot>
+    <button
+      v-if="dismissable"
+      :class="[
+        !headless
+          ? 'ml-auto mt-1 h-4 w-4 shrink-0 text-current'
+          : 'alert-close',
+      ]"
+      @click="hide"
+    >
+      <IconClose />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTAlert',
+
+  props: {
+    variant: {
+      type: String,
+      default: 'success',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dismissable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      show: true,
+    };
+  },
+
+  computed: {
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+  },
+
+  methods: {
+    hide() {
+      this.$emit('dismiss');
+      this.show = false;
+    },
+  },
+};
+</script>

package/src/components/Button/VTButton.vue

@@ -0,0 +1,126 @@
+<template>
+  <component
+    :is="tag"
+    :to="to"
+    :type="type"
+    :disabled="isDisabled"
+    :class="[
+      // default styles
+      headless
+        ? 'button'
+        : isIcon
+        ? 'inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
+        : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
+      // variant styles
+      headless
+        ? `button--${variant}`
+        : isPrimary
+        ? 'border-transparent bg-secondary-400 text-white hover:bg-secondary-500 active:bg-secondary-600 disabled:bg-gray-200 disabled:text-gray-400'
+        : isSecondary
+        ? 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
+        : isTertiary
+        ? 'border-transparent text-secondary-400 hover:text-secondary-500 active:text-secondary-500 disabled:text-gray-400'
+        : isIcon
+        ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
+        : null,
+      // sizes styles
+      headless
+        ? `button--${size}`
+        : isLarge
+        ? isIcon
+          ? 'h-8 w-8'
+          : 'h-10'
+        : isSmall
+        ? isIcon
+          ? 'h-6 w-6 p-1'
+          : 'h-8'
+        : null,
+    ]"
+    v-on="$listeners"
+  >
+    <VTSpinner v-if="busy" class="absolute inset-0 m-auto" />
+    <span
+      :class="[
+        headless ? null : 'inline-flex items-center gap-2 self-center mx-auto',
+        headless && busy ? 'button--busy' : busy ? 'invisible' : null,
+      ]"
+    >
+      <slot></slot>
+    </span>
+  </component>
+</template>
+
+<script>
+import VTSpinner from '../Spinner/VTSpinner.vue';
+
+export default {
+  name: 'VTButton',
+
+  components: { VTSpinner },
+
+  props: {
+    variant: {
+      type: String,
+      default: 'primary',
+    },
+    size: {
+      type: String,
+      default: 'large',
+    },
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    busy: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    isPrimary() {
+      return this.variant === 'primary';
+    },
+
+    isSecondary() {
+      return this.variant === 'secondary';
+    },
+
+    isTertiary() {
+      return this.variant === 'tertiary';
+    },
+
+    isIcon() {
+      return this.variant === 'icon';
+    },
+
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
+    },
+
+    isDisabled() {
+      return this.disabled || this.busy;
+    },
+
+    tag() {
+      return this.to ? 'NuxtLink' : 'button';
+    },
+
+    type() {
+      return this.to ? null : 'button';
+    },
+  },
+};
+</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('hidden');
+      this.$emit("hidden");
       this.api().unregisterItems();
     },
   },

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

@@ -5,7 +5,7 @@
     :to="to"
     :class="{
       MenuItem: headless,
-      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 text-inherit no-underline':
+      '-mx-3 flex min-w-max items-center gap-3 px-3 py-2 text-inherit no-underline':
         !headless,
       'hover:bg-secondary-200/10': !dark,
       'text-white hover:bg-fd-450 focus:bg-fd-450': dark,
@@ -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 { handleImageResizing } from "../utils/images";
+import { handleImageResizing } from "../../utils/images";
 
 export default {
   name: "VTImage",
@@ -58,10 +58,6 @@ export default {
     },
   },
 
-  mounted() {
-    console.log("mounted");
-  },
-
   methods: {
     handleImageResizing,
 

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/Alerts/VTAlert.vue

@@ -1,72 +0,0 @@
-<template>
-  <div v-if="isVisible" class="Alert" :class="classes" role="alert">
-    <slot></slot>
-    <button v-if="dismissable" class="Alert-close" @click="dismiss">
-      <IconClose />
-    </button>
-  </div>
-</template>
-
-<script>
-import { IconClose } from '@veritree/icons';
-
-export default {
-  name: 'VTAlert',
-
-  components: { IconClose },
-
-  model: {
-    prop: 'value',
-  },
-
-  props: {
-    dismissable: {
-      type: Boolean,
-      default: false,
-    },
-    variant: {
-      type: String,
-      default: '',
-      validate(value) {
-        if (value === '') return true;
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
-    value: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      destroy: false,
-    };
-  },
-
-  computed: {
-    classes() {
-      return {
-        [`Alert--${this.variant}`]: this.variant,
-      };
-    },
-
-    isVisible() {
-      return this.value && !this.destroy;
-    },
-  },
-
-  watch: {
-    isVisible(newVal) {
-      if (newVal === false) this.destroy = false;
-    },
-  },
-
-  methods: {
-    dismiss() {
-      this.destroy = true;
-      this.$emit('input', false);
-    },
-  },
-};
-</script>

package/src/Button/VTButton.vue

@@ -1,86 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :class="classes"
-    :data-theme="theme"
-    :to="to"
-    class="Button"
-    type="button"
-    v-on="$listeners"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'VTButton',
-
-  props: {
-    variant: {
-      type: String,
-      default: 'primary',
-      validator(value) {
-        return [
-          'primary',
-          'secondary',
-          'tertiary',
-          'danger',
-          'custom',
-          'icon',
-        ].includes(value);
-      },
-    },
-    size: {
-      type: String,
-      default: 'large',
-      validator(value) {
-        return ['large', 'small'].includes(value);
-      },
-    },
-    pill: {
-      type: Boolean,
-      default: false,
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    to: {
-      type: [String, Object],
-      default: null,
-    },
-  },
-
-  computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`Button--${this.variant}`] = true;
-      }
-
-      if (this.size) {
-        classes[`Button--${this.size}`] = true;
-      }
-
-      if (this.pill) {
-        classes['Button--pill'] = true;
-      }
-
-      return classes;
-    },
-
-    tag() {
-      if (this.to) {
-        return 'NuxtLink';
-      }
-
-      return 'button';
-    },
-  },
-};
-</script>

package/src/Button/VTButtonSave.vue

@@ -1,27 +0,0 @@
-<template>
-  <VTButton
-    class="relative"
-    :disabled="saving"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <VTSpinner v-if="saving" class="absolute m-auto" />
-    <span :class="{ invisible: saving }"><slot></slot></span>
-  </VTButton>
-</template>
-
-<script>
-import VTButton from '../Button/VTButton.vue';
-import VTSpinner from '../Spinner/VTSpinner.vue';
-
-export default {
-  components: { VTButton, VTSpinner },
-
-  props: {
-    saving: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>