@veritree/ui 0.19.2 → 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

@@ -1,26 +1,33 @@
-import { join } from 'path';
+import { defineNuxtModule } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
 
 const components = [
-  'src/components/Alert',
-  'src/components/Avatar',
-  'src/components/Button',
-  'src/components/Drawer',
-  'src/components/Dialog',
-  'src/components/Disclosure',
-  'src/components/DropdownMenu',
-  'src/components/Form',
-  'src/components/Listbox',
-  'src/components/Image',
-  'src/components/Popover',
-  'src/components/ProgressBar',
-  'src/components/Tabs',
-]
+  './src/components/Alert',
+  './src/components/Avatar',
+  './src/components/Button',
+  './src/components/Checkbox',
+  './src/components/Drawer',
+  './src/components/Dialog',
+  './src/components/Disclosure',
+  './src/components/DropdownMenu',
+  './src/components/Form',
+  './src/components/Listbox',
+  './src/components/Image',
+  './src/components/Popover',
+  './src/components/ProgressBar',
+  './src/components/Skeleton',
+  './src/components/Tabs',
+  './src/components/Tooltip',
+];
 
-export default function () {
-  this.nuxt.hook('components:dirs', dirs => {
-    // Add ./components dir to the list
-    components.forEach((component) => {
-      dirs.push(join(__dirname, component))
-    });
-  })
-}
+export default defineNuxtModule({
+  hooks: {
+    'components:dirs'(dirs) {
+      components.forEach((component) => {
+        dirs.push({
+          path: fileURLToPath(new URL(component, import.meta.url)),
+        });
+      });
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2",
+  "version": "0.20.0-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,8 +11,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.19.0"
+    "@floating-ui/dom": "^1.0.4",
+    "@veritree/icons": "^0.45.1"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@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,19 +30,18 @@
         : 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
       :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,
       ]"
     >
@@ -116,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

@@ -1,38 +1,34 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <div
-      v-if="visible"
+      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>
     </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 {
-      api: () => {
-        const id = this.id;
+      apiDialog: () => {
         const componentId = this.componentId;
-        const isDark = this.dark;
-        const isHeadless = this.headless;
 
         const registerContent = (content) => {
           if (!content) return;
@@ -48,26 +44,22 @@ export default {
 
         const emit = () => this.emit();
 
+        const full = this.full;
+
         return {
-          id,
           componentId,
-          isDark,
-          isHeadless,
           hide,
           emit,
           registerContent,
           registerOverlay,
+          full,
         };
       },
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -75,7 +67,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
+    full: {
       type: Boolean,
       default: false,
     },
@@ -94,6 +86,10 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    classes() {
+      return !this.full ? 'p-4 md:p-6' : '';
+    },
+
     hasContent() {
       return this.content !== null;
     },
@@ -103,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: {
@@ -122,7 +112,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },