@veritree/ui 0.24.0 → 0.25.0-0

package/src/components/Button/VTButton.vue

@@ -3,7 +3,6 @@
   <component
     :is="tag"
     :to="to"
-    :href="href || to"
     :type="type"
     :disabled="isDisabled"
     :class="[
@@ -17,11 +16,15 @@
       headless
         ? `button--${variant}`
         : isPrimary
-        ? 'bg-secondary-400 hover:bg-secondary-500 focus:bg-secondary-600 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
+        ? 'bg-secondary-400 hover:bg-secondary-500 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
         : isSecondary
-        ? 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 hover:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
+        ? isGhost
+          ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
+          : '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
-        ? 'text-secondary-400 hover:text-secondary-500 focus:text-secondary-600 active:text-secondary-600 border-transparent disabled:text-gray-400'
+        ? 'text-secondary-400 hover:text-secondary-500 active:text-secondary-500 border-transparent disabled:text-gray-400'
+        : isDark
+        ? 'border-transparent bg-gray-800 text-white hover:bg-gray-700 active:bg-gray-600 disabled:bg-gray-200 disabled:text-gray-400'
         : isIcon
         ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
         : null,
@@ -31,14 +34,13 @@
         : isLarge
         ? isIcon
           ? 'h-8 w-8'
-          : 'h-10'
+          : 'h-12 sm: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
@@ -73,10 +75,6 @@ export default {
       type: [String, Object],
       default: null,
     },
-    href: {
-      type: [String, Object],
-      default: null,
-    },
     headless: {
       type: Boolean,
       default: false,
@@ -89,6 +87,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    style: {
+      type: String,
+      default: 'normal', // normal or ghost
+    },
   },
 
   computed: {
@@ -104,6 +106,10 @@ export default {
       return this.variant === 'tertiary';
     },
 
+    isDark() {
+      return this.variant === 'dark';
+    },
+
     isIcon() {
       return this.variant === 'icon';
     },
@@ -120,8 +126,16 @@ export default {
       return this.disabled || this.busy;
     },
 
+    isGhost() {
+      return this.style === 'ghost';
+    },
+
     tag() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.$attrs.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
 
     type() {

package/src/components/Checkbox/VTCheckbox.vue

@@ -0,0 +1,134 @@
+<template>
+  <input
+    type="checkbox"
+    v-model="modelValueComputed"
+    :value="value"
+    :checked="checked"
+    :disabled="disabled"
+    :indeterminate="indeterminate"
+    :class="[
+      headless
+        ? 'input-checkbox'
+        : 'h-[18px] w-[18px] shrink-0 appearance-none rounded border border-solid bg-no-repeat align-middle focus-visible:ring-2 focus-visible:ring-white',
+      headless
+        ? `input-checkbox--${variant}`
+        : isError
+        ? 'border-error-300'
+        : 'border-gray-300',
+      checked
+        ? headless
+          ? 'input-checkbox--checked'
+          : 'border-secondary-300 bg-secondary-300'
+        : null,
+      disabled
+        ? headless
+          ? 'input-checkbox--disabled'
+          : 'pointer-events-none bg-gray-100'
+        : null,
+      indeterminate
+        ? headless
+          ? 'input-checkbox--indeterminate'
+          : 'border-secondary-200 bg-secondary-200'
+        : null,
+    ]"
+    v-bind="$attrs"
+    @change="onChange"
+  />
+</template>
+
+<script>
+/**
+ * Notes:
+ * - Not tested with an array yet
+ */
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: [Array, Boolean],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+    value: {
+      type: [Boolean, Object],
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      checked: false,
+    };
+  },
+
+  computed: {
+    modelValueComputed: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit('update:modelValue', value);
+      },
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+
+  watch: {
+    indeterminate(newVal) {
+      this.checked = !newVal;
+      this.$el.indeterminate = newVal;
+    },
+
+    checked(newVal) {
+      if (newVal) {
+        this.$el.indeterminate = false;
+        this.$emit('update:indeterminate', false);
+      }
+    },
+  },
+
+  mounted() {
+    if (this.indeterminate) {
+      this.$el.indeterminate = this.indeterminate;
+    }
+  },
+
+  methods: {
+    onChange(event) {
+      this.checked = event.target.checked;
+    },
+  },
+};
+</script>
+
+<style scoped>
+input:not(.input-checkbox):checked,
+input:not(.input-checkbox):indeterminate {
+  background-size: cover;
+}
+
+input:not(.input-checkbox):checked {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z' fill='%23ffffff'/%3E%3Cpath d='M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z' fill='%23ffffff' /%3E%3C/svg%3E%0A");
+}
+
+input:not(.input-checkbox):indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%23ffffff'/%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+}
+</style>

package/src/components/Checkbox/VTCheckboxLabel.vue

@@ -0,0 +1,3 @@
+<template>
+  <label class="flex items-start gap-2"><slot /></label>
+</template>

package/src/components/Checkbox/VTCheckboxText.vue

@@ -0,0 +1,20 @@
+<template>
+  <component :is="as" :class="[headless ? 'input-checkbox-text' : 'text-sm']"
+    ><slot />
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Dialog/VTDialog.vue

@@ -1,31 +1,29 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
-      :class="[
+      :class="
         headless
           ? 'dialog'
-          : 'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8',
-      ]"
+          : `fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 ${classes}`
+      "
       aria-modal="true"
+      v-bind="$attrs"
       @click="onClick"
     >
       <slot></slot>
     </div>
-  </Portal>
+  </Teleport>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDialog',
 
-  components: {
-    Portal,
-  },
+  inheritAttrs: false,
 
   provide() {
     return {
@@ -46,23 +44,22 @@ export default {
 
         const emit = () => this.emit();
 
+        const full = this.full;
+
         return {
           componentId,
           hide,
           emit,
           registerContent,
           registerOverlay,
+          full,
         };
       },
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -70,6 +67,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    full: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -85,6 +86,10 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    classes() {
+      return !this.full ? 'p-4 md:p-6' : '';
+    },
+
     hasContent() {
       return this.content !== null;
     },
@@ -94,15 +99,9 @@ export default {
     },
   },
 
-  watch: {
-    visible(isVisible) {
-      if (!isVisible) this.hide();
-    },
-  },
-
   mounted() {
     if (this.hasContent) this.content.show();
-    if (this.hasOverlay) this.overlay.show();
+    // if (this.hasOverlay) this.overlay.show();
   },
 
   methods: {
@@ -113,7 +112,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },

package/src/components/Dialog/VTDialogClose.vue

@@ -6,7 +6,7 @@
     @click.prevent="hide"
   >
     <slot>
-      <IconClose class="h-5 w-5" />
+      <IconClose class="h-4 w-4" />
     </slot>
   </VTButton>
 </template>

package/src/components/Dialog/VTDialogContent.vue

@@ -1,21 +1,21 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-class="translate-y-[50px] opacity-0"
+    enter-from-class="translate-y-[50px] opacity-0"
     enter-to-class="translate-y-0 opacity-100"
     leave-active-class="duration-300 ease-out"
-    leave-class="translate-y-0 opacity-100"
+    leave-from-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[50px] opacity-0"
     @after-leave="hideDialog"
   >
     <div
       v-show="visible"
       :id="id"
-      :class="[
+      :class="
         headless
           ? 'dialog-content'
-          : 'relative m-auto flex max-h-full max-w-full flex-col overflow-auto rounded bg-white p-6 focus:outline-none sm:p-10',
-      ]"
+          : `relative m-auto flex flex-col overflow-auto rounded bg-white p-4 focus:outline-none lg:p-6 ${classes}`
+      "
       tabindex="-1"
       @keydown.esc.stop="hide"
     >
@@ -47,6 +47,14 @@ export default {
     id() {
       return `dialog-content-${this.apiDialog().componentId}`;
     },
+
+    classes() {
+      return this.full ? 'h-screen w-screen' : 'max-h-full max-w-full';
+    },
+
+    full() {
+      return this.apiDialog().full;
+    },
   },
 
   mounted() {

package/src/components/Dialog/VTDialogFooter.vue

@@ -1,5 +1,12 @@
 <template>
-  <component :is="as" :class="[headless ? 'dialog-footer' : 'w-full']">
+  <component
+    :is="as"
+    :class="[
+      headless
+        ? 'dialog-footer'
+        : '-mx-4 -mb-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mb-6 md:p-6',
+    ]"
+  >
     <slot></slot>
   </component>
 </template>
@@ -7,7 +14,6 @@
 <script>
 export default {
   name: 'VTDialogFooter',
-
   props: {
     headless: {
       type: Boolean,

package/src/components/Dialog/VTDialogHeader.vue

@@ -5,8 +5,9 @@
     :class="[
       headless
         ? 'dialog-header'
-        : 'mb-8 flex w-full items-center justify-between gap-x-3',
+        : '-mx-4 -mt-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mt-6 md:p-6',
     ]"
+    @click.stop
   >
     <slot></slot>
   </component>

package/src/components/Dialog/VTDialogMain.vue

@@ -2,7 +2,7 @@
   <component
     :is="as"
     :id="id"
-    :class="[headless ? 'dialog-body' : 'h-full w-full flex-1 overflow-y-auto']"
+    :class="[headless ? 'dialog-body' : 'h-full flex-1 overflow-y-auto']"
   >
     <slot></slot>
   </component>

package/src/components/Dialog/VTDialogOverlay.vue

@@ -3,7 +3,11 @@
     <div
       v-if="visible"
       :id="id"
-      :class="[headless ? 'dialog-overlay' : 'bg-primary-200/80 fixed inset-0']"
+      :class="[
+        headless
+          ? 'dialog-overlay'
+          : 'bg-primary-200/80 dark:bg-primary-100/80 fixed inset-0',
+      ]"
     />
   </FadeInOut>
 </template>

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -59,7 +59,7 @@ export default {
     this.apiDisclosure().register('contents', content);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('contents', this.id);
   },
 

package/src/components/Disclosure/VTDisclosureDetails.vue

@@ -63,7 +63,7 @@ export default {
     this.apiDisclosure().register('details', detail);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('details', this.id);
   },
 

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -4,7 +4,7 @@
     :class="[
       headless
         ? 'details-header'
-        : 'flex cursor-pointer justify-between gap-3 text-body font-semibold',
+        : 'text-body flex cursor-pointer justify-between gap-3 font-semibold',
     ]"
     :aria-controls="ariaControls"
     :aria-expanded="String(ariaExpanded)"
@@ -78,7 +78,7 @@ export default {
     this.apiDisclosure().register('headers', header);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('headers', this.id);
   },
 

package/src/components/Disclosure/VTDisclosureIcon.vue

@@ -50,7 +50,7 @@ export default {
     this.apiDisclosure().register('icons', icon);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('icons', this.id);
   },
 

package/src/components/Drawer/VTDrawer.vue

@@ -1,7 +1,7 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
       :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
       aria-modal="true"
@@ -9,23 +9,18 @@
     >
       <slot></slot>
     </div>
-  </Portal>
+  </Teleport>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDrawer',
 
-  components: {
-    Portal,
-  },
-
   provide() {
     return {
-      api: () => {
+      apiDrawer: () => {
         const id = this.id;
         const isDark = this.dark;
         const isHeadless = this.headless;
@@ -58,12 +53,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -117,7 +108,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },

package/src/components/Drawer/VTDrawerClose.vue

@@ -20,19 +20,19 @@ export default {
 
   components: { IconLeft, VTButton },
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiDrawer().isRight;
     },
 
     // temporary till button theme is implemented
@@ -43,7 +43,7 @@ export default {
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDrawer().hide();
     },
   },
 };

package/src/components/Drawer/VTDrawerContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     :enter-active-class="activeClass"
-    :enter-class="enterClass"
+    :enter-from-class="enterClass"
     :enter-to-class="enterToClass"
     :leave-active-class="activeClass"
-    :leave-class="leaveClass"
+    :leave-from-class="leaveClass"
     :leave-to-class="leaveToClass"
     @after-leave="hideDrawer"
   >
@@ -12,7 +12,7 @@
       v-show="visible"
       :class="{
         'Drawer-content': headless,
-        'fixed z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
+        'absolute z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
           !headless,
         'bg-white text-gray-600': !dark,
         'bg-fd-600': dark,
@@ -22,7 +22,7 @@
         'bottom-0': position === 'bottom',
       }"
       tabindex="-1"
-      @keydown.esc.stop="hide"
+      @keyup.esc="hide"
     >
       <slot></slot>
     </div>
@@ -33,7 +33,7 @@
 export default {
   name: 'VTDrawerContent',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   data() {
     return {
@@ -43,15 +43,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     position() {
-      return this.api().position;
+      return this.apiDrawer().position;
     },
 
     activeClass() {
@@ -132,7 +132,7 @@ export default {
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDrawer().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -148,7 +148,7 @@ export default {
     },
 
     hideDrawer() {
-      this.api().emit();
+      this.apiDrawer().emit();
     },
   },
 };