quasar-ui-danx 0.0.10 → 0.0.12

package/src/components/DragAndDrop/HandleDraggable.vue

@@ -1,53 +1,53 @@
 <template>
   <div
-    :class="{
+      :class="{
       'cursor-ew-resize': direction === 'horizontal',
       'cursor-ns-resize': direction === 'vertical',
     }"
-    class="flex justify-center items-center w-full h-full"
-    draggable="true"
-    @dragstart="dragAndDrop.dragStart"
-    @dragend="dragAndDrop.dragEnd"
+      class="flex justify-center items-center w-full h-full"
+      draggable="true"
+      @dragstart="dragAndDrop.dragStart"
+      @dragend="dragAndDrop.dragEnd"
   >
     <slot />
   </div>
 </template>
 <script setup>
-import { useDebounceFn } from "@vueuse/core";
-import { DragAndDrop } from "./dragAndDrop";
+import { DragAndDrop } from '@ui/components';
+import { useDebounceFn } from '@vueuse/core';
 
-const emit = defineEmits(["start", "end", "resize"]);
+const emit = defineEmits(['start', 'end', 'resize']);
 const props = defineProps({
   initialValue: {
     type: Number,
-    default: null,
+    default: null
   },
   dropZone: {
     type: [Function, String],
-    required: true,
+    required: true
   },
   direction: {
     type: String,
-    default: "horizontal",
-    validator: (value) => ["vertical", "horizontal"].includes(value),
-  },
+    default: 'horizontal',
+    validator: (value) => ['vertical', 'horizontal'].includes(value)
+  }
 });
 
 const dragAndDrop = new DragAndDrop()
-  .setDropZone(props.dropZone)
-  .setOptions({
-    showPlaceholder: true,
-    direction: props.direction,
-    hideDragImage: true,
-  })
-  .onDragging(useDebounceFn(() => {
-    emit("resize", {
-      distance: dragAndDrop.getDistance(),
-      percent: dragAndDrop.getPercentChange(),
-      startDropZoneSize: dragAndDrop.startSize,
-      dropZoneSize: dragAndDrop.getDropZoneSize(),
-    });
-  }, 20, { maxWait: 30 }))
-  .onStart(() => emit("start"))
-  .onEnd(() => emit("end"));
+    .setDropZone(props.dropZone)
+    .setOptions({
+      showPlaceholder: true,
+      direction: props.direction,
+      hideDragImage: true
+    })
+    .onDragging(useDebounceFn(() => {
+      emit('resize', {
+        distance: dragAndDrop.getDistance(),
+        percent: dragAndDrop.getPercentChange(),
+        startDropZoneSize: dragAndDrop.startSize,
+        dropZoneSize: dragAndDrop.getDropZoneSize()
+      });
+    }, 20, { maxWait: 30 }))
+    .onStart(() => emit('start'))
+    .onEnd(() => emit('end'));
 </script>

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -16,25 +16,25 @@
   </div>
 </template>
 <script setup>
-import SvgImg from "../Utility/SvgImg";
-import { HandleDraggableDotsIcon as DragHandleIcon } from "./Icons";
-import { ListDragAndDrop } from "./listDragAndDrop";
+import { ListDragAndDrop } from '@ui/components';
+import { DragHandleDotsIcon as DragHandleIcon } from '@ui/svg';
+import SvgImg from '../Utility/SvgImg';
 
-const emit = defineEmits(["position", "update:list-items"]);
+const emit = defineEmits(['position', 'update:list-items']);
 const props = defineProps({
   dropZone: {
     type: [Function, String],
-    required: true,
+    required: true
   },
   direction: {
     type: String,
-    default: "vertical",
-    validator: (value) => ["vertical", "horizontal"].includes(value),
+    default: 'vertical',
+    validator: (value) => ['vertical', 'horizontal'].includes(value)
   },
   showHandle: Boolean,
   listItems: {
     type: Array,
-    default: null,
+    default: null
   }
 });
 
@@ -42,12 +42,12 @@ const dragAndDrop = new ListDragAndDrop()
     .setDropZone(props.dropZone)
     .setOptions({ showPlaceholder: true, direction: props.direction })
     .onPositionChange((newPosition, oldPosition) => {
-      emit("position", newPosition);
+      emit('position', newPosition);
 
       if (props.listItems) {
         const items = [...props.listItems];
         items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
-        emit("update:list-items", items);
+        emit('update:list-items', items);
       }
     });
 </script>

package/src/components/DragAndDrop/index.ts

@@ -2,4 +2,3 @@ export { default as HandleDraggable } from "./HandleDraggable.vue";
 export { default as ListItemDraggable } from "./ListItemDraggable.vue";
 export { DragAndDrop } from "./dragAndDrop";
 export { ListDragAndDrop } from "./listDragAndDrop";
-export * from "./Icons";

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -1,4 +1,4 @@
-import { DragAndDrop } from "./dragAndDrop";
+import { DragAndDrop } from "@ui/components";
 
 /**
  * ListDragAndDrop supports dragging elements in a list to new positions in the same list.

package/src/components/Utility/CollapsableSidebar.vue

@@ -0,0 +1,119 @@
+<template>
+  <div
+      class="collapsable-sidebar overflow-x-hidden overflow-y-scroll relative"
+      :class="{
+      'is-collapsed': isCollapsed,
+      'is-right-side': rightSide,
+      [displayClass]: true,
+    }"
+      :style="style"
+  >
+    <div class="flex-grow max-w-full">
+      <slot :is-collapsed="isCollapsed" />
+    </div>
+    <template v-if="!disabled && (!hideToggleOnCollapse || !isCollapsed)">
+      <div
+          v-if="!toggleAtTop"
+          class="flex w-full p-4"
+          :class="rightSide ? 'justify-start' : 'justify-end'"
+      >
+        <slot name="toggle">
+          <q-btn
+              class="btn-secondary"
+              @click="toggleCollapse"
+          >
+            <ToggleIcon
+                class="w-5 transition-all"
+                :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+            />
+          </q-btn>
+        </slot>
+      </div>
+      <div
+          v-else
+          class="absolute top-0 right-0 cursor-pointer p-2"
+          :class="toggleClass"
+          @click="toggleCollapse"
+      >
+        <ToggleIcon
+            class="w-5 transition-all"
+            :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+import { ChevronLeftIcon as ToggleIcon } from '@heroicons/vue/outline';
+import { computed, onMounted, ref, watch } from 'vue';
+
+const emit = defineEmits(['collapse', 'update:collapse']);
+const props = defineProps({
+  rightSide: Boolean,
+  displayClass: {
+    type: String,
+    default: 'flex flex-col'
+  },
+  maxWidth: {
+    type: String,
+    default: '13.5rem'
+  },
+  minWidth: {
+    type: String,
+    default: '5.5rem'
+  },
+  disabled: Boolean,
+  collapse: Boolean,
+  name: {
+    type: String,
+    default: 'sidebar'
+  },
+  toggleAtTop: Boolean,
+  toggleClass: {
+    type: String,
+    default: ''
+  },
+  hideToggleOnCollapse: Boolean
+});
+
+const isCollapsed = ref(props.collapse);
+
+const stored = localStorage.getItem(props.name + '-is-collapsed');
+
+if (stored !== null) {
+  isCollapsed.value = stored === '1';
+}
+function toggleCollapse() {
+  setCollapse(!isCollapsed.value);
+  emit('collapse', isCollapsed.value);
+  emit('update:collapse', isCollapsed.value);
+}
+
+function setCollapse(state) {
+  isCollapsed.value = state;
+  localStorage.setItem(props.name + '-is-collapsed', isCollapsed.value ? '1' : '');
+}
+
+onMounted(() => {
+  emit('collapse', isCollapsed.value);
+  emit('update:collapse', isCollapsed.value);
+});
+const style = computed(() => {
+  return {
+    width: isCollapsed.value ? props.minWidth : props.maxWidth
+  };
+});
+
+watch(() => props.collapse, () => {
+  setCollapse(props.collapse);
+});
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+.collapsable-sidebar {
+  @apply overflow-y-auto scroll-smooth flex-shrink-0 border-r border-neutral-plus-5 transition-all;
+}
+</style>

package/src/components/Utility/ContentDrawer.vue

@@ -0,0 +1,70 @@
+<template>
+  <q-dialog
+      v-model="isShowing"
+      maximized
+      :position="position"
+      :seamless="seamless"
+      :class="{'hide-backdrop': !overlay}"
+  >
+    <div>
+      <div
+          v-if="title"
+          class="dialog-title"
+          @click.stop.prevent
+      >
+        {{ title }}
+      </div>
+      <div
+          class="dialog-content bg-white"
+          :class="{ [contentClass]: true }"
+      >
+        <slot />
+      </div>
+    </div>
+    </q-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:show']);
+
+const props = defineProps({
+  show: Boolean,
+  seamless: Boolean,
+  overlay: Boolean,
+  position: {
+    type: String,
+    default: 'bottom'
+  },
+  contentClass: {
+    type: String,
+    default: 'py-8 px-12'
+  },
+  title: {
+    type: String,
+    default: 'Edit'
+  }
+});
+
+const isShowing = computed({
+  get: () => props.show,
+  set: (value) => emit('update:show', value)
+});
+</script>
+
+<style
+    lang="scss"
+    scoped
+>
+.dialog-title {
+  @apply bg-gray-very-light text-gray-default font-medium uppercase text-xs px-6 py-3 border-b border-neutral-plus-5 rounded-t-md;
+  font-family: "Roboto", sans-serif;
+  letter-spacing: 0.05em;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.dialog-content {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+</style>

package/src/components/Utility/Dialogs/ConfirmDialog.vue

@@ -0,0 +1,132 @@
+<template>
+  <q-dialog
+      :full-height="fullHeight"
+      :full-width="fullWidth"
+      :model-value="!!modelValue"
+      :no-backdrop-dismiss="!backdropDismiss"
+      :maximized="maximized"
+      @update:model-value="onClose"
+  >
+    <q-card class="flex flex-col flex-nowrap">
+      <q-card-section
+          v-if="title || $slots.title"
+          class="pl-6 pr-10 border-b border-gray-medium"
+      >
+        <h3
+            class="font-normal flex items-center"
+            :class="titleClass"
+        >
+          <slot name="title">{{ title }}</slot>
+        </h3>
+        <div
+            v-if="subtitle"
+            class="mt-1 text-sm"
+        >{{ subtitle }}
+        </div>
+      </q-card-section>
+      <q-card-section v-if="$slots.toolbar">
+        <slot name="toolbar" />
+      </q-card-section>
+      <q-card-section
+          v-if="content || $slots.default"
+          class="px-6 bg-neutral-plus-7 flex-grow max-h-full overflow-y-auto"
+          :class="contentClass"
+      >
+        <slot>{{ content }}</slot>
+      </q-card-section>
+      <div class="flex px-6 py-4 border-t border-gray-medium">
+        <div class="flex-grow">
+          <q-btn
+              :label="cancelText"
+              class="action-btn btn-white-gray"
+              @click="onClose"
+          >
+            <slot name="cancel-text" />
+            </q-btn>
+        </div>
+        <slot name="actions" />
+        <div v-if="!hideConfirm">
+          <q-btn
+              :label="$slots['confirm-text'] ? '' : confirmText"
+              class="action-btn ml-4"
+              :class="confirmClass"
+              :loading="isSaving"
+              :disable="disabled"
+              data-testid="confirm-button"
+              @click="onConfirm"
+          >
+            <slot name="confirm-text" />
+          </q-btn>
+        </div>
+      </div>
+      <a
+          class="absolute top-0 right-0 p-4 text-black"
+          @click="onClose"
+      >
+        <CloseIcon class="w-5" />
+      </a>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { XIcon as CloseIcon } from '@heroicons/vue/outline';
+
+const emit = defineEmits(['update:model-value', 'confirm', 'close']);
+const props = defineProps({
+  modelValue: { type: [String, Boolean, Object], default: true },
+  title: {
+    type: String,
+    default: ''
+  },
+  titleClass: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  content: {
+    type: String,
+    default: ''
+  },
+  backdropDismiss: Boolean,
+  maximized: Boolean,
+  fullWidth: Boolean,
+  fullHeight: Boolean,
+  disabled: Boolean,
+  isSaving: Boolean,
+  closeOnConfirm: Boolean,
+  hideConfirm: Boolean,
+  confirmText: {
+    type: String,
+    default: 'Confirm'
+  },
+  cancelText: {
+    type: String,
+    default: 'Cancel'
+  },
+  confirmClass: {
+    type: String,
+    default: 'bg-blue-base text-white'
+  },
+  contentClass: {
+    type: String,
+    default: ''
+  }
+});
+
+function onConfirm() {
+  emit('confirm');
+
+  if (props.closeOnConfirm) {
+    emit('close');
+  }
+}
+
+function onClose() {
+  emit('update:model-value', false);
+  emit('close');
+}
+</script>

package/src/components/Utility/Dialogs/FullScreenDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <q-dialog
+      :model-value="modelValue"
+      maximized
+      transition-show="slide-up"
+      transition-hide="slide-down"
+      @update:model-value="onClose"
+  >
+    <div class="flex justify-center min-w-xs" :class="computedClass">
+      <div
+          v-if="closeable"
+          v-close-popup
+          class="p-4 m-4 absolute-top-right top right cursor-pointer"
+      >
+        <XIcon class="w-5 h-5" />
+      </div>
+      <slot />
+    </div>
+    </q-dialog>
+</template>
+
+<script setup>
+import { XIcon } from '@ui/svg';
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:model-value', 'close']);
+const props = defineProps({
+  modelValue: Boolean,
+  center: Boolean,
+  blue: Boolean,
+  closeable: Boolean
+});
+
+let computedClass = computed(() => {
+  return {
+    'bg-blue-base text-white': props.blue,
+    'bg-white text-gray-base': !props.blue,
+    'items-center': props.center
+  };
+});
+
+function onClose() {
+  emit('update:model-value', false);
+  emit('close');
+}
+</script>

package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <q-dialog
+      :model-value="true"
+      maximized
+      @update:model-value="$emit('close')"
+      @keyup.left="carousel.previous()"
+      @keyup.right="carousel.next()"
+  >
+    <div class="absolute top-0 left-0 w-full h-full">
+      <q-carousel
+          ref="carousel"
+          v-model="currentSlide"
+          height="100%"
+          swipeable
+          animated
+          :thumbnails="files.length > 1"
+          infinite
+          class="carousel"
+      >
+        <q-carousel-slide
+            v-for="file in files"
+            :key="'file-' + file.id"
+            :name="file.id"
+            :img-src="getThumbUrl(file)"
+        >
+          <div class="slide-image">
+            <template v-if="isVideo(file)">
+              <video
+                  class="max-h-full w-full"
+                  controls
+              >
+                <source
+                    :src="file.url + '#t=0.1'"
+                    :type="file.mime"
+                />
+              </video>
+            </template>
+            <img v-else :alt="file.filename" :src="file.url" />
+          </div>
+        </q-carousel-slide>
+        </q-carousel>
+        <CloseIcon
+            class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
+            @click="$emit('close')"
+        />
+    </div>
+    </q-dialog>
+</template>
+<script setup>
+import { XIcon as CloseIcon } from '@ui/svg';
+import { ref } from 'vue';
+
+defineEmits(['close']);
+const props = defineProps({
+  files: {
+    type: Array,
+    default: () => []
+  },
+  defaultSlide: {
+    type: String,
+    default: ''
+  }
+});
+
+const carousel = ref(null);
+const currentSlide = ref(props.defaultSlide);
+function isVideo(file) {
+  return file.mime?.startsWith('video');
+}
+function getThumbUrl(file) {
+  if (file.thumb) {
+    return file.thumb.url;
+  } else if (isVideo(file)) {
+    // Base64 encode a PlayIcon for the placeholder image
+    return `data:image/svg+xml;base64,${btoa(
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
+    )}`;
+  } else {
+    return file.url;
+  }
+}
+</script>
+<style scoped lang="scss">
+.slide-image {
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+  }
+}
+
+.carousel {
+  :deep(.q-carousel__navigation--bottom) {
+    position: relative;
+    bottom: 8em;
+  }
+}
+</style>