@veritree/ui 0.27.0 → 0.28.0-1

package/mixins/form-control.js

@@ -1,9 +1,4 @@
 export const formControlMixin = {
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
   props: {
     disabled: {
       type: Boolean,
@@ -13,41 +8,61 @@ export const formControlMixin = {
       type: Boolean,
       default: false,
     },
-    value: {
-      type: [String, Number, Object, Array],
+    modelValue: {
+      type: [String, Number, Object, Array, Date],
       default: null,
     },
     variant: {
       type: [String, Object, Function],
       default: '',
     },
+
+    /**
+     * Specifies the size of the button
+     *
+     * @values
+     * - 'small': A smaller size for the button
+     * - 'large': A larger size for the button
+     */
+    size: {
+      type: String,
+      default: 'large',
+    },
+    min: {
+      type: [String, Number],
+      default: null,
+    },
   },
 
   computed: {
-    listeners() {
+    attrsComputed() {
       // `Object.assign` merges objects together to form a new object
       return Object.assign(
         {},
         // We add all the listeners from the parent
-        this.$listeners,
+        this.$attrs,
         // Then we can add custom listeners or override the
         // behavior of some listeners.
         {
           // This ensures that the component works with v-model
-          input: (event) => {
+          onInput: (event) => {
             // if (this.lazy) return;
-            this.$emit('input', event.target.value);
+            this.$emit('update:modelValue', event.target.value);
           },
-          blur: (event) => {
+          onBlur: (event) => {
             this.$emit('blur', event);
           },
-        }
+        },
       );
     },
 
     isError() {
       return this.variant === 'error';
     },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
   },
 };
 
@@ -56,20 +71,30 @@ export const formControlStyleMixin = {
     classComputed() {
       return [
         this.headless
-          ? `${this.name}`
-          : 'leading-0 flex 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',
+          ? `${this.name ? this.name : ''}`
+          : 'leading-0 bg-white has-[:disabled]:bg-gray-200 disabled:bg-gray-200 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-inherit file:hidden focus-within:border-gray-600 focus:border-gray-600 focus-within:placeholder:text-gray-400 focus:placeholder:text-gray-400 has-[:disabled]:text-gray-500 disabled:text-gray-500',
         // variant styles
         this.headless
-          ? `${this.name}--${this.variant}`
+          ? `${this.name ? this.name : ''}${this.variant ? '--' + this.variant : ''}`
           : this.isError
-          ? 'border-error-300'
-          : 'border-gray-300',
+            ? 'border-error-300'
+            : this.isSuccess
+              ? 'border-success-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-10',
+            ? 'min-h-10' // limit it because input type number height can be different from other input types
+            : this.size === 'small'
+              ? 'h-8 text-sm'
+              : 'h-10 text-base',
+        // disabled styles
+        this.disabled
+          ? this.headless
+            ? `${this.name}--disabled`
+            : null
+          : null,
       ];
     },
   },

package/nuxt.js

@@ -1,29 +1,41 @@
-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/Skeleton',
-  'src/components/Spinner',
-  'src/components/Tabs',
-  'src/components/Tooltip',
-]
+  './src/components/Alert',
+  './src/components/Avatar',
+  './src/components/Badge',
+  './src/components/Breadcrumb',
+  './src/components/Button',
+  './src/components/Carousel',
+  './src/components/Checkbox',
+  './src/components/Chip',
+  './src/components/Dialog',
+  './src/components/Disclosure',
+  './src/components/Divider',
+  './src/components/Drawer',
+  './src/components/DropdownMenu',
+  './src/components/Form',
+  './src/components/Image',
+  './src/components/Listbox',
+  './src/components/Popover',
+  './src/components/ProgressBar',
+  './src/components/ScrollShadows',
+  './src/components/Separator',
+  './src/components/Skeleton',
+  './src/components/Switch',
+  './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,23 +1,34 @@
 {
   "name": "@veritree/ui",
-  "version": "0.27.0",
+  "version": "0.28.0-1",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
   "repository": "https://github.com/tentree-org/veritree-ui.git",
-  "author": "cyroveritree <cyro@veritree.com>",
+  "author": "jb",
   "license": "MIT",
   "publishConfig": {
-    "access": "public"
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "release": "np --no-tests --no-2fa --branch=next",
+    "release-v2": "yarn publish && yarn push-tag",
+    "push-tag": "git push origin v$(node -p \"require('./package.json').version\")"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.4",
-    "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.39.0"
+    "@floating-ui/dom": "^1.4.5",
+    "@internationalized/date": "^3.12.0",
+    "reka-ui": "^2.9.2"
   },
   "devDependencies": {
+    "@nuxt/kit": "^4.4.2",
+    "np": "^8.0.4",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.4"
+  },
+  "engines": {
+    "npm": ">=8.0.0",
+    "node": ">=18.0.0"
   }
 }

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/VTAvatarImage.vue

@@ -1,25 +1,13 @@
 <template>
-  <VTImage
-    v-if="src"
-    :src="src"
-    v-bind="attrs"
-    :width="width"
-    :height="height"
-  />
-  <VTImage
-    v-else-if="cdnSrc"
-    :cdn-src="cdnSrc"
-    v-bind="attrs"
-    :width="width"
-    :height="height"
-  />
+  <VTImage v-if="src" :src="src" v-bind="attrs" width="40" />
+  <VTImage v-else-if="cdnSrc" :cdn-src="cdnSrc" v-bind="attrs" width="40" />
 </template>
 
 <script>
-import VTImage from '../Image/VTImage.vue';
+import VTImage from "../Image/VTImage.vue";
 
 export default {
-  name: 'VTAvatarImage',
+  name: "VTAvatarImage",
 
   components: { VTImage },
 
@@ -30,27 +18,19 @@ export default {
     },
     src: {
       type: String,
-      default: '',
+      default: "",
     },
     cdnSrc: {
       type: [String, Object],
       default: null,
     },
-    width: {
-      type: String,
-      default: '40',
-    },
-    height: {
-      type: String || null,
-      default: null,
-    },
   },
 
   computed: {
     attrs() {
       return {
         alt: this.alt,
-        class: 'h-auto w-full',
+        class: "h-auto w-full",
       };
     },
   },

package/src/components/Badge/VTBadge.vue

@@ -0,0 +1,60 @@
+<template>
+  <span
+    :class="[
+      // default styles
+      headless
+        ? 'badge'
+        : 'ml-auto flex min-w-5 place-content-center rounded-xl  p-1 text-xs leading-none ',
+      // variant styles
+      headless
+        ? `badge--${variant}`
+        : isDefault
+          ? 'bg-gray-800 text-white'
+          : isSuccess
+            ? 'bg-success-200 text-success-700'
+            : isError
+              ? 'bg-error-200 text-error-700'
+              : isWarning
+                ? 'bg-warning-200 text-warning-700'
+                : null,
+      // sizes styles
+    ]"
+  >
+    <slot />
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'VTBadge',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+
+  computed: {
+    isDefault() {
+      return this.variant === 'default';
+    },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+  },
+};
+</script>

package/src/components/Badge/VTBadgeNew.vue

@@ -0,0 +1,60 @@
+<template>
+  <span
+    :class="[
+      // default styles
+      headless
+        ? 'badge'
+        : 'ml-auto flex min-w-5 place-content-center rounded-xl  p-1 text-xs leading-none ',
+      // variant styles
+      headless
+        ? `badge--${variant}`
+        : isDefault
+          ? 'bg-gray-800 text-white'
+          : isSuccess
+            ? 'bg-success-200 text-success-700'
+            : isError
+              ? 'bg-error-200 text-error-700'
+              : isWarning
+                ? 'bg-warning-200 text-warning-700'
+                : null,
+      // sizes styles
+    ]"
+  >
+    <slot />
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'VTBadgeNew',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+
+  computed: {
+    isDefault() {
+      return this.variant === 'default';
+    },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+  },
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbItem.vue

@@ -0,0 +1,11 @@
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'VTBreadcrumbItem',
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbLink.vue

@@ -0,0 +1,40 @@
+<template>
+  <component :is="as" v-bind="linkProps" class="link-base link-underlined">
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTBreadcrumbLink',
+
+  props: {
+    href: {
+      type: String,
+      default: null,
+    },
+    to: {
+      type: String,
+      default: null,
+    },
+  },
+
+  computed: {
+    as() {
+      return this.href ? 'a' : this.to ? resolveComponent('NuxtLink') : 'button';
+    },
+
+    linkProps() {
+      if (this.href) {
+        return { href: this.href };
+      }
+
+      if (this.to) {
+        return { to: this.to };
+      }
+
+      return {};
+    },
+  },
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbList.vue

@@ -0,0 +1,11 @@
+<template>
+  <ol class="flex gap-x-0.5 gap-y-1 font-medium flex-wrap text-sm">
+    <slot />
+  </ol>
+</template>
+
+<script>
+export default {
+  name: 'VTBreadcrumbList',
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbRoot.vue

@@ -0,0 +1,11 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <slot />
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'VTBreadcrumbRoot',
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbSeparator.vue

@@ -0,0 +1,19 @@
+<template>
+  <li>
+    <slot>
+      <IconChevronRight />
+    </slot>
+  </li>
+</template>
+
+<script>
+import { IconChevronRight } from '@veritree/icons';
+
+export default {
+  name: 'VTBreadcrumbSeparator',
+
+  components: {
+    IconChevronRight,
+  },
+};
+</script>