vueless 0.0.1 → 0.0.3

package/ui.form-textarea/index.vue

@@ -1,399 +1,284 @@
 <template>
-  <div class="mono-textarea-wrapper">
-    <div class="mono-textarea-block">
-      <t-textarea
-        :id="id"
-        ref="textarea"
-        v-model="textArea"
-        class="mono-textarea"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :type="type"
-        :class="textareaClass"
-        :readonly="readonly"
-        :disabled="disabled"
-        :rows="rows"
-        :inputmode="inputMode"
-        :data-cy="dataCy"
-        @focus="onFocus"
-        @blur="onBlur"
-        @change="onChange"
-        @mouseleave="onMouseleave"
-        @mousedown="onMousedown"
-        @click="onClick"
-      />
-
-      <label v-if="isShownIconSlot" class="mono-textarea-icon-label" :for="id">
-        <!-- @slot Use it to add icon after text. -->
-        <slot name="icon" />
+  <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>
-    </div>
-
-    <label class="label" :class="labelClass" :for="id">
-      {{ label }}
-    </label>
-
-    <p v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
-      {{ error }}
-    </p>
-
-    <p v-if="description && !error" class="description">
-      {{ description }}
-    </p>
+      <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>
-import { getRandomId } from "vueless/service.ui";
-import TTextarea from "vueless/library.vue-tailwind-3/t-textarea";
+<script setup>
+import { computed, onMounted, ref, useSlots } from "vue";
 
-export default {
-  name: "UTextarea",
+import UIService from "vueless/service.ui";
+import { getRandomId } from "vueless/service.ui";
 
-  components: {
-    TTextarea,
+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,
   },
 
-  props: {
-    /**
-     * Set input size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set component placeholder.
-     */
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set input label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set description for component.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make textarea read only.
-     */
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make input inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set input type.
-     * @values text, number, email, tel, password, url
-     */
-    type: {
-      type: String,
-      default: "text",
-    },
-
-    /**
-     * Set proper keyboard on mobile devices.
-     * @values text, none, decimal, tel, numeric, search, email, url,
-     */
-    inputMode: {
-      type: String,
-      default: "text",
-    },
-
-    /**
-     * Disable browsers autocomplete.
-     */
-    noAutocomplete: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set error message.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set number of visible rows.
-     */
-    rows: {
-      type: String,
-      default: "2",
-    },
-
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Set component value.
+   */
+  modelValue: {
+    type: String,
+    default: "",
   },
 
-  emits: ["change", "click", "focus", "blur", "update:modelValue", "mousedown"],
-
-  computed: {
-    textArea: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    textareaClass() {
-      return {
-        disabled: this.disabled,
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-        "error-textarea": this.error,
-        "mono-textarea-default-padding": !this.isShownIconSlot,
-        "mono-textarea-with-icon-padding": this.isShownIconSlot,
-      };
-    },
-
-    labelClass() {
-      return {
-        disabled: this.disabled,
-        "error-label": this.error,
-        "size-label-sm": this.size === "sm",
-        "size-label-md": this.size === "md",
-        "size-label-lg": this.size === "lg",
-      };
-    },
-
-    isShownIconSlot() {
-      return !!this.$slots["icon"];
-    },
+  /**
+   * Set component placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
   },
 
-  mounted() {
-    this.toggleReadonly(true);
+  /**
+   * Set input label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    onChange() {
-      this.$emit("change");
-    },
-
-    onClick(event) {
-      this.toggleReadonly(false);
-
-      this.$emit("click", event);
-    },
-
-    onFocus() {
-      this.toggleReadonly(false);
-
-      this.$emit("focus");
-    },
-
-    onBlur() {
-      this.toggleReadonly(true);
-
-      this.$emit("blur");
-    },
-
-    onMouseleave() {
-      this.toggleReadonly(true);
-    },
-
-    onMousedown() {
-      this.$emit("mousedown");
-    },
-
-    toggleReadonly(hasReadonly) {
-      if (this.noAutocomplete && !this.readonly) {
-        const textarea = document.getElementById(this.id);
+  /**
+   * Input label place (above the input box or inside of it).
+   * @values topInside, top
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.labelAlign,
+  },
 
-        hasReadonly
-          ? textarea.setAttribute("readonly", "readonly")
-          : textarea.removeAttribute("readonly");
-      }
-    },
+  /**
+   * Set description for component.
+   */
+  description: {
+    type: String,
+    default: "",
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-textarea-wrapper {
-  @apply relative w-full;
+  /**
+   * Make textarea read only.
+   */
+  readonly: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTextarea).default.readonly,
+  },
 
-  .mono-textarea {
-    @apply font-normal text-gray-900;
-    @apply resize-none rounded-lg border border-solid border-gray-300 bg-white shadow-none;
-    @apply w-full pl-4;
+  /**
+   * Make input disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTextarea).default.disabled,
+  },
 
-    &:focus {
-      @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
-    }
+  /**
+   * Set input type.
+   * @values text, number, email, tel, password, url
+   */
+  type: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.type,
+  },
 
-    &:read-only {
-      @apply border-gray-300 ring-0;
-    }
+  /**
+   * 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,
+  },
 
-    &:hover {
-      @apply border-gray-400;
-    }
+  /**
+   * Disable browsers autocomplete.
+   */
+  noAutocomplete: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTextarea).default.noAutocomplete,
+  },
 
-    &::placeholder {
-      @apply font-normal text-gray-400;
-    }
+  /**
+   * Set error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
 
-    &-block {
-      @apply relative flex;
-    }
+  /**
+   * Set number of visible rows.
+   */
+  rows: {
+    type: String,
+    default: UIService.get(defaultConfig, UTextarea).default.rows,
+  },
 
-    &-icon-label {
-      @apply flex items-center justify-center;
-      @apply h-full w-11;
-      @apply absolute right-0;
-    }
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-    &-default-padding {
-      @apply pr-4;
-    }
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    &-with-icon-padding {
-      @apply pr-11;
-    }
-  }
+  /**
+   * 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);
+  },
+});
 
-  .label {
-    @apply absolute top-px;
-    @apply h-auto;
-    width: calc(100% - 2rem);
-    @apply bg-white;
-    @apply font-normal text-gray-500;
+defineExpose({ textarea });
 
-    &.disabled {
-      @apply bg-gray-100;
-    }
-  }
+onMounted(() => toggleReadonly(true));
 
-  .description {
-    @apply text-xs font-normal text-gray-500/[85];
-    @apply pl-4 pt-2;
-  }
+function onChange() {
+  emit("change");
+}
 
-  .disabled {
-    @apply border-none bg-gray-100 opacity-100;
-  }
+function onClick(event) {
+  toggleReadonly(false);
 
-  .error {
-    &-message {
-      @apply text-xs font-normal text-red-500;
-      @apply mt-2 pl-4;
-    }
+  emit("click", event);
+}
 
-    &-label {
-      @apply text-red-500;
-    }
+function onFocus() {
+  toggleReadonly(false);
 
-    &-textarea {
-      @apply border-red-300;
+  emit("focus");
+}
 
-      &:hover {
-        @apply border-red-400;
-      }
+function onBlur() {
+  toggleReadonly(true);
 
-      &:focus {
-        @apply border-red-500 ring-red-100;
-      }
-    }
-  }
+  emit("blur");
 }
 
-.size {
-  &-sm {
-    @apply text-xs;
-    @apply pb-2 pr-4 pt-6;
+function onMouseleave() {
+  toggleReadonly(true);
+}
 
-    &::placeholder {
-      @apply text-xs;
-    }
-  }
+function onMousedown() {
+  emit("mousedown");
+}
 
-  &-md {
-    @apply text-base;
-    @apply pb-2.5 pr-4 pt-7;
+function toggleReadonly(hasReadonly) {
+  if (props.noAutocomplete && !props.readonly) {
+    const textarea = document.getElementById(props.id);
 
-    &::placeholder {
-      @apply text-base;
-    }
+    hasReadonly
+      ? textarea.setAttribute("readonly", "readonly")
+      : textarea.removeAttribute("readonly");
   }
+}
 
-  &-lg {
-    @apply text-lg;
-    @apply pb-3 pr-4 pt-8;
+function setLabelPosition() {
+  if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
-    &::placeholder {
-      @apply text-lg;
-    }
-  }
+  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
 
-  &-label {
-    &-sm {
-      @apply text-xs;
-      @apply left-4;
-      @apply pt-2;
-    }
-
-    &-md {
-      @apply text-sm;
-      @apply left-4;
-      @apply pt-2.5;
-    }
-
-    &-lg {
-      @apply text-base;
-      @apply left-4;
-      @apply pt-3;
-    }
-  }
+  labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  textareaWrapper.value.style.paddingLeft = `${leftSlotWidth}px`;
 }
-</style>
+
+onMounted(() => setLabelPosition());
+</script>

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

@@ -0,0 +1,34 @@
+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,
+  };
+}