fluency-v8-components 1.3.4 → 1.3.6

package/src/components/form/GreyInputAutocomplete.vue

@@ -0,0 +1,100 @@
+<template>
+  <Combobox
+    as="div"
+    v-bind="$attrs"
+    :class="[
+      'input-block py-1 relative',
+      error ? 'ring-red-600 ' : '',
+      readonly ? 'disabled' : '',
+    ]"
+    :disabled="readonly ? true : false"
+  >
+    <ComboboxInput
+      class="w-full border-0 text-sm bg-transparent p-1 px-2 focus:ring-0"
+      @change="query = $event.target.value"
+      :displayValue="(option) => option"
+    />
+    <ComboboxOptions
+      class="input-block absolute z-10 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"
+    >
+      <ComboboxOption
+        v-if="queryOption && !filteredOptions.some((option) => option.value === queryOption)"
+        :value="queryOption"
+        as="template"
+        v-slot="{ active }"
+      >
+        <li
+          :class="[
+            active ? 'bg-indigo-600 text-white' : '',
+            'relative cursor-default select-none py-2 pl-3 pr-9',
+          ]"
+        >
+          <div class="flex items-center">
+            <span :class="['block truncate']">{{ query }}</span>
+          </div>
+        </li>
+      </ComboboxOption>
+      <ComboboxOption
+        as="template"
+        v-for="option in filteredOptions"
+        :key="option.value"
+        :value="option.value"
+        v-slot="{ active }"
+      >
+        <li
+          :class="[
+            active ? 'bg-indigo-600 text-white' : '',
+            'relative cursor-default select-none py-2 pl-3 pr-9',
+          ]"
+        >
+          <div class="flex items-center">
+            <span :class="['block truncate']">{{ option.label }}</span>
+          </div>
+        </li>
+      </ComboboxOption>
+    </ComboboxOptions>
+  </Combobox>
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from "@headlessui/vue";
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  readonly: {
+    type: [Boolean, Number],
+    default: false,
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+});
+
+const query = ref("");
+const queryOption = computed(() => {
+  return query.value === "" ? null : query.value;
+});
+
+const filteredOptions = computed(() =>
+  query.value === ""
+    ? props.options.slice(0, 100)
+    : props.options
+        .filter((option) => {
+          return option.value.toLowerCase().includes(query.value.toLowerCase());
+        })
+        .slice(0, 100)
+);
+</script>

package/src/components/form/GreyInputCopy.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="relative">
+    <input
+      type="text"
+      :class="[
+        'pl-3 input-block pr-8',
+        error ? 'ring-red-600 ' : '',
+        readonly ? 'disabled' : '',
+      ]"
+      :value="$attrs.modelValue"
+      v-bind="$attrs"
+      :readonly="readonly"
+      @input="onChange"
+    />
+    <span
+      :class="[
+        'cursor-pointer absolute flex items-center right-2 inset-y-0',
+        error ? 'pb-5' : '',
+      ]"
+      @click="copyInput"
+    >
+      <DocumentDuplicateIcon class="icon-md text-gray-400" />
+    </span>
+    <div v-if="error" class="text-red-600 text-sm">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { DocumentDuplicateIcon } from "@heroicons/vue/20/solid";
+
+export default {
+  components: {
+    DocumentDuplicateIcon,
+  },
+  props: {
+    error: {
+      type: String,
+      default: "",
+    },
+    readonly: {
+      type: [Boolean, Number],
+      default: false,
+    },
+  },
+  data() {
+    return {
+      inputValue: "",
+    };
+  },
+  mounted() {
+    this.inputValue = this.initialValue;
+  },
+  methods: {
+    onChange(event) {
+      this.$emit("update:modelValue", event.target.value);
+    },
+
+    async copyInput() {
+      await navigator.clipboard.writeText(this.$attrs.modelValue);
+      this.$emit("copied", "Copied to clipboard", "", true);
+    },
+  },
+};
+</script>

package/src/components/form/GreyInputGrow.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    :class="['flex input-block relative', { 'ring-red-600 ': error }]"
+    v-bind="$attrs"
+  >
+    <div
+      class="overflow-y-hidden whitespace-pre-wrap break-words min-h-6 invisible"
+    >
+      {{ $attrs.modelValue || props.value }}
+    </div>
+    <textarea
+      :class="[
+        'absolute right-0 top-0 bottom-0 left-0 resize-none border-0 py-2 px-3 text-sm bg-transparent p-0.5 focus:ring-0',
+        readonly ? 'disabled' : '',
+      ]"
+      :value="$attrs.modelValue || props.value"
+      v-bind="$attrs"
+      style="resize: none"
+      :readonly="props.readonly"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  error: {
+    type: String,
+    default: "",
+  },
+  readonly: {
+    type: [Boolean, Number],
+    default: false,
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+});
+</script>

package/src/components/form/GreyInputToken.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="relative">
+    <input
+      type="text"
+      :class="[
+        'pl-3 input-block pr-8',
+        error ? 'ring-red-600 ' : '',
+        readonly ? 'disabled' : '',
+      ]"
+      v-model.trim="inputValue"
+      v-bind="$attrs"
+      @input="onChange"
+    />
+    <span
+      :class="[
+        'cursor-pointer absolute flex items-center right-2 inset-y-0',
+        { 'pb-5': error },
+        { hidden: readonly },
+      ]"
+    >
+      <CurrencyDollarIcon
+        class="icon-md text-gray-400"
+        @click="generateToken"
+      />
+    </span>
+    <div v-if="error" class="text-red-600 text-sm">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { CurrencyDollarIcon } from "@heroicons/vue/20/solid";
+import { randomId } from "@/utils/random";
+
+export default {
+  components: {
+    CurrencyDollarIcon,
+  },
+  props: {
+    error: {
+      type: String,
+      default: "",
+    },
+    initialValue: {
+      type: String,
+      default: "",
+    },
+    tokenFunction: {
+      type: Function,
+      default: () => randomId(10),
+    },
+    readonly: {
+      type: [Boolean, Number],
+      default: false,
+    },
+  },
+  data() {
+    return {
+      inputValue: "",
+    };
+  },
+  mounted() {
+    this.inputValue = this.initialValue;
+  },
+  methods: {
+    onChange() {
+      this.$emit("updateModel", this.inputValue);
+    },
+
+    generateToken() {
+      const token = this.tokenFunction();
+      this.inputValue = token;
+      this.$emit("updateModel", token);
+    },
+  },
+};
+</script>

package/src/components/form/GreyPassword.vue

@@ -0,0 +1,36 @@
+<template>
+  <input
+    type="password"
+    :class="[
+      'input-block',
+      error ? 'ring-red-600 ' : '',
+      readonly ? 'disabled' : '',
+    ]"
+    :value="$attrs.modelValue"
+    v-bind="$attrs"
+    @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,
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.$emit("update:modelValue", event.target.value);
+    },
+  },
+};
+</script>

package/src/components/form/GreySelect.vue

@@ -0,0 +1,154 @@
+<template>
+  <Listbox as="div" :value="$attrs.modelValue" v-bind="$attrs">
+    <div class="relative">
+      <ListboxButton
+        v-if="selected"
+        :class="[
+          'input-block sm:text-sm sm:leading-6',
+          error ? 'ring-red-600 ' : '',
+          readonly ? 'disabled' : '',
+        ]"
+      >
+        <span class="flex items-center pr-10">
+          <span class="ml-3 block truncate">{{ selected.label }}</span>
+        </span>
+        <span
+          class="pointer-events-none absolute inset-y-0 right-2 flex items-center"
+        >
+          <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+        </span>
+      </ListboxButton>
+      <ListboxButton
+        v-else
+        :class="[
+          'input-block sm:text-sm sm:leading-6',
+          error ? 'ring-red-600 ' : '',
+          readonly ? 'disabled' : '',
+        ]"
+      >
+        <span class="flex items-center pr-10">
+          <span class="ml-3 block truncate">{{ placeholder }}</span>
+        </span>
+        <span
+          class="pointer-events-none absolute inset-y-0 right-2 flex items-center"
+        >
+          <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+        </span>
+      </ListboxButton>
+
+      <transition
+        v-if="!readonly"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <ListboxOptions
+          class="input-block absolute z-50 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-sm sm:text-xs"
+        >
+          <ListboxOption
+            as="template"
+            v-for="option in sortedOptions"
+            :key="option.id"
+            :value="option.value"
+            v-slot="{ active }"
+          >
+            <li
+              :class="[
+                active ? 'bg-indigo-600 text-white' : '',
+                'relative cursor-default select-none py-2',
+              ]"
+            >
+              <div
+                :class="[
+                  'flex items-center',
+                  { 'pr-10': selected && selected.value === option.value },
+                ]"
+              >
+                <span
+                  :class="[
+                    selected ? 'font-semibold' : 'font-normal',
+                    'ml-3 block truncate',
+                  ]"
+                  >{{ option.label }}</span
+                >
+              </div>
+              <span
+                v-if="selected && selected.value === option.value"
+                :class="[
+                  active ? 'text-white' : '',
+                  'absolute inset-y-0 right-2 flex items-center',
+                ]"
+              >
+                <CheckIcon class="icon-md" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+
+<script>
+import {
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+
+export default {
+  components: {
+    Listbox,
+    ListboxButton,
+    ListboxLabel,
+    ListboxOption,
+    ListboxOptions,
+    CheckIcon,
+    ChevronUpDownIcon,
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    readonly: {
+      type: [Boolean, Number],
+      default: false,
+    },
+    error: {
+      type: String,
+      default: "",
+    },
+    sorted: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: "Select a value",
+    },
+  },
+  computed: {
+    selected() {
+      const target = this.options.find(
+        (option) => option.value === this.$attrs.modelValue
+      );
+      if (!target && this.$attrs.modelValue) {
+        return { label: this.$attrs.modelValue, value: this.$attrs.modelValue };
+      }
+      return target;
+    },
+    sortedOptions() {
+      return this.sorted
+        ? this.options.sort((a, b) => a.label.localeCompare(b.label))
+        : this.options;
+    },
+  },
+};
+</script>

package/src/components/form/GreySelectInput.vue

@@ -0,0 +1,123 @@
+<template>
+  <Combobox as="div" v-bind="$attrs">
+    <div class="relative">
+      <input
+        type="text"
+        :class="[
+          'input-block',
+          error ? 'ring-red-600 ' : '',
+          readonly ? 'disabled' : '',
+        ]"
+        v-model.trim="inputValue"
+        @input="setModelValue($event.target)"
+      />
+      <ComboboxButton
+        class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden"
+      >
+        <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+      </ComboboxButton>
+
+      <transition
+        v-if="!readonly"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <ComboboxOptions
+          class="input-block absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm"
+        >
+          <ComboboxOption
+            as="template"
+            v-for="option in sortedOptions"
+            :key="option.id"
+            :value="option"
+            @click="updateInput(option)"
+            v-slot="{ active }"
+          >
+            <li
+              :class="[
+                active ? 'px-1 bg-indigo-600 text-white' : '',
+                'relative cursor-default select-none py-2 pl-3 pr-9',
+              ]"
+            >
+              <div class="flex items-center">
+                <span class="'ml-3 block truncate">{{ option.label }}</span>
+              </div>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </transition>
+    </div>
+  </Combobox>
+  <div v-if="error" class="text-red-600 text-sm">
+    {{ error }}
+  </div>
+</template>
+
+<script>
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+import { ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+
+export default {
+  components: {
+    Combobox,
+    ComboboxButton,
+    ComboboxOption,
+    ComboboxOptions,
+    ChevronUpDownIcon,
+  },
+  props: {
+    initialValue: {
+      type: String,
+      required: false,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    readonly: {
+      type: [Boolean, Number],
+      default: false,
+    },
+    error: {
+      type: String,
+      default: "",
+    },
+    sorted: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      inputValue: "",
+    };
+  },
+  computed: {
+    sortedOptions() {
+      return this.sorted
+        ? this.options.sort((a, b) => a.label.localeCompare(b.label))
+        : this.options;
+    },
+  },
+  mounted() {
+    this.selected =
+      this.options.find((option) => option.value === this.initialValue) || "";
+    this.inputValue = this.initialValue;
+  },
+  methods: {
+    setModelValue(value) {
+      this.$emit("updateModel", value.value);
+    },
+    updateInput(option) {
+      this.inputValue = option.value;
+      this.setModelValue(option);
+    },
+  },
+};
+</script>