fluency-v8-components 1.3.5 → 1.3.7

package/src/components/dialogs/NameDialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <Dialog :open="open" :title="title">
+    <template #content>
+      <FormCol :fieldName="nameField">
+        <GreyInput v-model="entry.name" />
+      </FormCol>
+    </template>
+    <template #footer>
+      <SubmitButtons
+        :saveText="saveButtonText"
+        @save="emits('save', entry)"
+        @close="close"
+      />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Dialog, GreyInput, FormCol, SubmitButtons } from "@/components";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Add",
+  },
+  nameField: {
+    type: String,
+    default: "Name",
+  },
+  saveButtonText: {
+    type: String,
+    default: "Save",
+  },
+});
+const emits = defineEmits(["save"]);
+
+const open = ref(false);
+const entry = ref({});
+
+function close() {
+  open.value = false;
+}
+
+function openModal(e) {
+  open.value = true;
+  entry.value = {
+    name: e.name,
+  };
+}
+
+defineExpose({
+  open,
+  openModal,
+  close,
+});
+</script>

package/src/components/dialogs/PopupEditor.vue

@@ -0,0 +1,113 @@
+<template>
+  <TransitionRoot appear :show="open" as="template">
+    <Dialog as="div" @close="closeModal" class="relative z-50">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-black/50" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="flex min-h-full items-center justify-center p-2 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              class="m-2 transform overflow-hidden rounded-xl text-left align-middle shadow-xl transition-all"
+              style="width: 64rem"
+            >
+              <div class="bg-sky-700 px-4 py-3 text-white sm:px-6">
+                <div class="flex items-center justify-between">
+                  <DialogTitle
+                    class="text-base font-semibold leading-6 text-white"
+                  >
+                    {{ title }}
+                  </DialogTitle>
+                  <div class="ml-3 flex h-7 items-center">
+                    <button
+                      type="button"
+                      class="relative rounded-md bg-sky-700 text-sky-200 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-white"
+                      @click="closeModal"
+                    >
+                      <span class="absolute -inset-2.5" />
+                      <span class="sr-only">Close panel</span>
+                      <XMarkIcon class="icon-lg" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <CodeEditor
+                v-model="code"
+                class="p-3"
+                :fontSize="`${fontSize ? fontSize : '12px'}`"
+                :isFPL="isFPL"
+                :line-numbers="isFPL"
+                :readonly="!isEditable"
+                @update:model-value="emits('update', code)"
+              />
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/vue";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+import CodeEditor from "../common/CodeEditor.vue";
+
+// props and emits
+const props = defineProps({
+  fontSize: {
+    type: String,
+    default: "12px",
+  },
+});
+const emits = defineEmits(["update"]);
+// states
+const title = ref("");
+const open = ref(false);
+const code = ref("");
+const isFPL = ref(true);
+const isEditable = ref(false);
+
+// function defs
+function openModal(c: string, isFpl2: boolean, edit: boolean, t = "Editor") {
+  open.value = true;
+  code.value = c;
+  isFPL.value = isFpl2;
+  title.value = t;
+  isEditable.value = edit;
+}
+
+function closeModal() {
+  open.value = false;
+}
+
+defineExpose({
+  openModal,
+});
+</script>

package/src/components/dialogs/ProgressDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <Dialog :open="open" :title="title" :loading="true">
+    <template #content>
+      <ProgressBar :progress="progress" />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Dialog, ProgressBar } from "@/components";
+
+const emits = defineEmits(["close"]);
+
+const open = ref(false);
+const title = ref("Loading");
+const progress = ref(0);
+const progressFunction = ref(() => {});
+const progressID = ref();
+const defaultProgressFunction = (interval) => {
+  progress.value += 1;
+  if (progress.value < 100) {
+    progressID.value = setTimeout(() => {
+      progressFunction.value(interval);
+    }, interval);
+  } else {
+    close();
+    emits("close");
+  }
+};
+
+function close() {
+  clearTimeout(progressID.value);
+  open.value = false;
+}
+
+function openModal(t, p = 0, i = 100, fxP = defaultProgressFunction) {
+  open.value = true;
+  title.value = t;
+  progress.value = p;
+  if (!i) {
+    progressFunction.value = fxP;
+    progressFunction.value();
+  } else {
+    progressFunction.value = defaultProgressFunction;
+    progressFunction.value(i);
+  }
+}
+
+function updateProgress(p) {
+  progress.value = p;
+}
+
+defineExpose({
+  openModal,
+  updateProgress,
+  close,
+});
+</script>

package/src/components/dialogs/ResetPasswordDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <Dialog :open="open" title="Reset Password">
+    <template #content>
+      <FormCol fieldName="Password">
+        <GreyPassword v-model="entry.password" :error="errors.password" />
+      </FormCol>
+      <FormCol fieldName="Confirm Password">
+        <GreyPassword v-model="entry.confirm" :error="errors.confirm" />
+      </FormCol>
+    </template>
+    <template #footer>
+      <SubmitButtons saveText="Reset" @save="confirmPassword" @close="close" />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Dialog, FormCol, SubmitButtons, GreyPassword } from "@/components";
+
+const emits = defineEmits(["save", "notify"]);
+
+const open = ref(false);
+const entry = ref({});
+const errors = ref({});
+
+function confirmPassword() {
+  errors.value = {};
+  if (!entry.value.password || entry.value.password.length < 8) {
+    errors.value.password = "Password needs to be at least 8 characters long";
+    emits("notify", "Error", [errors.value.password], false);
+    return;
+  }
+  if (entry.value.password !== entry.value.confirm) {
+    errors.value.confirm = "Passwords do not match";
+    emits("notify", "Error", [errors.value.confirm], false);
+    return;
+  }
+  emits("save", entry.value);
+  close();
+}
+
+function close() {
+  open.value = false;
+}
+
+function openModal(username) {
+  open.value = true;
+  entry.value = {
+    username,
+  };
+}
+
+defineExpose({
+  open,
+  openModal,
+  close,
+});
+</script>

package/src/components/dialogs/Wizard.vue

@@ -0,0 +1,99 @@
+<template>
+  <Dialog :open="open" :title="title" size="large" @close="$emit('clickout')">
+    <template #header>
+      <slot name="header" />
+    </template>
+    <template #content>
+      <Stepper :steps="steps" />
+      <slot name="content" />
+    </template>
+    <template #footer>
+      <div class="flow-root">
+        <div class="float-left">
+          <slot name="footer" />
+        </div>
+        <div class="float-right space-x-4">
+          <TextButton
+            :text="currentStep === 0 ? 'Cancel' : 'Back'"
+            color="red"
+            @click="back"
+          />
+          <TextButton
+            v-if="currentStep !== steps.length - 1"
+            text="Next"
+            @click="next"
+          />
+          <TextButton
+            v-else
+            :text="preventSave ? 'Close' : saveButton"
+            color="blue"
+            @click="preventSave ? emits('close') : next()"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import { Dialog, TextButton } from "@/components";
+import Stepper from "./wizard/Stepper.vue";
+
+const props = defineProps({
+  open: Boolean,
+  title: String,
+  steps: Array,
+  proceed: Boolean,
+  saveButton: {
+    type: String,
+    default: "Save",
+  },
+  preventSave: {
+    type: [Boolean, Number],
+    default: false,
+  },
+});
+const steps = ref(props.steps);
+const currentStep = ref(0);
+const emits = defineEmits(["close", "next", "moved", "clickout"]);
+
+watch(
+  () => props.open,
+  () => {
+    steps.value = props.steps;
+    currentStep.value = 0;
+  }
+);
+watch(
+  () => props.proceed,
+  () => {
+    if (props.proceed) {
+      steps.value[currentStep.value].status = "completed";
+      currentStep.value += 1;
+      steps.value[currentStep.value].status = "current";
+      emits("moved");
+    }
+  }
+);
+watch(
+  () => props.steps,
+  () => {
+    steps.value = props.steps;
+  }
+);
+
+function back() {
+  if (currentStep.value === 0) {
+    currentStep.value = 0;
+    emits("close");
+  } else {
+    steps.value[currentStep.value].status = "upcoming";
+    currentStep.value -= 1;
+    steps.value[currentStep.value].status = "current";
+  }
+}
+
+function next() {
+  emits("next");
+}
+</script>

package/src/components/dialogs/wizard/Stepper.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="w-full px-4">
+    <div class="pb-8 md:pb-4 row gap-x-2">
+      <div
+        v-for="(step, i) in steps"
+        :class="[
+          `h-2 w-1/${steps.length} text-sm px-1`,
+          { 'opacity-75': step.status !== 'current' },
+          { 'font-semibold': step.status === 'current' },
+        ]"
+      >
+        {{ step.name }}
+      </div>
+    </div>
+    <div class="row gap-x-2">
+      <div
+        v-for="(step, i) in steps"
+        :class="[
+          `h-2 w-1/${steps.length} rounded-lg`,
+          { 'bg-gray-200 dark:bg-gray-500': step.status === 'upcoming' },
+          { 'bg-sky-500': step.status !== 'upcoming' },
+        ]"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  steps: Array,
+});
+</script>

package/src/components/form/CheckBox.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="relative flex items-start pl-2">
+    <div class="flex h-6 items-center">
+      <input
+        type="checkbox"
+        :class="[
+          'icon-md rounded-sm border-gray-400 text-indigo-600 focus:ring-indigo-600',
+          $attrs.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        ]"
+        :checked="$attrs.modelValue"
+        v-bind="$attrs"
+        @change="onChange"
+        :disabled="$attrs.disabled"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onChange() {
+      this.$emit("update:modelValue", !this.$attrs.modelValue);
+    },
+  },
+};
+</script>

package/src/components/form/Editor.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="toolbar" class="bg-blue-100 dark:bg-blue-200">
+    <span class="ql-formats">
+      <select class="ql-font"></select>
+      <select class="ql-size"></select>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-bold"></button>
+      <button class="ql-italic"></button>
+      <button class="ql-underline"></button>
+      <button class="ql-strike"></button>
+    </span>
+    <span class="ql-formats">
+      <select class="ql-color"></select>
+      <select class="ql-background"></select>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-list" value="ordered"></button>
+      <button class="ql-list" value="bullet"></button>
+      <select class="ql-align"></select>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-link"></button>
+    </span>
+  </div>
+  <div id="editor" class="min-h-40"></div>
+</template>
+<script>
+import Quill from "quill";
+
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      editor: null,
+    };
+  },
+  mounted() {
+    this.editor = new Quill("#editor", {
+      modules: {
+        toolbar: "#toolbar",
+      },
+      theme: "snow",
+      formats: [
+        "font",
+        "size",
+        "bold",
+        "underline",
+        "header",
+        "italic",
+        "strike",
+        "link",
+        "color",
+        "background",
+        "list",
+        "align",
+      ],
+    });
+    // set initial value
+    if (this.modelValue) {
+      // support for legacy data without <p> tags
+      let txt = "";
+      if (this.modelValue.startsWith("<p>")) {
+        txt = this.modelValue;
+      } else {
+        const delta = this.editor.clipboard.convertHTML(this.modelValue);
+        const lines = delta.ops[0].insert.split("\n");
+        txt = lines.map((line) => `<p>${line}</p>`).join("");
+      }
+      const editorID = document.querySelector("#editor .ql-editor");
+      editorID.innerHTML = txt;
+    }
+    this.editor.on("text-change", () => {
+      this.$emit("update:modelValue", this.editor.root.innerHTML);
+    });
+    /*
+    // override default css when using dark mode
+    const isDark = document.body.classList.contains("dark");
+    if (isDark) {
+      const strokes = document.querySelectorAll(".ql-stroke");
+      Array.prototype.forEach.call(strokes, (el) => {
+        el.style.stroke = "#FFFFFF";
+      });
+    }
+    */
+  },
+};
+</script>

package/src/components/form/FormCol.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="col py-1">
+    <!-- provide section name -->
+    <div class="row text-xs font-medium text-grey-7">
+      {{ fieldName }}
+      <span v-if="required" class="text-red-500">*</span>
+    </div>
+    <div class="flex-row w-full">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  fieldName: string;
+  required?: boolean;
+}>();
+</script>

package/src/components/form/FormRow.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex items-center py-3">
+    <!-- provide section name -->
+    <div class="w-20 sm:w-40 text-xs font-medium text-grey-7 pr-4">
+      {{ fieldName }}
+      <span v-if="required" class="text-red-500">*</span>
+    </div>
+    <div class="w-32 sm:w-full">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  fieldName: string;
+  required?: boolean;
+}>();
+</script>

package/src/components/form/FormSection.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="row justify-between items-center w-full">
+      <div class="text-base">
+        {{ props.sectionName }}
+      </div>
+      <div class="justify-end relative">
+        <slot name="section-right" />
+      </div>
+    </div>
+    <Separator />
+    <slot />
+  </div>
+</template>
+<script setup lang="ts">
+import Separator from "../common/Separator.vue";
+
+const props = defineProps<{
+  sectionName: string;
+}>();
+</script>

package/src/components/form/GreyForm.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="rounded-lg shadow-lg my-2 bg-white dark:dark-bg">
+    <div class="px-6 py-4">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/form/GreyInput.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="['flex input-block', { 'ring-red-600 ': error }]">
+    <span
+      class="flex select-none items-center pl-3 text-slate-400 italic sm:text-sm"
+    >
+      {{ prefix }}
+    </span>
+    <input
+      :type="type"
+      :class="[
+        'flex-1 border-0 text-sm bg-transparent p-0.5 focus:ring-0 focus:outline-none',
+        readonly ? 'disabled' : '',
+      ]"
+      :value="$attrs.modelValue"
+      v-bind="$attrs"
+      :readonly="readonly"
+      @input="onChange"
+    />
+  </div>
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: String,
+      default: "",
+    },
+    prefix: {
+      type: String,
+      default: "",
+    },
+    readonly: {
+      type: [Boolean, Number],
+      default: false,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.$emit("update:modelValue", event.target.value);
+    },
+  },
+};
+</script>