quasar-ui-danx 0.0.9 → 0.0.11

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

@@ -1,15 +1,17 @@
 <template>
   <img
-      v-if="typeof svg === 'string'"
-      :src="svg"
+      v-if="isString"
+      :src="resolvedSvg"
       :alt="alt"
   />
-  <component :is="svg" v-else />
+  <component :is="resolvedSvg" v-else />
 </template>
 <script setup>
-defineProps({
+import { computed } from "vue";
+
+const props = defineProps({
   svg: {
-    type: [String, Object],
+    type: [String, Object, Function],
     required: true
   },
   alt: {
@@ -17,4 +19,7 @@ defineProps({
     default: ""
   }
 });
+
+const resolvedSvg = computed(() => props.svg.default ? props.svg.default : props.svg);
+const isString = computed(() => typeof resolvedSvg.value === "string");
 </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>

package/src/components/Utility/index.ts

@@ -0,0 +1,9 @@
+export { default as CollapsableSidebar } from "./CollapsableSidebar";
+export { default as ConfirmDialog } from "./Dialogs/ConfirmDialog";
+export { default as ContentDrawer } from "./ContentDrawer";
+export { default as FullScreenDialog } from "./Dialogs/FullScreenDialog";
+export { default as InfoDialog } from "./Dialogs/InfoDialog";
+export { default as InputDialog } from "./Dialogs/InputDialog";
+export { default as ListTransition } from "./Transitions/ListTransition";
+export { default as SlideTransition } from "./Transitions/SlideTransition";
+export { default as StaggeredListTransition } from "./Transitions/StaggeredListTransition";

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./ActionTable";
+export * from "./Utility";
+