vueless 0.0.3 → 0.0.4

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

@@ -1,68 +0,0 @@
-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/ui.form-textarea/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 UTextarea = "UTextarea";

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

@@ -1,151 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UTextarea from "vueless/ui.form-textarea";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-import UGroup from "vueless/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/ui.form-textarea/index.vue

@@ -1,284 +0,0 @@
-<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 "vueless/service.ui";
-import { getRandomId } from "vueless/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/ui.image-avatar/composables/attrs.composable.js

@@ -1,34 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/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/ui.image-avatar/configs/default.config.js

@@ -1,42 +0,0 @@
-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/ui.image-avatar/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 UAvatar = "UAvatar";

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

@@ -1,107 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UAvatar from "vueless/ui.image-avatar";
-import URow from "vueless/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" };