@veritree/ui 0.2.0 → 0.3.0

package/index.js

@@ -30,6 +30,22 @@ import VTTabList from './src/Tabs/VTTabList.vue';
 import VTTabPanel from './src/Tabs/VTTabPanel.vue';
 import VTTabPanels from './src/Tabs/VTTabPanels.vue';
 
+import VTDialog from './src/Dialog/VTDialog.vue';
+import VTDialogClose from './src/Dialog/VTDialogClose.vue';
+import VTDialogContent from './src/Dialog/VTDialogContent.vue';
+import VTDialogFooter from './src/Dialog/VTDialogFooter.vue';
+import VTDialogHeader from './src/Dialog/VTDialogHeader.vue';
+import VTDialogMain from './src/Dialog/VTDialogMain.vue';
+import VTDialogOverlay from './src/Dialog/VTDialogOverlay.vue';
+
+import VTDrawer from './src/Drawer/VTDrawer.vue';
+import VTDrawerClose from './src/Drawer/VTDrawerClose.vue';
+import VTDrawerContent from './src/Drawer/VTDrawerContent.vue';
+import VTDrawerFooter from './src/Drawer/VTDrawerFooter.vue';
+import VTDrawerHeader from './src/Drawer/VTDrawerHeader.vue';
+import VTDrawerMain from './src/Drawer/VTDrawerMain.vue';
+import VTDrawerOverlay from './src/Drawer/VTDrawerOverlay.vue';
+
 export {
   VTAlert,
   // VTSpinner,
@@ -54,5 +70,19 @@ export {
   VTTabList,
   VTTabPanel,
   VTTabPanels,
+  VTDrawer,
+  VTDrawerClose,
+  VTDrawerContent,
+  VTDrawerFooter,
+  VTDrawerHeader,
+  VTDrawerMain,
+  VTDrawerOverlay,
+  VTDialog,
+  VTDialogClose,
+  VTDialogContent,
+  VTDialogFooter,
+  VTDialogHeader,
+  VTDialogMain,
+  VTDialogOverlay,
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/Dialog/VTDialog.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    v-if="visible"
+    :id="id"
+    :class="{
+      Dialog: headless,
+      'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
+    }"
+    aria-modal="true"
+    @click="hide"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTDialog',
+
+  provide() {
+    return {
+      api: () => {
+        const id = this.id;
+        const isDark = this.dark;
+        const isHeadless = this.headless;
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.content = content;
+        };
+
+        const registerOverlay = (overlay) => {
+          if (!overlay) return;
+          this.overlay = overlay;
+        };
+
+        const hide = () => this.hide();
+
+        const emit = () => this.emit();
+
+        return {
+          id,
+          isDark,
+          isHeadless,
+          hide,
+          emit,
+          registerContent,
+          registerOverlay,
+        };
+      },
+    };
+  },
+
+  model: {
+    prop: 'visible',
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `dialog-${genId()}`,
+      content: null,
+      overlay: null,
+    };
+  },
+
+  computed: {
+    hasContent() {
+      return this.content !== null;
+    },
+
+    hasOverlay() {
+      return this.overlay !== null;
+    },
+  },
+
+  watch: {
+    visible(isVisible) {
+      if (!isVisible) this.hide();
+    },
+  },
+
+  mounted() {
+    if (this.hasContent) this.content.show();
+    if (this.hasOverlay) this.overlay.show();
+  },
+
+  methods: {
+    hide() {
+      if (this.hasOverlay) this.overlay.hide();
+      if (this.hasContent) this.content.hide();
+    },
+
+    emit() {
+      this.$nextTick(() => {
+        this.$emit('input', false);
+        this.$emit('hidden');
+      });
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogClose.vue

@@ -0,0 +1,46 @@
+<template>
+  <VTButton
+    variant="icon"
+    :class="{
+      'Dialog-close': headless,
+      'absolute right-4 top-4': !headless,
+    }"
+    :theme="theme"
+    @click.prevent="hide"
+    ><slot><IconClose class="h-5 w-5" /></slot
+  ></VTButton>
+</template>
+
+<script>
+import { IconClose } from '@veritree/icons';
+import VTButton from '~/components/Button/VTButton.vue';
+
+export default {
+  name: 'VTDialogClose',
+
+  components: { IconClose, VTButton },
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    // temporary till button theme is implemented
+    theme() {
+      return this.dark ? 'dark' : null;
+    },
+  },
+
+  methods: {
+    hide() {
+      this.api().hide();
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogContent.vue

@@ -0,0 +1,72 @@
+<template>
+  <transition
+    enter-active-class="duration-300 ease-out"
+    enter-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-to-class="translate-y-[50px] opacity-0"
+    @after-leave="hideDialog"
+  >
+    <div
+      v-show="visible"
+      :class="{
+        'Dialog-content': headless,
+        'relative m-auto max-h-full max-w-full overflow-auto rounded p-6 focus:outline-none sm:p-10':
+          !headless,
+        'bg-white': !dark,
+        'bg-fd-600': dark,
+      }"
+      tabindex="-1"
+      @keyup.esc="hide"
+      @click.stop
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'VTDialogContent',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+
+  mounted() {
+    this.api().registerContent(this);
+    this.show();
+
+    this.$nextTick(() => this.$el.focus());
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+
+    hideDialog() {
+      this.api().emit();
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogFooter.vue

@@ -0,0 +1,30 @@
+<template>
+  <component :is="as" :class="{ 'Dialog-footer': headless }">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDialogFooter',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'footer',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogHeader.vue

@@ -0,0 +1,56 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="{
+      'Dialog-header': headless,
+      'mb-8 text-2xl font-semibold': !headless,
+    }"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDialogHeader',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'header',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    id() {
+      return `${this.api().id}-header`;
+    },
+  },
+
+  mounted() {
+    this.setDialogLabelledby();
+  },
+
+  methods: {
+    // In here because if there is no header, the dialog will not be labelled by
+    setDialogLabelledby() {
+      const dialog = document.getElementById(this.api().id);
+
+      if (dialog) {
+        dialog.setAttribute('aria-labelledby', this.id);
+      }
+    },
+  },
+};
+</script>

package/src/Dialog/VTDialogMain.vue

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

package/src/Dialog/VTDialogOverlay.vue

@@ -0,0 +1,52 @@
+<template>
+  <FadeInOut>
+    <div
+      v-if="visible"
+      :class="{
+        'Dialog-overlay': headless,
+        'fixed inset-0 bg-fd-450/80': !headless,
+      }"
+    ></div>
+  </FadeInOut>
+</template>
+
+<script>
+import FadeInOut from '~/components/Transitions/FadeInOut.vue';
+
+export default {
+  name: 'VTDialogOverlay',
+
+  components: {
+    FadeInOut,
+  },
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+
+  mounted() {
+    this.visible = true;
+    this.api().registerOverlay(this);
+  },
+
+  methods: {
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawer.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    v-if="visible"
+    :id="id"
+    :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
+    aria-modal="true"
+    @click="hide"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '~/utils/ids';
+
+export default {
+  name: 'VTDrawer',
+
+  provide() {
+    return {
+      api: () => {
+        const id = this.id;
+        const isDark = this.dark;
+        const isHeadless = this.headless;
+        const isRight = this.right;
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.content = content;
+        };
+
+        const registerOverlay = (overlay) => {
+          if (!overlay) return;
+          this.overlay = overlay;
+        };
+
+        const hide = () => this.hide();
+
+        const emit = () => this.emit();
+
+        return {
+          id,
+          isDark,
+          isHeadless,
+          isRight,
+          hide,
+          emit,
+          registerContent,
+          registerOverlay,
+        };
+      },
+    };
+  },
+
+  model: {
+    prop: 'visible',
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      id: `drawer-${genId()}`,
+      content: null,
+      overlay: null,
+    };
+  },
+
+  watch: {
+    visible(isVisible) {
+      if (!isVisible) this.hide();
+    },
+  },
+
+  mounted() {
+    if (!this.content) return;
+    this.content.show();
+  },
+
+  methods: {
+    hide() {
+      if (!this.content) return;
+      this.content.hide();
+      if (!this.overlay) return;
+      this.overlay.hide();
+    },
+
+    emit() {
+      this.$nextTick(() => {
+        this.$emit('input', false);
+        this.$emit('hidden');
+      });
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerClose.vue

@@ -0,0 +1,50 @@
+<template>
+  <VTButton
+    variant="icon"
+    :class="{
+      'Drawer-close': headless,
+      'ml-auto mb-4 text-inherit sm:mb-8': !headless,
+    }"
+    :theme="theme"
+    @click.prevent="hide"
+    ><slot><IconLeft :class="{ 'rotate-180': right }" /></slot
+  ></VTButton>
+</template>
+
+<script>
+import { IconLeft } from '@veritree/icons';
+import VTButton from '~/components/Button/VTButton.vue';
+
+export default {
+  name: 'VTDrawerClose',
+
+  components: { IconLeft, VTButton },
+
+  inject: ['api'],
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+
+    // temporary till button theme is implemented
+    theme() {
+      return this.dark ? 'dark' : null;
+    },
+  },
+
+  methods: {
+    hide() {
+      this.api().hide();
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerContent.vue

@@ -0,0 +1,97 @@
+<template>
+  <transition
+    :enter-active-class="activeClass"
+    :enter-class="enterClass"
+    :enter-to-class="enterToClass"
+    :leave-active-class="activeClass"
+    :leave-class="leaveClass"
+    :leave-to-class="leaveToClass"
+    @after-leave="hideDrawer"
+  >
+    <div
+      v-show="visible"
+      :class="{
+        'Drawer-content': headless,
+        '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': !dark,
+        'bg-fd-600': dark,
+        'right-0': right,
+      }"
+      tabindex="-1"
+      @keyup.esc="hide"
+      @click.stop
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerContent',
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    right() {
+      return this.api().isRight;
+    },
+
+    activeClass() {
+      return 'transform transition duration-300 ease-in-out';
+    },
+
+    enterClass() {
+      return `opacity-0 ${this.right ? '' : '-'}translate-x-full`;
+    },
+
+    enterToClass() {
+      return `opacity-100 ${this.right ? '-' : ''}translate-x-0`;
+    },
+
+    leaveClass() {
+      return `opacity-100 ${this.right ? '-' : ''}translate-x-0`;
+    },
+
+    leaveToClass() {
+      return `opacity-0 ${this.right ? '' : '-'}translate-x-full`;
+    },
+  },
+
+  mounted() {
+    this.api().registerContent(this);
+    this.show();
+
+    this.$nextTick(() => this.$el.focus());
+  },
+
+  methods: {
+    show() {
+      this.visible = true;
+    },
+
+    hide() {
+      this.visible = false;
+    },
+
+    hideDrawer() {
+      this.api().emit();
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerFooter.vue

@@ -0,0 +1,30 @@
+<template>
+  <component :is="as" :class="{ 'Dialog-footer': headless }">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerFooter',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'footer',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerHeader.vue

@@ -0,0 +1,56 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="{
+      'Drawer-header': headless,
+      'mb-8 text-2xl font-semibold': !headless,
+    }"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerHeader',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'header',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    id() {
+      return `${this.api().id}-header`;
+    },
+  },
+
+  mounted() {
+    this.setDialogLabelledby();
+  },
+
+  methods: {
+    // In here because if there is no header, the dialog will not be labelled by
+    setDialogLabelledby() {
+      const dialog = document.getElementById(this.api().id);
+
+      if (dialog) {
+        dialog.setAttribute('aria-labelledby', this.id);
+      }
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerMain.vue

@@ -0,0 +1,53 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="{ 'Drawer-body': headless, 'flex-1': !headless }"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerMain',
+
+  inject: ['api'],
+
+  props: {
+    as: {
+      type: String,
+      default: 'main',
+    },
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+
+    id() {
+      return `${this.api().id}-desc`;
+    },
+  },
+
+  mounted() {
+    this.setDialogDescribedby();
+  },
+
+  methods: {
+    // In here because if there is no body, the dialog will not be described by
+    setDialogDescribedby() {
+      const dialog = document.getElementById(this.api().id);
+
+      if (dialog) {
+        dialog.setAttribute('aria-describedby', this.id);
+      }
+    },
+  },
+};
+</script>

package/src/Drawer/VTDrawerOverlay.vue

@@ -0,0 +1,50 @@
+<template>
+  <FadeInOut>
+    <div
+      v-if="visible"
+      :class="{
+        'Drawer-overlay': headless,
+        'fixed inset-0 z-10 bg-fd-450/80': !headless,
+      }"
+    ></div>
+  </FadeInOut>
+</template>
+
+<script>
+import FadeInOut from '~/components/Transitions/FadeInOut.vue';
+
+export default {
+  components: {
+    FadeInOut,
+  },
+
+  inject: ['api'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    dark() {
+      return this.api().isDark;
+    },
+
+    headless() {
+      return this.api().isHeadless;
+    },
+  },
+
+  mounted() {
+    this.visible = true;
+    this.api().registerOverlay(this);
+  },
+
+  methods: {
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>