@veritree/ui 0.19.2-9 → 0.20.0-0

package/mixins/form-control.js

@@ -0,0 +1,71 @@
+export const formControlMixin = {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: [String, Number, Object, Array],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+  },
+
+  computed: {
+    attrsComputed() {
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign(
+        {},
+        // We add all the listeners from the parent
+        this.$attrs,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          onInput: (event) => {
+            // if (this.lazy) return;
+            this.$emit('update:modelValue', event.target.value);
+          },
+          onBlur: (event) => {
+            this.$emit('blur', event);
+          },
+        }
+      );
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};
+
+export const formControlStyleMixin = {
+  computed: {
+    classComputed() {
+      return [
+        this.headless
+          ? `${this.name}`
+          : 'leading-0 flex outline-none w-full max-w-full appearance-none items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200 appearance-none',
+        // variant styles
+        this.headless
+          ? `${this.name}--${this.variant}`
+          : this.isError
+          ? 'border-error-300'
+          : 'border-gray-300',
+        // height styles
+        this.headless
+          ? null
+          : this.name === 'textarea'
+          ? 'min-h-10' // limit it because input type number height can be different from other input types
+          : 'h-12 md:h-10',
+      ];
+    },
+  },
+};

package/nuxt.js

@@ -5,6 +5,7 @@ const components = [
   './src/components/Alert',
   './src/components/Avatar',
   './src/components/Button',
+  './src/components/Checkbox',
   './src/components/Drawer',
   './src/components/Dialog',
   './src/components/Disclosure',
@@ -14,7 +15,9 @@ const components = [
   './src/components/Image',
   './src/components/Popover',
   './src/components/ProgressBar',
+  './src/components/Skeleton',
   './src/components/Tabs',
+  './src/components/Tooltip',
 ];
 
 export default defineNuxtModule({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-9",
+  "version": "0.20.0-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,9 +11,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@veritree/icons": "^0.36.1-0"
+    "@floating-ui/dom": "^1.0.4",
+    "@veritree/icons": "^0.45.1"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0"
+    "@nuxt/kit": "^3.0.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "tailwindcss": "^3.2.4"
   }
 }

package/src/components/Alert/VTAlert.vue

@@ -1,11 +1,9 @@
 <template>
   <div
-    v-if="show"
+    v-if="isVisible"
     :class="[
       // default styles
-      headless
-        ? 'alert'
-        : 'flex items-start gap-3 rounded border border-solid p-3',
+      headless ? 'alert' : 'flex items-start gap-3 rounded border border-solid',
       // variant styles
       headless
         ? `alert--${variant}`
@@ -16,6 +14,14 @@
         : isWarning
         ? 'border-warning-300 bg-warning-200 text-warning-700'
         : null,
+      // sizes styles
+      headless
+        ? `alert--${size}`
+        : isLarge
+        ? 'p-3'
+        : isSmall
+        ? 'py-1 px-2 text-sm'
+        : null,
     ]"
     role="alert"
   >
@@ -23,9 +29,15 @@
     <button
       v-if="dismissable"
       :class="[
-        !headless
-          ? 'ml-auto mt-1 h-4 w-4 shrink-0 text-current'
-          : 'alert-close',
+        // default styles
+        headless ? 'alert-close' : 'ml-auto  h-4 w-4 shrink-0 text-current',
+        headless
+          ? `alert-close--${variant}`
+          : isLarge
+          ? 'mt-1'
+          : isSmall
+          ? 'mt-0.5'
+          : null,
       ]"
       @click="hide"
     >
@@ -35,14 +47,30 @@
 </template>
 
 <script>
+import IconClose from '@veritree/icons/src/components/IconClose.vue';
+
 export default {
   name: 'VTAlert',
 
+  components: {
+    IconClose,
+  },
+
+  data() {
+    return {
+      modelValueLocal: true,
+    };
+  },
+
   props: {
     variant: {
       type: String,
       default: 'success',
     },
+    size: {
+      type: String,
+      default: 'large',
+    },
     headless: {
       type: Boolean,
       default: false,
@@ -51,12 +79,10 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-
-  data() {
-    return {
-      show: true,
-    };
+    modelValue: {
+      type: Boolean,
+      default: null,
+    },
   },
 
   computed: {
@@ -71,12 +97,27 @@ export default {
     isWarning() {
       return this.variant === 'warning';
     },
+
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
+    },
+
+    isVisible() {
+      return this.modelValue !== null ? this.modelValue : this.modelValueLocal;
+    },
   },
 
   methods: {
     hide() {
+      this.modelValue !== null
+        ? this.$emit('update:modelValue', false)
+        : (this.modelValueLocal = false);
+
       this.$emit('dismiss');
-      this.show = false;
     },
   },
 };

package/src/components/Avatar/VTAvatar.vue

@@ -1,14 +1,21 @@
 <template>
   <div
-    :class="{
-      Avatar: headless,
-      'flex items-center justify-center overflow-hidden rounded-full':
-        !headless,
-      'h-10 w-10': !small,
-      'h-8 w-8': small,
-      'border border-solid': !dark,
-      'bg-white text-fd-500': dark,
-    }"
+    :class="[
+      // default styles
+      headless
+        ? 'avatar'
+        : 'flex items-center justify-center overflow-hidden rounded-full bg-white border border-solid',
+      // variant styles
+      headless ? `avatar--${variant}` : null,
+      // sizes styles
+      headless
+        ? `avatar--${size}`
+        : isSmall
+        ? 'h-8 w-8'
+        : isLarge
+        ? 'h-10 w-10'
+        : null,
+    ]"
   >
     <slot></slot>
   </div>
@@ -18,32 +25,28 @@
 export default {
   name: 'VTAvatar',
 
-  provide() {
-    return {
-      api: () => {
-        const { dark: isDark, headless: isHeadless, light: isLight } = this;
-
-        return {
-          isDark,
-          isHeadless,
-          isLight,
-        };
-      },
-    };
-  },
-
   props: {
     headless: {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
+    variant: {
+      type: String,
+      default: 'primary',
     },
-    small: {
-      type: Boolean,
-      default: false,
+    size: {
+      type: String,
+      default: 'large',
+    },
+  },
+
+  computed: {
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
     },
   },
 };

package/src/components/Button/VTButton.vue

@@ -16,11 +16,11 @@
       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'
+        ? '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 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'
+        ? 'text-secondary-400 hover:text-secondary-500 active:text-secondary-500 border-transparent disabled:text-gray-400'
         : isIcon
         ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
         : null,
@@ -30,7 +30,7 @@
         : isLarge
         ? isIcon
           ? 'h-8 w-8'
-          : 'h-10'
+          : 'h-12 sm:h-10'
         : isSmall
         ? isIcon
           ? 'h-6 w-6 p-1'
@@ -41,7 +41,7 @@
     <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 ? null : 'mx-auto inline-flex items-center gap-2 self-center',
         headless && busy ? 'button--busy' : busy ? 'invisible' : null,
       ]"
     >
@@ -115,7 +115,11 @@ export default {
     },
 
     tag() {
-      return this.$attrs.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

@@ -3,11 +3,13 @@
     <div
       v-if="modelValue"
       :id="id"
-      :class="{
-        Dialog: headless,
-        'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
-      }"
+      :class="
+        headless
+          ? 'dialog'
+          : `fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 ${classes}`
+      "
       aria-modal="true"
+      v-bind="$attrs"
       @click="onClick"
     >
       <slot></slot>
@@ -21,17 +23,12 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDialog',
 
-  components: {
-    Portal,
-  },
+  inheritAttrs: false,
 
   provide() {
     return {
       apiDialog: () => {
-        const id = this.id;
         const componentId = this.componentId;
-        const isDark = this.dark;
-        const isHeadless = this.headless;
 
         const registerContent = (content) => {
           if (!content) return;
@@ -47,15 +44,15 @@ export default {
 
         const emit = () => this.emit();
 
+        const full = this.full;
+
         return {
-          id,
           componentId,
-          isDark,
-          isHeadless,
           hide,
           emit,
           registerContent,
           registerOverlay,
+          full,
         };
       },
     };
@@ -70,7 +67,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
+    full: {
       type: Boolean,
       default: false,
     },
@@ -89,6 +86,10 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    classes() {
+      return !this.full ? 'p-4 md:p-6' : '';
+    },
+
     hasContent() {
       return this.content !== null;
     },
@@ -98,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: {

package/src/components/Dialog/VTDialogClose.vue

@@ -2,13 +2,13 @@
   <VTButton
     variant="icon"
     :id="id"
-    :class="{
-      'Dialog-close': headless,
-    }"
-    :theme="theme"
+    :class="[headless ? 'dialog-close' : null]"
     @click.prevent="hide"
-    ><slot><IconClose class="h-5 w-5" /></slot
-  ></VTButton>
+  >
+    <slot>
+      <IconClose class="h-4 w-4" />
+    </slot>
+  </VTButton>
 </template>
 
 <script>
@@ -22,23 +22,17 @@ export default {
 
   inject: ['apiDialog'],
 
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   computed: {
     id() {
       return `dialog-close-${this.apiDialog().componentId}`;
     },
-
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
-
-    // temporary till button theme is implemented
-    theme() {
-      return this.dark ? 'dark' : null;
-    },
   },
 
   methods: {