quasar-ui-danx 0.0.10 → 0.0.11

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">
+          <QBtn
+            class="btn-white-gray"
+            @click="toggleCollapse"
+          >
+            <ToggleIcon
+              class="w-5 transition-all"
+              :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+            />
+          </QBtn>
+        </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>
+  <QDialog
+    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>
+  </QDialog>
+</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>
+  <QDialog
+    :full-height="fullHeight"
+    :full-width="fullWidth"
+    :model-value="!!modelValue"
+    :no-backdrop-dismiss="!backdropDismiss"
+    :maximized="maximized"
+    @update:model-value="onClose"
+  >
+    <QCard class="flex flex-col flex-nowrap">
+      <QCardSection
+        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>
+      </QCardSection>
+      <QCardSection v-if="$slots.toolbar">
+        <slot name="toolbar" />
+      </QCardSection>
+      <QCardSection
+        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>
+      </QCardSection>
+      <div class="flex px-6 py-4 border-t border-gray-medium">
+        <div class="flex-grow">
+          <QBtn
+            :label="cancelText"
+            class="action-btn btn-white-gray"
+            @click="onClose"
+          >
+            <slot name="cancel-text" />
+          </QBtn>
+        </div>
+        <slot name="actions" />
+        <div v-if="!hideConfirm">
+          <QBtn
+            :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" />
+          </QBtn>
+        </div>
+      </div>
+      <a
+        class="absolute top-0 right-0 p-4 text-black"
+        @click="onClose"
+      >
+        <CloseIcon class="w-5" />
+      </a>
+    </QCard>
+  </QDialog>
+</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>
+  <QDialog
+    :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>
+  </QDialog>
+</template>
+
+<script setup>
+import { XIcon } from "src/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/InfoDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <QDialog
+    :full-height="fullHeight"
+    :full-width="fullWidth"
+    :model-value="!!modelValue"
+    :no-backdrop-dismiss="!backdropDismiss"
+    :maximized="maximized"
+    @update:model-value="onClose"
+  >
+    <QCard class="flex flex-col flex-nowrap">
+      <QCardSection
+        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>
+      </QCardSection>
+      <QCardSection
+        v-if="content || $slots.default"
+        class="px-6 bg-neutral-plus-7 flex-grow max-h-full overflow-y-auto"
+      >
+        <slot>{{ content }}</slot>
+      </QCardSection>
+      <div
+        class="flex items-center justify-center px-6 py-4 border-t border-gray-medium"
+      >
+        <div class="flex-grow text-right">
+          <QBtn
+            :label="doneText"
+            class="action-btn btn-white-gray"
+            @click="onClose"
+          >
+            <slot name="done-text" />
+          </QBtn>
+        </div>
+      </div>
+      <a
+        class="absolute top-0 right-0 p-4 text-black"
+        @click="onClose"
+      >
+        <CloseIcon class="w-5" />
+      </a>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup>
+import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+
+const emit = defineEmits(["update:model-value", "close"]);
+defineProps({
+  modelValue: { type: [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,
+  doneText: {
+    type: String,
+    default: "Done"
+  }
+});
+
+function onClose() {
+  emit("update:model-value", false);
+  emit("close");
+}
+</script>

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

@@ -0,0 +1,35 @@
+<template>
+  <ConfirmDialog
+    v-bind="$props"
+    @confirm="$emit('confirm', newInput)"
+    @close="$emit('close', $event)"
+  >
+    <slot>
+      <QInput
+        v-model="newInput"
+        type="number"
+        class="w-full"
+        @input="$emit('update:input', $event)"
+      />
+    </slot>
+  </ConfirmDialog>
+</template>
+<script setup>
+import ConfirmDialog from "danx/src/components/Utility/Dialogs/ConfirmDialog";
+import { ref } from "vue";
+
+defineEmits(["confirm", "close", "update:input"]);
+const props = defineProps({
+  ...ConfirmDialog.props,
+  title: {
+    type: String,
+    default: "Enter Value"
+  },
+  input: {
+    type: [Number, String],
+    default: ""
+  }
+});
+
+const newInput = ref(props.input);
+</script>

package/src/components/Utility/Transitions/ListTransition.vue

@@ -0,0 +1,50 @@
+<template>
+  <TransitionGroup tag="div" :name="name" class="relative">
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    default: "fade-list"
+  }
+});
+</script>
+
+<style lang="scss">
+[class*="list-move"], /* apply transition to moving elements */
+[class*="list-enter-active"],
+[class*=".list-leave-active"] {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+[class*="list-leave-active"] {
+  position: absolute !important;
+}
+
+/** Default List */
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/** Fade */
+.fade-list-enter-from,
+.fade-list-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
+
+/** Fade Down */
+.fade-down-list-enter-from,
+.fade-down-list-leave-to {
+  opacity: 0;
+  transform-origin: top;
+  transform: translateY(30px);
+}
+</style>

package/src/components/Utility/Transitions/SlideTransition.vue

@@ -0,0 +1,63 @@
+<template>
+  <Transition :name="name">
+    <slot />
+  </Transition>
+</template>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    default: "slide"
+  }
+});
+</script>
+<style lang="scss">
+.slide-enter-active,
+.slide-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s linear;
+  width: 100%;
+}
+
+.slide-right-enter-active,
+.slide-enter-active {
+  position: absolute !important;
+  top: 0;
+}
+
+/** Slide Left (default) */
+.slide-enter-from {
+  right: -120%;
+}
+
+.slide-enter-to {
+  right: 0;
+}
+
+.slide-leave-to {
+  left: -120%;
+}
+
+.slide-leave-from {
+  left: 0;
+}
+
+/** Slide Right */
+.slide-right-enter-from {
+  left: -120%;
+}
+
+.slide-right-enter-to {
+  left: 0;
+}
+
+.slide-right-leave-to {
+  right: -120%;
+}
+
+.slide-right-leave-from {
+  right: 0;
+}
+</style>

package/src/components/Utility/Transitions/StaggeredListTransition.vue

@@ -0,0 +1,97 @@
+<template>
+  <TransitionGroup
+    ref="list"
+    tag="div"
+    appear
+    :css="false"
+    @before-enter="onBeforeEnter"
+    @enter="onEnter"
+    @leave="onLeave"
+  >
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script setup>
+import gsap from "gsap";
+import { isTestMode } from "src/helpers/testing";
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  height: {
+    type: [String, Number],
+    default: "auto"
+  },
+  duration: {
+    type: Number,
+    default: 0.5
+  },
+  delayOffset: {
+    type: Number,
+    default: 0.5
+  }
+});
+
+const list = ref(null);
+const indexDelay = computed(() => {
+  return props.delayOffset / list.value.$el.children.length;
+});
+
+function onBeforeEnter(el) {
+  if (isTestMode.value) {
+    return;
+  }
+  el.style.opacity = 0;
+  el.style.height = 0;
+}
+
+function onEnter(el, onComplete) {
+  if (isTestMode.value) {
+    onComplete();
+    return;
+  }
+
+  gsap.to(el, {
+    opacity: 1,
+    duration: props.duration,
+    height: props.height,
+    delay: el.dataset.index * indexDelay.value,
+    onComplete
+  });
+}
+
+function onLeave(el, onComplete) {
+  if (isTestMode.value) {
+    onComplete();
+    return;
+  }
+
+  gsap.to(el, {
+    opacity: 0,
+    height: 0,
+    duration: props.duration,
+    delay: el.dataset.index * indexDelay.value,
+    onComplete
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(2em);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+  position: absolute;
+}
+</style>