vueless 0.0.4 → 0.0.6

package/src/ui.form-input/index.vue

@@ -0,0 +1,388 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <ULabel
+      ref="labelComponent"
+      :for="id"
+      :label="label"
+      :description="description"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      :align="labelAlign"
+      v-bind="labelAttrs"
+    >
+      <label :for="id" v-bind="blockAttrs">
+        <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper" v-bind="leftSlotAttrs">
+          <!-- @slot Use it to add some component before text. -->
+          <slot name="left" />
+        </span>
+
+        <span v-bind="inputWrapperAttrs">
+          <input
+            :id="id"
+            ref="input"
+            v-model="inputValue"
+            :placeholder="placeholder"
+            :type="inputType"
+            :readonly="readonly"
+            :disabled="disabled"
+            :maxlength="maxLength"
+            :inputmode="inputMode"
+            :data-cy="dataCy"
+            v-bind="inputAttrs"
+            @focus="onFocus"
+            @blur="onBlur"
+            @input="onInput"
+            @change="onChange"
+            @mousedown="onMousedown"
+            @click="onClick"
+          />
+        </span>
+
+        <label
+          v-if="hasSlotContent($slots['right-icon']) || isTypePassword"
+          v-bind="rightSlotAttrs"
+          :for="id"
+        >
+          <!-- @slot Use it to add icon after text. -->
+          <slot name="right-icon">
+            <UIcon
+              v-if="isTypePassword"
+              :name="passwordIconName"
+              color="gray"
+              interactive
+              fill
+              :data-cy="`${dataCy}-show-password`"
+              v-bind="passwordIconAttrs"
+              @click="onClickShowPassword"
+            />
+          </slot>
+        </label>
+
+        <span v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
+          <!-- @slot Use it to add some component after text. -->
+
+          <slot name="right" />
+        </span>
+      </label>
+    </ULabel>
+  </div>
+</template>
+
+<script>
+import { getRandomId } from "../service.ui";
+
+const VALIDATION_RULES_REG_EX = {
+  integer: /\d*/g,
+  number: /\d*\.?\d*/g,
+  string: /[a-zA-Z]+/g,
+  stringAndNumber: /[a-zA-Z0-9]+/g,
+  symbol: /\D/g,
+};
+</script>
+
+<script setup>
+import { ref, computed, onMounted, useSlots } from "vue";
+
+import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
+import UIService from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UInput } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInput", inheritAttrs: false });
+
+const emit = defineEmits([
+  "update:modelValue",
+  "change",
+  "click",
+  "focus",
+  "mousedown",
+  "blur",
+  "input",
+]);
+
+const props = defineProps({
+  /**
+   * Input value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Input label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Show label outside the input block.
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.labelOutside,
+  },
+
+  /**
+   * Input placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Input description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInput).default.size,
+  },
+
+  /**
+   * Maximum character length.
+   */
+  maxLength: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Prevents input some characters (for ex. input numbers only).
+   * You can use predefined values or your own RegExp.
+   * @values symbol, string, stringAndNumber, number, integer
+   */
+  validationRule: {
+    type: [String, RegExp],
+    default: "",
+  },
+
+  /**
+   * Input type.
+   * @values text, number, email, tel, password, url
+   */
+  type: {
+    type: String,
+    default: "text",
+    validator: (value) => !Object.keys(VALIDATION_RULES_REG_EX).includes(value),
+  },
+
+  /**
+   * Input mode (to show different mobile keyboard).
+   * @values none, text, decimal, numeric, tel, email, url
+   */
+  inputMode: {
+    type: String,
+    default: UIService.get(defaultConfig, UInput).default.inputMode,
+  },
+
+  /**
+   * Set input read-only.
+   */
+  readonly: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.readonly,
+  },
+
+  /**
+   * Disable the input.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.disabled,
+  },
+
+  /**
+   * Disable browsers autocomplete.
+   */
+  noAutocomplete: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.noAutocomplete,
+  },
+
+  /**
+   * Unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const slots = useSlots();
+
+const isShownPassword = ref(false);
+const input = ref(null);
+const labelComponent = ref(null);
+const leftSlotWrapper = ref(null);
+
+defineExpose({ input });
+
+const isTypePassword = computed(() => props.type === "password");
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const inputPasswordClasses = computed(() => {
+  return inputValue.value && !isShownPassword.value && isTypePassword.value
+    ? "tracking-widest [font-family:text-security-disc,serif] [-webkit-text-security:disc]"
+    : "";
+});
+
+const {
+  config,
+  inputAttrs,
+  blockAttrs,
+  wrapperAttrs,
+  labelAttrs,
+  passwordIconAttrs,
+  leftSlotAttrs,
+  inputWrapperAttrs,
+  rightSlotAttrs,
+  hasSlotContent,
+} = useAttrs(props, { isTypePassword, inputPasswordClasses });
+
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
+
+const passwordIconName = computed(() => {
+  return isShownPassword.value
+    ? config.value.passwordVisibleIconName
+    : config.value.passwordHiddenIconName;
+});
+
+const inputType = computed(() => {
+  return isShownPassword.value || props.noAutocomplete ? "text" : props.type;
+});
+
+onMounted(() => {
+  toggleReadonlyToPreventAutocomplete(true);
+  setLabelPosition();
+});
+
+function onInput(inputEvent) {
+  let value = inputEvent.target.value;
+
+  if (props.validationRule) {
+    const input = document.querySelector(`#${props.id}`);
+
+    value = VALIDATION_RULES_REG_EX[props.validationRule]
+      ? transformValue(value, VALIDATION_RULES_REG_EX[props.validationRule])
+      : transformValue(value, props.validationRule);
+
+    input.value = value;
+  }
+
+  emit("input", value);
+}
+
+function onChange(event) {
+  emit("change", event);
+}
+
+function onClick(event) {
+  toggleReadonlyToPreventAutocomplete(false);
+
+  emit("click", event);
+}
+
+function onFocus(event) {
+  toggleReadonlyToPreventAutocomplete(false);
+
+  emit("focus", event);
+}
+
+function onBlur(event) {
+  toggleReadonlyToPreventAutocomplete(true);
+
+  emit("blur", event);
+}
+
+function onMousedown(event) {
+  toggleReadonlyToPreventAutocomplete(false);
+
+  emit("mousedown", event);
+}
+
+function onClickShowPassword() {
+  isShownPassword.value = !isShownPassword.value;
+}
+
+/**
+ * This trick prevents default browser autocomplete behavior.
+ * @param toggleState { boolean }
+ */
+function toggleReadonlyToPreventAutocomplete(toggleState) {
+  if (props.noAutocomplete && !props.readonly) {
+    const input = document.getElementById(props.id);
+
+    toggleState ? input.setAttribute("readonly", "readonly") : input.removeAttribute("readonly");
+  }
+}
+
+function transformValue(value, exp) {
+  const regExp = new RegExp(exp, "ig");
+  const matches = String(value).match(regExp);
+
+  return matches ? matches.join("") : "";
+}
+
+function setLabelPosition() {
+  if (props.labelOutside || !hasSlotContent(slots["left"])) return;
+
+  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+
+  labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+}
+</script>
+
+<style lang="postcss" scoped>
+@font-face {
+  font-family: text-security-disc;
+  src: url("./assets/fonts/text-security-disc.woff");
+}
+</style>

package/src/ui.form-input-file/composables/attrs.composable.js

@@ -0,0 +1,82 @@
+import { computed } from "vue";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props, { errorMessage, dragOver }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { upload, block } = config.value;
+
+  const cvaUpload = cva({
+    base: upload.base,
+    variants: upload.variants,
+    compoundVariants: upload.compoundVariants,
+  });
+
+  const cvaBlock = cva({
+    base: block.base,
+    variants: block.variants,
+    compoundVariants: block.compoundVariants,
+  });
+
+  const uploadClasses = computed(() =>
+    cvaUpload({
+      size: props.size,
+      label: Boolean(props.label),
+      error: Boolean(errorMessage.value),
+    }),
+  );
+
+  const blockClasses = computed(() =>
+    cvaBlock({
+      label: Boolean(props.label),
+    }),
+  );
+
+  const uploadAttrs = getAttrs("upload", { classes: uploadClasses });
+  const buttonAttrs = getAttrs("button", { isComponent: true });
+  const iconUploadFileAttrs = getAttrs("iconUploadFile", { isComponent: true });
+  const wrapperAttrs = getAttrs("wrapper");
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const blockAttrs = getAttrs("block", { classes: blockClasses });
+  const descriptionAttrs = getAttrs("description");
+  const listAttrs = getAttrs("list");
+  const itemCloseAttrs = getAttrs("itemClose");
+  const iconCloseRaw = getAttrs("iconClose", {
+    classes: itemCloseAttrs.value.class,
+    isComponent: true,
+  });
+
+  const iconCloseAttrs = computed(() => ({
+    ...iconCloseRaw.value,
+    class: cx([iconCloseRaw.value.class, itemCloseAttrs.value.class]),
+  }));
+
+  const uppyUploadRaw = getAttrs("uppyUpload");
+
+  const uppyUploadAttrs = computed(() => ({
+    ...uppyUploadRaw.value,
+    class: cx([uppyUploadRaw.value.class, dragOver.value && config.dragOver]),
+  }));
+
+  const uploadSlotAttrs = getAttrs("uploadSlot");
+  const filesAttrs = getAttrs("files", { isComponent: true });
+
+  return {
+    config,
+    uploadAttrs,
+    buttonAttrs,
+    iconUploadFileAttrs,
+    iconCloseAttrs,
+    wrapperAttrs,
+    labelAttrs,
+    blockAttrs,
+    descriptionAttrs,
+    listAttrs,
+    uppyUploadAttrs,
+    uploadSlotAttrs,
+    filesAttrs,
+    hasSlotContent,
+  };
+}

package/src/ui.form-input-file/configs/default.config.js

@@ -0,0 +1,59 @@
+export default /*tw*/ {
+  wrapper: "w-full relative",
+  label: "group/label mb-2 font-normal text-gray-500",
+  block: {
+    base: "mb-4 space-x-2 flex",
+    variants: {
+      label: {
+        true: "mt-4",
+      },
+    },
+  },
+  description: "group/description font-normal text-gray-700",
+  list: "mb-4 space-y-4",
+  button: "w-full",
+  iconUploadFileName: "upload_file",
+  iconDescriptionName: "description",
+  iconCloseName: "close",
+  iconClose: "ml-1.5",
+  iconUploadFile: "",
+  itemClose: "z-20",
+  uploadSlot: "w-fit",
+  files: "mt-4",
+  fileUploadHover: "border-gray-400 bg-gray-50",
+  dragOver: "h-full w-full",
+  uppyUpload: "opacity-0 absolute left-0 top-0 h-0 w-0 [&_.uppy-Root]:h-full [&_.uppy-Root]:w-full",
+  errorFileUpload: "hover:border-red-400 border-red-300",
+  upload: {
+    base: `
+      relative rounded-lg border border-dashed border-gray-300 bg-white h-auto w-auto p-4
+      hover:border-gray-400 hover:bg-gray-50
+    `,
+    variants: {
+      size: {
+        sm: "group/label:text-xs group/description:text-xs group/image:h-8 group/image:w-8 group/title:text-sm",
+        md: "group/text-sm group/description:text-sm group/image:h-10 group/image:w-10 group/title:text-base",
+        ld: "group/label:text-base group/description:text-base group/image:h-12 group/image:w-12 group/title:text-lg",
+      },
+      error: {
+        true: "border-red-300 hover:border-red-400",
+      },
+    },
+  },
+  i18n: {
+    selectOrDragImage: "Select or drag file in this area.",
+    canAttachFilesFormat: "You can attach files in the format:",
+    cannotAttachFilesStart: "Attaching files in",
+    cannotAttachFilesEnd: "format is not supported.",
+    selectFile: "Select file",
+  },
+  defaultVariants: {
+    size: "md",
+    labelOutside: false,
+    allowedFileTypes: [".png", ".jpg", ".jpeg", ".pdf", ".txt", ".doc", ".docx", "xls", ".xlsx"],
+    maxFileSize: 1,
+    maxFiles: 3,
+    local: false,
+    multiple: false,
+  },
+};

package/src/ui.form-input-file/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UInputFile = "UInputFile";

package/src/ui.form-input-file/index.stories.js

@@ -0,0 +1,86 @@
+import { getArgTypes } from "../service.storybook";
+
+import UInputFile from "../ui.form-input-file";
+import UButton from "../ui.button";
+import URow from "../ui.container-row";
+
+export default {
+  id: "3020",
+  title: "Form Inputs & Controls / Input File",
+  component: UInputFile,
+  argTypes: {
+    ...getArgTypes(UInputFile.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UInputFile, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UInputFile
+        v-bind="args"
+      />
+    </URow>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UInputFile, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UInputFile
+      v-bind="args"
+    >
+      ${args.slotTemplate}
+    </UInputFile>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputFile, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <div v-for="(size, index) in sizes" :key="index">
+        <UInputFile
+          :size="size"
+          v-bind="args"
+        />
+      </div>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const allowedSomeFileType = DefaultTemplate.bind({});
+allowedSomeFileType.args = { allowedFileTypes: [".png", ".jpg", ".jpeg"] };
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const multiple = DefaultTemplate.bind({});
+multiple.args = { multiple: true };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error" };
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  slotTemplate: `
+    <template #default>
+       <UButton class="w-[40rem]" label="Select file" color="red" />
+    </template>
+  `,
+};