vueless 0.0.3 → 0.0.4

package/ui.form-input/index.vue

@@ -1,385 +0,0 @@
-<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 "vueless/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 UIService from "vueless/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/ui.form-input-file/composables/attrs.composable.js

@@ -1,82 +0,0 @@
-import { computed } from "vue";
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/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/ui.form-input-file/configs/default.config.js

@@ -1,51 +0,0 @@
-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-auto",
-  iconUploadFile: "",
-  itemClose: "z-20",
-  uploadSlot: "w-fit",
-  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",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    labelOutside: false,
-    allowedFileTypes: [".png", ".jpg", ".jpeg", ".pdf", ".txt", ".doc", ".docx", "xls", ".xlsx"],
-    maxFileSize: 1,
-    maxFiles: 3,
-    local: false,
-    multiple: false,
-  },
-};

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

@@ -1,5 +0,0 @@
-/*
-  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/ui.form-input-file/index.stories.js

@@ -1,86 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UInputFile from "vueless/ui.form-input-file";
-import UButton from "vueless/ui.button";
-import URow from "vueless/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>
-  `,
-};