@veritree/ui 0.19.2-1 → 0.19.2-11

package/mixins/form-control-icon.js

@@ -0,0 +1,53 @@
+import { formControlMixin } from '../mixins/form-control';
+
+export const formControlIconMixin = {
+  inheritAttrs: false,
+
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'input',
+    };
+  },
+
+  computed: {
+    isLeft() {
+      return this.iconPlacement === 'left';
+    },
+
+    isRight() {
+      return this.iconPlacement === 'right';
+    },
+
+    classComputedWrapper() {
+      return [
+        this.headless ? 'form-control-wrapper' : 'relative',
+        // placement styles
+        this.headless
+          ? `form-control-icon--${this.placement}`
+          : this.isLeft
+          ? '[&_input]:pl-9'
+          : this.isRight
+          ? '[&_input]:pr-9'
+          : null,
+      ];
+    },
+
+    classComputedWrapperIcon() {
+      return [
+        this.headless
+          ? 'form-control-wrapper__icon'
+          : `absolute top-0 bottom-0 flex w-9 justify-center items-center text-gray-400`,
+        // placement styles
+        this.headless
+          ? null
+          : this.isLeft
+          ? 'left-0'
+          : this.isRight
+          ? 'right-0'
+          : null,
+      ];
+    },
+  },
+};

package/mixins/form-control.js

@@ -0,0 +1,67 @@
+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);
+          },
+        }
+      );
+    },
+
+    classComputed() {
+      return [
+        this.headless
+          ? `${this.name}`
+          : 'leading-0 flex w-full max-w-full appearance-none items-center justify-between gap-3 rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200',
+        // 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-10',
+      ];
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-1",
+  "version": "0.19.2-11",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,9 +11,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@veritree/icons": "^0.36.0"
+    "@veritree/icons": "^0.36.1-0"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0-rc.12"
+    "@nuxt/kit": "^3.0.0"
   }
 }

package/src/components/Button/VTButton.vue

@@ -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/Dialog/VTDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
       :class="{
         Dialog: headless,
@@ -27,7 +27,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
+      apiDialog: () => {
         const id = this.id;
         const componentId = this.componentId;
         const isDark = this.dark;
@@ -61,12 +61,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -121,7 +117,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },

package/src/components/Dialog/VTDialogClose.vue

@@ -12,38 +12,38 @@
 </template>
 
 <script>
-import { IconClose } from "@veritree/icons";
-import VTButton from "../Button/VTButton.vue";
+import { IconClose } from '@veritree/icons';
+import VTButton from '../Button/VTButton.vue';
 
 export default {
-  name: "VTDialogClose",
+  name: 'VTDialogClose',
 
   components: { IconClose, VTButton },
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   computed: {
     id() {
-      return `dialog-close-${this.api().componentId}`;
+      return `dialog-close-${this.apiDialog().componentId}`;
     },
 
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     // temporary till button theme is implemented
     theme() {
-      return this.dark ? "dark" : null;
+      return this.dark ? 'dark' : null;
     },
   },
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDialog().hide();
     },
   },
 };

package/src/components/Dialog/VTDialogContent.vue

@@ -1,10 +1,10 @@
 <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"
   >
@@ -28,9 +28,9 @@
 
 <script>
 export default {
-  name: "VTDialogContent",
+  name: 'VTDialogContent',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   data() {
     return {
@@ -40,20 +40,20 @@ export default {
 
   computed: {
     id() {
-      return `dialog-content-${this.api().componentId}`;
+      return `dialog-content-${this.apiDialog().componentId}`;
     },
 
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDialog().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -69,7 +69,7 @@ export default {
     },
 
     hideDialog() {
-      this.api().emit();
+      this.apiDialog().emit();
     },
   },
 };

package/src/components/Dialog/VTDialogFooter.vue

@@ -9,24 +9,24 @@
 
 <script>
 export default {
-  name: "VTDialogFooter",
+  name: 'VTDialogFooter',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
     as: {
       type: String,
-      default: "footer",
+      default: 'footer',
     },
   },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
   },
 };

package/src/components/Dialog/VTDialogHeader.vue

@@ -13,28 +13,28 @@
 
 <script>
 export default {
-  name: "VTDialogHeader",
+  name: 'VTDialogHeader',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
     as: {
       type: String,
-      default: "header",
+      default: 'header',
     },
   },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-header`;
+      return `${this.apiDialog().id}-header`;
     },
   },
 
@@ -45,10 +45,10 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-labelledby", this.id);
+        dialog.setAttribute('aria-labelledby', this.id);
       }
     },
   },

package/src/components/Dialog/VTDialogMain.vue

@@ -13,28 +13,28 @@
 
 <script>
 export default {
-  name: "VTDialogMain",
+  name: 'VTDialogMain',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
     as: {
       type: String,
-      default: "main",
+      default: 'main',
     },
   },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-desc`;
+      return `${this.apiDialog().id}-desc`;
     },
   },
 
@@ -45,10 +45,10 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-describedby", this.id);
+        dialog.setAttribute('aria-describedby', this.id);
       }
     },
   },

package/src/components/Dialog/VTDialogOverlay.vue

@@ -12,16 +12,16 @@
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
-  name: "VTDialogOverlay",
+  name: 'VTDialogOverlay',
 
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   data() {
     return {
@@ -31,21 +31,21 @@ export default {
 
   computed: {
     id() {
-      return `dialog-overlay-${this.api().componentId}`;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
 
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDialog().registerOverlay(this);
   },
 
   methods: {

package/src/components/Dialog/VTDialogTitle.vue

@@ -9,17 +9,17 @@
 
 <script>
 export default {
-  name: "VTDialogTitle",
+  name: 'VTDialogTitle',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   computed: {
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-title`;
+      return `${this.apiDialog().id}-title`;
     },
   },
 };

package/src/components/Disclosure/VTDisclosureDetails.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { genId } from '@/utils/ids';
+import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDisclosureDetails',

package/src/components/Drawer/VTDrawer.vue

@@ -1,13 +1,15 @@
 <template>
-  <div
-    v-if="visible"
-    :id="id"
-    :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
-    aria-modal="true"
-    @click="onClick"
-  >
-    <slot></slot>
-  </div>
+  <Teleport to="body">
+    <div
+      v-if="modelValue"
+      :id="id"
+      :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
+      aria-modal="true"
+      @click="onClick"
+    >
+      <slot></slot>
+    </div>
+  </Teleport>
 </template>
 
 <script>
@@ -18,7 +20,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
+      apiDrawer: () => {
         const id = this.id;
         const isDark = this.dark;
         const isHeadless = this.headless;
@@ -51,12 +53,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -110,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

@@ -12,38 +12,38 @@
 </template>
 
 <script>
-import { IconLeft } from "@veritree/icons";
-import VTButton from "../Button/VTButton.vue";
+import { IconLeft } from '@veritree/icons';
+import VTButton from '../Button/VTButton.vue';
 
 export default {
-  name: "VTDrawerClose",
+  name: 'VTDrawerClose',
 
   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
     theme() {
-      return this.dark ? "dark" : null;
+      return this.dark ? 'dark' : null;
     },
   },
 
   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"
   >
@@ -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();
     },
   },
 };