vueless 0.0.4 → 0.0.5

package/src/ui.form-textarea/configs/default.config.js

@@ -0,0 +1,68 @@
+export default /*tw*/ {
+  wrapper: "relative w-full",
+  leftSlot: "flex items-center justify-center h-full w-11 absolute left-0",
+  rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
+  textareaWrapper: {
+    base: `
+      transition duration-100 ease-in-out focus-within:outline-none rounded-lg border
+      border-solid border-gray-300 focus-within:border-gray-500 focus-within:ring-4
+      focus-within:ring-gray-600/[.15] ring-0 hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
+      cursor-text bg-white
+    `,
+    variants: {
+      error: {
+        true: `
+          border-red-300
+          hover:border-red-400 hover:focus-within:border-red-500
+          focus-within:border-red-500 focus-within:ring-red-100
+        `,
+      },
+      disabled: {
+        true: "cursor-not-allowed border-none focus-within:ring-0 bg-gray-100",
+      },
+      readonly: {
+        true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-gray-300",
+      },
+      size: {
+        sm: "pb-2 pr-4 pt-6",
+        md: "pb-2.5 pr-4 pt-7",
+        lg: "pb-3 pr-4 pt-8",
+      },
+    },
+    compoundVariants: [
+      { labelPlacement: "top", size: "sm", class: "pt-2" },
+      { labelPlacement: "top", size: "md", class: "pt-2.5" },
+      { labelPlacement: "top", size: "lg", class: "pt-3" },
+      { labelPlacement: "topInside", label: false, class: "pt-2" },
+      { labelPlacement: "topInside", label: false, class: "pt-2.5" },
+      { labelPlacement: "topInside", label: false, class: "pt-3" },
+    ],
+  },
+  textarea: {
+    base: `
+      placeholder:font-normal placeholder:text-gray-400 shadow-none w-full
+      disabled:cursor-not-allowed font-normal text-gray-900 resize-none block
+      border-none focus:border-none focus:outline-none focus:ring-0 p-0
+      bg-transparent
+    `,
+    variants: {
+      size: {
+        sm: "text-xs placeholder:text-xs",
+        md: "text-base placeholder:text-base",
+        lg: "text-lg placeholder:text-lg",
+      },
+    },
+  },
+  label: "",
+  defaultVariants: {
+    size: "md",
+    type: "text",
+    inputMode: "text",
+    rows: "2",
+    labelAlign: "topInside",
+    error: false,
+    disabled: false,
+    readonly: false,
+    noAutocomplete: false,
+  },
+};

package/src/ui.form-textarea/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 UTextarea = "UTextarea";

package/src/ui.form-textarea/index.stories.js

@@ -0,0 +1,151 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UTextarea from "../ui.form-textarea";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "3070",
+  title: "Form Inputs & Controls / Textarea",
+  component: UTextarea,
+  args: {
+    label: "Label",
+  },
+  argTypes: {
+    ...getArgTypes(UTextarea.name),
+    modelValue: { control: { type: "text" } },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UTextarea },
+  setup() {
+    const slots = getSlotNames(UTextarea.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UTextarea
+      v-bind="args"
+    >
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UTextarea>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UTextarea, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTextarea
+      v-bind="args"
+    >
+      ${args.slotTemplate}
+    </UTextarea>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UTextarea, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="w-1/3" v-for="(size, index) in sizes" :key="index">
+        <UTextarea
+          v-bind="args"
+          :size="size"
+        />
+      </div>
+    </URow>
+  `,
+});
+
+const LabelPlacementTemplate = (args) => ({
+  components: { UTextarea, UGroup },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <UTextarea
+        v-bind="args"
+        label-align="top"
+        label="top"
+      />
+
+      <UTextarea
+        v-bind="args"
+        label-align="topInside"
+        label="topInside"
+      />
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const labelPlacement = LabelPlacementTemplate.bind({});
+labelPlacement.args = {};
+
+export const placeholder = DefaultTemplate.bind({});
+placeholder.args = { placeholder: "some placeholder text" };
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error text" };
+
+export const description = DefaultTemplate.bind({});
+description.args = { description: "some description text" };
+
+export const rows1 = DefaultTemplate.bind({});
+rows1.args = { rows: "1" };
+
+export const readonly = DefaultTemplate.bind({});
+readonly.args = { readonly: true, value: "some value for read" };
+
+export const noAutocomplete = DefaultTemplate.bind({});
+noAutocomplete.args = { noAutocomplete: true };
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        name="star"
+        color="black"
+        size="md"
+      />
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        name="star"
+        color="black"
+        size="md"
+      />
+    </template>
+  `,
+};

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

@@ -0,0 +1,284 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <ULabel
+      ref="labelComponent"
+      :for="id"
+      :label="label"
+      :error="error"
+      :description="description"
+      :size="size"
+      :disabled="disabled"
+      :data-cy="dataCy"
+      :align="labelAlign"
+      v-bind="labelAttrs"
+    >
+      <label
+        v-if="hasSlotContent($slots['left'])"
+        ref="leftSlotWrapper"
+        :for="id"
+        v-bind="leftSlotAttrs"
+      >
+        <!-- @slot Use it to add some component before text. -->
+        <slot name="left" />
+      </label>
+      <label ref="textareaWrapper" :for="id" v-bind="textareaWrapperAttrs">
+        <textarea
+          :id="id"
+          ref="textarea"
+          v-model="localValue"
+          :value="modelValue"
+          :placeholder="placeholder"
+          :type="type"
+          :readonly="readonly"
+          :disabled="disabled"
+          :rows="rows"
+          :inputmode="inputMode"
+          :data-cy="dataCy"
+          v-bind="textareaAttrs"
+          @focus="onFocus"
+          @blur="onBlur"
+          @change="onChange"
+          @mouseleave="onMouseleave"
+          @mousedown="onMousedown"
+          @click="onClick"
+        />
+      </label>
+      <label v-if="hasSlotContent($slots['right'])" :for="id" v-bind="rightSlotAttrs">
+        <!-- @slot Use it to add some component after text. -->
+        <slot name="right" />
+      </label>
+    </ULabel>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, useSlots } from "vue";
+
+import UIService from "../service.ui";
+import { getRandomId } from "../service.ui";
+
+import { UTextarea } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UTextarea", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.size,
+  },
+
+  /**
+   * Set component value.
+   */
+  modelValue: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set component placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set input label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Input label place (above the input box or inside of it).
+   * @values topInside, top
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.labelAlign,
+  },
+
+  /**
+   * Set description for component.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Make textarea read only.
+   */
+  readonly: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTextarea).default.readonly,
+  },
+
+  /**
+   * Make input disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTextarea).default.disabled,
+  },
+
+  /**
+   * Set input type.
+   * @values text, number, email, tel, password, url
+   */
+  type: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.type,
+  },
+
+  /**
+   * Set proper keyboard on mobile devices.
+   * @values text, none, decimal, tel, numeric, search, email, url,
+   */
+  inputMode: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.inputMode,
+  },
+
+  /**
+   * Disable browsers autocomplete.
+   */
+  noAutocomplete: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTextarea).default.noAutocomplete,
+  },
+
+  /**
+   * Set error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set number of visible rows.
+   */
+  rows: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.rows,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["change", "click", "focus", "blur", "update:modelValue", "mousedown"]);
+
+const slots = useSlots();
+
+const {
+  textareaAttrs,
+  labelAttrs,
+  textareaWrapperAttrs,
+  leftSlotAttrs,
+  rightSlotAttrs,
+  wrapperAttrs,
+  hasSlotContent,
+} = useAttrs(props);
+
+const textarea = ref(null);
+const labelComponent = ref(null);
+const leftSlotWrapper = ref(null);
+const textareaWrapper = ref(null);
+
+const localValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
+});
+
+defineExpose({ textarea });
+
+onMounted(() => toggleReadonly(true));
+
+function onChange() {
+  emit("change");
+}
+
+function onClick(event) {
+  toggleReadonly(false);
+
+  emit("click", event);
+}
+
+function onFocus() {
+  toggleReadonly(false);
+
+  emit("focus");
+}
+
+function onBlur() {
+  toggleReadonly(true);
+
+  emit("blur");
+}
+
+function onMouseleave() {
+  toggleReadonly(true);
+}
+
+function onMousedown() {
+  emit("mousedown");
+}
+
+function toggleReadonly(hasReadonly) {
+  if (props.noAutocomplete && !props.readonly) {
+    const textarea = document.getElementById(props.id);
+
+    hasReadonly
+      ? textarea.setAttribute("readonly", "readonly")
+      : textarea.removeAttribute("readonly");
+  }
+}
+
+function setLabelPosition() {
+  if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
+
+  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+
+  labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  textareaWrapper.value.style.paddingLeft = `${leftSlotWidth}px`;
+}
+
+onMounted(() => setLabelPosition());
+</script>

package/src/ui.image-avatar/composables/attrs.composable.js

@@ -0,0 +1,34 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { avatar } = config.value;
+
+  const cvaAvatar = cva({
+    base: avatar.base,
+    variants: avatar.variants,
+    compoundVariants: avatar.compoundVariants,
+  });
+
+  const avatarClasses = computed(() =>
+    setColor(
+      cvaAvatar({
+        size: props.size,
+        color: props.color,
+        rounded: props.rounded,
+        bordered: props.bordered,
+      }),
+      props.color,
+    ),
+  );
+
+  const avatarAttrs = getAttrs("avatar", { classes: avatarClasses });
+
+  return {
+    avatarAttrs,
+  };
+}

package/src/ui.image-avatar/configs/default.config.js

@@ -0,0 +1,42 @@
+export default /*tw*/ {
+  avatar: {
+    base: `
+      flex h-full items-center justify-center font-medium
+      bg-contain bg-center bg-no-repeat bg-{color}-100 text-{color}-600`,
+    variants: {
+      bordered: {
+        true: "border border-{color}-200",
+      },
+      size: {
+        "2xs": "size-4 text-2xs",
+        xs: "size-5 text-2xs",
+        sm: "size-6 text-xs",
+        md: "size-8 text-sm",
+        lg: "size-10 text-lg",
+        xl: "size-12 text-2xl",
+        "2xl": "size-14 text-3xl",
+      },
+      rounded: {
+        sm: "rounded",
+        md: "rounded-lg",
+        lg: "rounded-xl",
+        full: "rounded-full",
+      },
+      color: {
+        white: "bg-white text-gray-900",
+        grayscale: "bg-gray-100 text-gray-900",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "grayscale",
+    size: "md",
+    rounded: "md",
+    bordered: false,
+  },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-100` },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `border-(${colors})-200` },
+  ],
+};

package/src/ui.image-avatar/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 UAvatar = "UAvatar";

package/src/ui.image-avatar/index.stories.js

@@ -0,0 +1,107 @@
+import { getArgTypes } from "../service.storybook";
+
+import UAvatar from "../ui.image-avatar";
+import URow from "../ui.container-row";
+
+export default {
+  id: "6030",
+  title: "Images & Icons / Avatar",
+  component: UAvatar,
+  argTypes: {
+    ...getArgTypes(UAvatar.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UAvatar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UAvatar v-bind="args" />
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UAvatar, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UAvatar
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UAvatar, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <UAvatar
+        v-for="(color, index) in colors"
+        v-bind="args"
+        :color="color"
+        :key="index"
+      />
+    </URow>
+  `,
+  created() {
+    this.mxArgTypes = argTypes;
+  },
+});
+
+const RoundedTemplate = (args, { argTypes } = {}) => ({
+  components: { UAvatar, URow },
+  setup() {
+    return {
+      args,
+      roundedValues: argTypes.rounded.options,
+    };
+  },
+  template: `
+    <URow>
+      <UAvatar
+        v-for="(rounded, index) in roundedValues"
+        v-bind="args"
+        :rounded="rounded"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = { userName: "Name" };
+
+export const rounded = RoundedTemplate.bind({});
+rounded.args = { userName: "Name", color: "orange" };
+
+export const bordered = ColorsTemplate.bind({});
+bordered.args = { userName: "Name", bordered: true };
+
+export const roundedFull = DefaultTemplate.bind({});
+roundedFull.args = { userName: "Name", rounded: "full" };
+
+export const userName = DefaultTemplate.bind({});
+userName.args = { userName: "Name Surname" };