vueless 0.0.2 → 0.0.3

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

@@ -1,210 +1,213 @@
 <template>
-  <div class="mono-search-wrapper" :class="focusClass" @keyup.enter="onClickSearch">
-    <!-- @slot Use it to add something before text. -->
-    <slot name="left" />
-
-    <t-input
-      :id="id"
-      ref="searchInput"
-      v-model="search"
-      class="mono-search-input"
-      type="search"
-      inputmode="search"
-      :class="inputSizeClass"
-      :data-cy="dataCy"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-
-    <UIcon
-      name="close"
-      class="mono-search-icon-close"
-      color="gray"
-      interactive
-      :data-cy="`${dataCy}-close`"
-      :size="iconSize"
-      @click="onClickClear"
-    />
-
-    <UIcon
-      name="search"
-      class="mono-search-icon"
-      interactive
-      :size="iconSize"
-      :data-cy="`${dataCy}-search`"
-      @click="onClickSearch"
-    />
-  </div>
+  <UInput
+    :id="id"
+    ref="searchInput"
+    v-model="search"
+    :size="size"
+    :disabled="disabled"
+    :description="description"
+    :label="label"
+    :error="error"
+    :placeholder="placeholder"
+    :type="search"
+    :input-mode="search"
+    :data-cy="dataCy"
+    :label-outside="labelOutside"
+    v-bind="inputAttrs"
+    @keyup.enter="onClickSearch"
+  >
+    <template #left>
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+    </template>
+
+    <template #right>
+      <!-- @slot Use it to add something before text. -->
+      <slot name="right" />
+
+      <UButton
+        v-if="searchButton && !hasSlotContent(slots['right'])"
+        variant="primary"
+        :label="text"
+        v-bind="buttonAttrs"
+        :data-cy="`${dataCy}-right`"
+        @click="onClickSearch"
+      />
+    </template>
+
+    <template #right-icon>
+      <UIcon
+        color="gray"
+        interactive
+        :name="config.closeIconName"
+        :data-cy="`${dataCy}-close`"
+        :size="iconSize"
+        v-bind="closeIconAttrs"
+        @click="onClickClear"
+      />
+
+      <UIcon
+        v-if="!searchButton"
+        color="grayscale"
+        interactive
+        :size="iconSize"
+        :name="config.searchIconName"
+        :data-cy="`${dataCy}-search`"
+        v-bind="searchIconAttrs"
+        @click="onClickSearch"
+      />
+    </template>
+  </UInput>
 </template>
 
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TInput from "vueless/library.vue-tailwind-3/t-input";
-import { getRandomId } from "vueless/service.ui";
+<script setup>
+import { computed, useSlots } from "vue";
 
-export default {
-  name: "UInputSearch",
+import UIService, { getRandomId } from "vueless/service.ui";
 
-  components: {
-    UIcon,
-    TInput,
+import { UInputSearch } 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: "UInputSearch" });
+
+const props = defineProps({
+  /**
+   * Set component value.
+   */
+  modelValue: {
+    type: String,
+    default: "",
   },
 
-  props: {
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set input size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Set input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputSearch).default.size,
   },
 
-  emits: ["update:modelValue", "clear", "search"],
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-  data() {
-    return {
-      focus: false,
-    };
+  /**
+   * Set input disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.disabled,
   },
 
-  computed: {
-    search: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    focusClass() {
-      return this.focus ? "focus" : "";
-    },
-
-    inputSizeClass() {
-      return {
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-      };
-    },
-
-    iconSize() {
-      const sizes = {
-        sm: "xs",
-        md: "sm",
-        lg: "md",
-      };
-
-      return sizes[this.size];
-    },
+  /**
+   * Search button text..
+   */
+  text: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    onClickClear() {
-      this.search = "";
-      this.$emit("clear");
-    },
-
-    onClickSearch() {
-      this.focus = true;
-      if (!this.search) return;
-      this.$emit("search", this.search);
-    },
-
-    onFocus() {
-      this.focus = true;
-    },
-
-    onBlur() {
-      this.focus = false;
-    },
+  /**
+   * Show / hide search button.
+   */
+  searchButton: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.searchButton,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-search {
-  &-wrapper {
-    @apply relative;
-    @apply flex items-center justify-between;
-    @apply w-full rounded-lg;
-    @apply bg-gray-900 bg-opacity-5;
-    @apply pr-3;
-  }
-
-  &-input {
-    @apply h-full;
-    @apply border-0 bg-transparent shadow-none focus:ring-0;
-    @apply font-normal text-gray-900;
-
-    &::-webkit-search-decoration,
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-results-button,
-    &::-webkit-search-results-decoration {
-      -webkit-appearance: none;
-    }
-  }
-
-  &-icon {
-    @apply flex h-full items-center;
-    @apply ml-2;
-
-    &:deep(g [fill]) {
-      @apply fill-current text-gray-900 opacity-100;
-    }
-
-    &-close {
-      @apply flex h-full items-center;
-      @apply absolute right-8 top-0;
-    }
-  }
-}
+  /**
+   * Input description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
 
-.focus {
-  @apply ring-4 ring-gray-900 ring-opacity-15;
-}
+  /**
+   * Show label outside the input block.
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.labelOutside,
+  },
+
+  /**
+   * Input placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Input label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
 
-.size {
-  &-sm {
-    @apply mb-0.5;
-    @apply text-sm;
-  }
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const slots = useSlots();
+const emit = defineEmits(["update:modelValue", "clear", "search"]);
 
-  &-md {
-    @apply mb-1 mt-0.5;
-  }
+const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs, hasSlotContent } =
+  useAttrs(props);
 
-  &-lg {
-    @apply mb-2 mt-1.5;
-    @apply text-lg;
-  }
+const search = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+function onClickClear() {
+  search.value = "";
+  emit("clear");
 }
-</style>
+
+function onClickSearch() {
+  if (!search.value) return;
+  emit("search", search.value);
+}
+</script>

package/ui.form-label/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-label/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+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, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper, label, description } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
+  });
+
+  const cvaDescription = cva({
+    base: description.base,
+    variants: description.variants,
+    compoundVariants: description.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      size: props.size,
+      align: props.align,
+    }),
+  );
+
+  const labelClasses = computed(() =>
+    cvaLabel({
+      size: props.size,
+      error: Boolean(props.error),
+      disabled: props.disabled,
+      align: props.align,
+    }),
+  );
+
+  const descriptionClasses = computed(() =>
+    cvaDescription({
+      size: props.size,
+      error: Boolean(props.error),
+      align: props.align,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const labelAttrs = getAttrs("label", { classes: labelClasses });
+  const labelWrapperAttrs = getAttrs("labelWrapper");
+  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
+
+  return {
+    wrapperAttrs,
+    labelWrapperAttrs,
+    labelAttrs,
+    descriptionAttrs,
+    hasSlotContent,
+  };
+}

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

@@ -0,0 +1,95 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex",
+    variants: {
+      size: {
+        sm: "gap-2",
+        md: "gap-3",
+        lg: "gap-4",
+      },
+      align: {
+        top: "flex-col",
+        topInside: "flex-col",
+        topWithDesc: "flex-col-reverse w-fit",
+        left: "flex-row w-fit",
+        right: "flex-row-reverse w-fit",
+      },
+    },
+    compoundVariants: [
+      { align: "top", size: "sm", class: "gap-0 space-y-2" },
+      { align: "top", size: "md", class: "gap-0 space-y-2" },
+      { align: "top", size: "lg", class: "gap-0 space-y-2" },
+      { align: "topInside", size: "sm", class: "gap-0" },
+      { align: "topInside", size: "md", class: "gap-0" },
+      { align: "topInside", size: "lg", class: "gap-0" },
+    ],
+  },
+  labelWrapper: "",
+  label: {
+    base: "pt-1 pb-1.5 z-10 font-normal block !leading-none",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base mt-px",
+        lg: "text-lg mt-0.5",
+      },
+      align: {
+        topInside: "absolute left-4 text-gray-500",
+        topWithDesc: "text-gray-500",
+        top: "text-gray-500",
+        left: "text-gray-900",
+        right: "text-gray-900",
+      },
+      error: {
+        true: "text-red-500",
+      },
+      disabled: {
+        true: "text-gray-900 opacity-50",
+      },
+    },
+    compoundVariants: [
+      { align: "top", size: "sm", class: "m-0 p-0 text-xs" },
+      { align: "top", size: "md", class: "m-0 p-0 text-sm" },
+      { align: "top", size: "lg", class: "m-0 p-0 text-base" },
+      { align: "topInside", size: "sm", class: "m-0 p-0 top-2 text-xs" },
+      { align: "topInside", size: "md", class: "m-0 p-0 top-2.5 text-sm" },
+      { align: "topInside", size: "lg", class: "m-0 p-0 top-3 text-base" },
+      { align: "topWithDesc", size: "sm", class: "m-0 p-0 text-xs" },
+      { align: "topWithDesc", size: "md", class: "m-0 p-0 text-sm" },
+      { align: "topWithDesc", size: "lg", class: "m-0 p-0 text-base" },
+    ],
+  },
+  description: {
+    base: "font-normal text-gray-500/[85] !leading-none",
+    variants: {
+      size: {
+        sm: "text-2xs",
+        md: "text-xs",
+        lg: "text-sm",
+      },
+      align: {
+        topInside: "pl-4",
+        top: "pl-0",
+        left: "pl-0",
+        right: "pl-0",
+      },
+      error: {
+        true: "text-red-500",
+      },
+    },
+    compoundVariants: [
+      { align: "top", size: "sm", class: "mt-1.5" },
+      { align: "top", size: "md", class: "mt-2" },
+      { align: "top", size: "lg", class: "mt-2.5" },
+      { align: "topInside", size: "sm", class: "mt-1.5" },
+      { align: "topInside", size: "md", class: "mt-2" },
+      { align: "topInside", size: "lg", class: "mt-2.5" },
+    ],
+  },
+  defaultVariants: {
+    align: "top",
+    size: "md",
+    error: false,
+    disabled: false,
+  },
+};

package/ui.form-label/constants/index.js

@@ -0,0 +1,13 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const ULabel = "ULabel";
+
+export const PLACEMENT = {
+  topInside: "topInside",
+  topWithDesc: "topWithDesc",
+  top: "top",
+  left: "left",
+  right: "right",
+};

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

@@ -0,0 +1,107 @@
+import ULabel from "vueless/ui.form-label";
+import URow from "vueless/ui.container-row";
+import UButton from "vueless/ui.button/index";
+import UBadge from "vueless/ui.text-badge";
+
+import { getArgTypes } from "vueless/service.storybook";
+
+export default {
+  id: "3240",
+  title: "Form Inputs & Controls / Label",
+  component: ULabel,
+  args: {
+    label: "Label",
+    description: "Description",
+  },
+  argTypes: {
+    ...getArgTypes(ULabel.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULabel v-bind="args" />
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { ULabel, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULabel v-bind="args">
+      ${args.slotTemplate}
+    </ULabel>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULabel, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULabel
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const placementTemplate = (args, { argTypes } = {}) => ({
+  components: { ULabel, URow, UButton },
+  setup() {
+    return {
+      args,
+      placements: argTypes.placement.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULabel
+        v-for="(placement, index) in placements"
+        v-bind="args"
+        :align="placement"
+        :key="index"
+      >
+        <UButton text="Button"/>
+      </ULabel>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const Placement = placementTemplate.bind({});
+Placement.args = {};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "some error" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
+  slotTemplate: `
+    <template #footer>
+      <UBadge label="favourite" color="green" size="sm" />
+    </template>
+  `,
+};