fluency-v8-components 1.3.5 → 1.3.7

package/src/components/form/GreySelectInputMultiple.vue

@@ -0,0 +1,218 @@
+<template>
+  <Combobox
+    as="div"
+    v-model="selected"
+    multiple
+    :class="[
+      'input-block py-0 relative',
+      error ? 'ring-red-600 ' : '',
+      readonly ? 'disabled' : '',
+    ]"
+    @update:model-value="updateSelected"
+  >
+    <div class="relative w-full rounded-lg text-left min-h-9">
+      <div
+        class="flex flex-auto flex-wrap"
+        :class="{ 'pb-2': selected.length > 0 }"
+      >
+        <div
+          v-for="val in selected"
+          class="flex items-center ml-2 select-chip mt-2"
+        >
+          <div class="text-xs font-normal leading-none max-w-full flex-initial">
+            {{ val.label }}
+          </div>
+          <div
+            v-if="!readonly"
+            class="relative z-10 flex flex-auto flex-row-reverse"
+          >
+            <XMarkIcon
+              class="icon cursor-pointer hover:opacity-75"
+              @click="remove(val)"
+            />
+          </div>
+        </div>
+      </div>
+      <ComboboxInput
+        v-if="allowInput"
+        class="z-1 w-full border-none pr-10 text-sm bg-transparent focus:ring-0"
+        :displayValue="() => query"
+        :disabled="readonly"
+        @change="query = $event.target.value"
+        @keyup.enter="add()"
+      />
+      <ComboboxButton
+        v-if="!allowInput"
+        :disabled="readonly"
+        class="absolute w-full inset-y-0 left-0 flex items-center pl-3"
+      >
+        <span v-if="selected.length === 0" class="block truncate">
+          Select Values
+        </span>
+      </ComboboxButton>
+      <ComboboxButton
+        class="absolute inset-y-0 right-0 flex items-center pr-2"
+        :disabled="readonly"
+      >
+        <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+      </ComboboxButton>
+    </div>
+    <TransitionRoot
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      @after-leave="query = ''"
+    >
+      <ComboboxOptions
+        class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+      >
+        <div
+          v-if="filteredOptions.length === 0 && query !== ''"
+          class="relative px-4 py-2 text-white"
+          @click="add()"
+        >
+          {{ query }}
+        </div>
+
+        <ComboboxOption
+          v-for="option in filteredOptions"
+          as="template"
+          :value="option"
+          v-slot="{ selected, active }"
+        >
+          <li
+            :class="[
+              active ? 'bg-indigo-600 text-white' : '',
+              'relative cursor-default select-none py-2 pl-3 pr-9',
+            ]"
+          >
+            <span
+              class="block truncate"
+              :class="{ 'font-semibold': selected, 'font-normal': !selected }"
+            >
+              {{ option.label }}
+            </span>
+            <span
+              v-if="selected"
+              class="text-white absolute inset-y-0 right-1 flex items-center pr-4,"
+            >
+              <CheckIcon class="icon-md" aria-hidden="true" />
+            </span>
+          </li>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </TransitionRoot>
+  </Combobox>
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import {
+  CheckIcon,
+  ChevronUpDownIcon,
+  XMarkIcon,
+} from "@heroicons/vue/20/solid";
+
+// props and emits
+const props = defineProps({
+  selected: {
+    type: Array,
+    default: () => [],
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  readonly: {
+    type: [Boolean, Number],
+    default: false,
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+  sorted: {
+    type: Boolean,
+    default: false,
+  },
+  allowInput: {
+    type: Boolean,
+    default: true,
+  },
+  preventNew: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["update"]);
+// states
+const selected = ref([]);
+const query = ref("");
+// computed
+const sortedOptions = computed(() =>
+  props.sorted
+    ? props.options.sort((a, b) => a.label.localeCompare(b.label))
+    : props.options
+);
+const filteredOptions = computed(() =>
+  query.value === ""
+    ? sortedOptions.value.slice(0, 50)
+    : sortedOptions.value
+        .filter((option) => {
+          return option.label.toLowerCase().includes(query.value.toLowerCase());
+        })
+        .slice(0, 50)
+);
+// watcher
+watch(
+  () => props.selected,
+  (newVal, oldVal) => {
+    if (JSON.stringify(selected.value) !== JSON.stringify(props.selected)) {
+      updateLocalSelected();
+    }
+  }
+);
+// mounted
+updateLocalSelected();
+// function defs
+function add() {
+  if (props.preventNew) {
+    return;
+  }
+  if (selected.value.find((v) => v.value === query.value)) {
+    return;
+  }
+  selected.value.push({ label: query.value, value: query.value });
+  query.value = "";
+  updateSelected(selected.value);
+}
+
+function remove(val) {
+  selected.value = selected.value.filter((v) => v.value !== val.value);
+  updateSelected(selected.value);
+}
+
+function updateSelected(val) {
+  const vals = val.map((v) => v.value);
+  emits("update", vals);
+}
+
+function updateLocalSelected() {
+  const vals = props.selected.map((v) => {
+    const option = props.options.find((o) => o.value === v);
+    return option || { label: v, value: v };
+  });
+  selected.value = vals;
+}
+</script>

package/src/components/form/GreyTel.vue

@@ -0,0 +1,58 @@
+<template>
+  <input
+    v-model="formatted"
+    type="tel"
+    :class="[
+      'input-block',
+      error ? 'ring-red-600 ' : '',
+      readonly ? 'disabled' : '',
+    ]"
+    placeholder="(xxx)-xxx-xxxx"
+    @input="onChange"
+  />
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: String,
+      default: "",
+    },
+    readonly: {
+      type: [Boolean, Number],
+      default: false,
+    },
+  },
+  emits: ["update"],
+  data() {
+    return {
+      formatted: "",
+    };
+  },
+  methods: {
+    onChange(event) {
+      const input = event.target.value.replace(/\D/g, "");
+      let val = input;
+      if (val.length > 10) {
+        val = val.slice(0, 10);
+      }
+      if (input.length > 6) {
+        this.formatted = `(${val.slice(0, 3)})-${val.slice(3, 6)}-${val.slice(
+          6
+        )}`;
+      } else if (input.length > 3) {
+        this.formatted = `(${val.slice(0, 3)})-${val.slice(3)}`;
+      } else if (input.length > 0) {
+        this.formatted = `(${val})`;
+      } else {
+        this.formatted = "";
+      }
+      this.$emit("update", val);
+    },
+  },
+};
+</script>

package/src/components/form/HamburgerItem.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    :class="[
+      'cursor-pointer input-block my-2 px-5 py-1 rounded-lg relative',
+      draggable ? `draggable${index} select-none` : '',
+      'hover:bg-neutral-200 dark:hover:bg-neutral-600',
+    ]"
+  >
+    <span class="flex items-center">
+      <Bars3Icon v-if="draggable" class="icon-md flex-shrink-0 mr-4" />
+      <span class="ml-1 block truncate">{{ name }}</span>
+      <span class="absolute right-2">
+        <slot name="right" />
+      </span>
+    </span>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import interact from "interactjs";
+import { Bars3Icon } from "@heroicons/vue/20/solid";
+
+const props = defineProps({
+  name: String,
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
+  itemCount: Number,
+  index: Number,
+  reset: Boolean,
+});
+const emits = defineEmits(["reorder", "reset"]);
+const position = ref({ x: 0, y: 0 });
+setDraggable();
+
+watch(
+  () => props.itemCount,
+  () => {
+    setDraggable();
+  }
+);
+watch(
+  () => props.reset,
+  () => {
+    setDraggable();
+  }
+);
+
+function setDraggable() {
+  const relativePositions = getRelativePositions();
+  interact(`.draggable${props.index}`).draggable({
+    listeners: {
+      start(event) {
+        position.value.x = 0;
+        position.value.y = 0;
+      },
+      move(event) {
+        const prev = relativePositions.findIndex(
+          (pos) => position.value.y > pos - 1 && position.value.y < pos + 1
+        );
+        position.value.x += event.dx;
+        position.value.y += event.dy;
+        // if touch something, change the order
+        const target = relativePositions.find(
+          (pos) => position.value.y > pos - 1 && position.value.y < pos + 1
+        );
+        if (target || target === 0) {
+          emits("reorder", relativePositions.indexOf(target), prev);
+        } else {
+          event.target.style.transform = `translate(${position.value.x}px, ${position.value.y}px)`;
+        }
+      },
+      end() {
+        emits("reset");
+      },
+    },
+    modifiers: [
+      interact.modifiers.snap({
+        targets: relativePositions.map((pos) => ({ x: 0, y: pos })),
+        offset: "startCoords",
+      }),
+    ],
+  });
+}
+
+function getRelativePositions() {
+  const arr = [];
+  for (let i = 0; i < props.itemCount; i++) {
+    const diff = i - props.index;
+    arr.push(diff * 40);
+  }
+  return arr;
+}
+</script>

package/src/components/form/KeyValueEntry.vue

@@ -0,0 +1,74 @@
+<template>
+  <Table :data="[0]">
+    <template #header>
+      <tr>
+        <TableHeader title="Name" />
+        <TableHeader title="Value" />
+        <TableHeader title=" " />
+      </tr>
+    </template>
+    <template #rows>
+      <tr v-for="(item, index) in local" :key="index">
+        <TableData>
+          <GreyInput v-model="item[keyName]" :readonly="readonly" />
+        </TableData>
+        <TableData>
+          <GreyInput v-model="item[valueName]" :readonly="readonly" />
+        </TableData>
+        <TableData>
+          <IconButton
+            color="red"
+            :disabled="readonly"
+            @click="local.splice(index, 1)"
+          >
+            <TrashIcon class="icon-md" aria-hidden="true" />
+          </IconButton>
+        </TableData>
+      </tr>
+      <tr>
+        <th colspan="3">
+          <TextButton text="Add" :disabled="readonly" @click="addRow" />
+        </th>
+      </tr>
+    </template>
+  </Table>
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import {
+  IconButton,
+  Table,
+  TableData,
+  TableHeader,
+  TextButton,
+  GreyInput,
+} from "@/components";
+import { TrashIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps({
+  kvarray: Array,
+  keyName: String,
+  valueName: String,
+  readonly: Boolean,
+  error: String,
+});
+const emits = defineEmits(["update"]);
+
+const local = ref(props.kvarray);
+const watchLocal = watch(local, (newVal) => {
+  emits("update", newVal);
+});
+
+function addRow() {
+  const entry = {};
+  entry[props.keyName] = "";
+  entry[props.valueName] = "";
+  if (!local.value) {
+    local.value = [];
+  }
+  local.value.push(entry);
+}
+</script>

package/src/components/form/RadioInput.vue

@@ -0,0 +1,38 @@
+<template>
+  <input
+    type="radio"
+    :class="[
+      'icon text-indigo-600 focus:ring-indigo-600',
+      $attrs.readonly ? 'disabled' : '',
+    ]"
+    :value="radioValue"
+    :checked="radioValue === $attrs.modelValue"
+    v-bind="$attrs"
+    @input="onChange"
+  />
+  <span v-if="label" class="ml-2 text-sm">{{ label }}</span>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: String,
+      default: "",
+    },
+    radioValue: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.$emit("update:modelValue", event.target.value);
+    },
+  },
+};
+</script>

package/src/components/form/UploadFile.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    :class="['w-full', active ? 'white-bg-hover dark:dark-bg-hover' : '']"
+    id="upload-drop"
+    :data-active="active"
+    @drop.prevent="dropFile"
+    @dragenter.prevent="active = true"
+    @dragover.prevent="active = true"
+    @dragleave.prevent="active = false"
+  >
+    <div class="mt-2 sm:col-span-2 sm:mt-0">
+      <div
+        class="flex justify-center rounded-lg border border-dashed px-6 py-10 border-gray-400 dark:border-white"
+      >
+        <div class="text-center">
+          <div class="mt-4 flex text-sm leading-6">
+            <label
+              for="file-upload"
+              class="relative cursor-pointer rounded-md font-bold"
+            >
+              <span>Click here to upload a file</span>
+              <input
+                id="file-upload"
+                name="file-upload"
+                type="file"
+                class="sr-only"
+                :accept="formats.join(', ')"
+                @change="uploaded"
+              />
+            </label>
+            <p class="pl-1">or drop the file here</p>
+          </div>
+          <p class="text-xs leading-5">
+            Accepts {{ formats.join(" ") }} formats
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+
+const props = defineProps({
+  formats: {
+    type: Array,
+    default: () => [".json"],
+  },
+  readerFunction: {
+    type: String,
+    default: "text",
+  },
+});
+const emits = defineEmits(["upload", "notify"]);
+const events = ["dragenter", "dragover", "dragleave", "drop", "notify"];
+const active = ref(false);
+
+function uploaded(e) {
+  if (!e.target.files || !e.target.files.length) return;
+  const file = e.target.files[0];
+  const fileType = file.name.substring(
+    file.name.lastIndexOf("."),
+    file.name.length
+  );
+  if (!props.formats.some((format) => format === fileType)) {
+    emits("notify", "Error", "Invalid file format", false);
+    return;
+  }
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    // const data = JSON.parse(e.target.result);
+    const data = e.target.result;
+    emits("upload", data);
+  };
+  if (props.readerFunction === "data") {
+    reader.readAsDataURL(file);
+  } else {
+    reader.readAsText(file);
+  }
+}
+
+function dropFile(e) {
+  uploaded({ target: e.dataTransfer });
+  active.value = false;
+}
+
+function preventDefaults(e) {
+  e.preventDefault();
+}
+
+onMounted(() => {
+  events.forEach((eventName) => {
+    document
+      .getElementById("upload-drop")
+      .addEventListener(eventName, preventDefaults);
+  });
+});
+</script>

package/src/components/icons/AiIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <img :src="ai" alt="avatar" />
+</template>
+<script setup>
+import { ai } from "@/assets";
+</script>

package/src/components/icons/GithubIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <img :src="src" alt="avatar" />
+</template>
+<script setup>
+import { computed } from "vue";
+import { githubDark, github } from "@/assets"; 
+// props
+const props = defineProps({
+  theme: {
+    type: String,
+    default: "light",
+  },
+});
+// computed
+const src = computed(() => {
+  return props.theme === "dark" ? githubDark : github;
+});
+</script>

package/src/components/icons/HighPriorityIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <img :src="highPriority" alt="avatar" />
+</template>
+<script setup lang="ts">
+import { highPriority } from '@/assets';
+</script>

package/src/components/icons/PowerOffIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <img :src="powerOff" alt="avatar" />
+</template>
+<script setup lang="ts">
+import { powerOff } from '@/assets';
+</script>

package/src/components/icons/SaveIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <img :src="save" alt="avatar" />
+</template>
+<script setup lang="ts">
+import { save } from '@/assets';
+</script>