vueless 0.0.2 → 0.0.3

package/ui.form-input/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-input/composables/attrs.composable.js

@@ -0,0 +1,66 @@
+import useUI from "vueless/composable.ui";
+import { cva, cx } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { inputPasswordClasses }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { input, block } = config.value;
+
+  const cvaInput = cva({
+    base: input.base,
+    variants: input.variants,
+    compoundVariants: input.compoundVariants,
+  });
+
+  const cvaBlock = cva({
+    base: block.base,
+    variants: block.variants,
+    compoundVariants: block.compoundVariants,
+  });
+
+  const blockClasses = computed(() =>
+    cvaBlock({
+      error: Boolean(props.error),
+      disabled: props.disabled,
+    }),
+  );
+
+  const inputClasses = computed(() =>
+    cvaInput({
+      size: props.size,
+      type: props.type,
+      labelOutside: props.labelOutside,
+      label: Boolean(props.label),
+      error: Boolean(props.error),
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const inputWrapperAttrs = getAttrs("inputWrapper");
+  const rightSlotAttrs = getAttrs("rightSlot");
+  const leftSlotAttrs = getAttrs("leftSlot");
+  const passwordIconAttrs = getAttrs("passwordIcon");
+  const blockAttrs = getAttrs("block", { classes: blockClasses });
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const inputAttrsRaw = getAttrs("input", { classes: inputClasses });
+
+  const inputAttrs = computed(() => ({
+    ...inputAttrsRaw.value,
+    class: cx([inputAttrsRaw.value.class, inputPasswordClasses.value]),
+  }));
+
+  return {
+    config,
+    inputAttrs,
+    blockAttrs,
+    wrapperAttrs,
+    labelAttrs,
+    passwordIconAttrs,
+    leftSlotAttrs,
+    inputWrapperAttrs,
+    rightSlotAttrs,
+    hasSlotContent,
+  };
+}

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

@@ -0,0 +1,72 @@
+export default /*tw*/ {
+  wrapper: "relative w-full",
+  inputWrapper: "flex relative w-full",
+  rightSlot: "flex items-center justify-end whitespace-nowrap pr-4 rounded-r-lg rounded-l-none",
+  leftSlot: "flex items-center justify-end whitespace-nowrap pl-4 rounded-l-lg rounded-r-none",
+  passwordIcon: "",
+  passwordVisibleIconName: "visibility",
+  passwordHiddenIconName: "visibility_off",
+  label: "",
+  block: {
+    base: `
+      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
+      transition duration-100 ease-in-out
+      hover:border-gray-400 hover:focus-within:border-gray-500
+      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+    `,
+    variants: {
+      disabled: {
+        true: `
+          text-gray-900 border-gray-100 bg-gray-100 opacity-100 cursor-default
+          hover:border-gray-100
+        `,
+      },
+      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
+        `,
+      },
+    },
+  },
+  input: {
+    base: `
+      block w-full pb-2 px-4 font-normal leading-none text-gray-900 placeholder:font-normal placeholder-gray-400
+      transition duration-100 ease-in-out bg-white border-none border-gray-300 rounded-lg shadow-none
+      focus:outline-none focus:ring-0 disabled:opacity-50
+      disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
+      read-only:border-gray-300 read-only:ring-0
+    `,
+    variants: {
+      size: {
+        sm: "pt-6 text-sm placeholder:text-sm placeholder:font-normal",
+        md: "pt-7 text-base placeholder:text-base placeholder:font-normal",
+        lg: "pt-8 text-lg placeholder:text-lg placeholder:font-normal",
+      },
+      error: `
+        border-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-100
+        focus-within:border-red-500 focus-within:ring-red-100
+      `,
+    },
+    // Note: Left slot width may affect horizontal label position.
+    compoundVariants: [
+      { labelOutside: true, size: "sm", class: "py-2" },
+      { labelOutside: true, size: "md", class: "py-2.5" },
+      { labelOutside: true, size: "lg", class: "py-3" },
+      { labelOutside: false, label: false, size: "sm", class: "py-2" },
+      { labelOutside: false, label: false, size: "md", class: "py-2.5" },
+      { labelOutside: false, label: false, size: "lg", class: "py-3" },
+    ],
+  },
+  defaultVariants: {
+    size: "md",
+    type: "text",
+    inputMode: "text",
+    error: false,
+    readonly: false,
+    disabled: false,
+    labelOutside: false,
+    noAutocomplete: false,
+  },
+};

package/{constant.component-names → ui.form-input/constants}/index.js

@@ -1,6 +1,5 @@
 /*
-  This file need to prevent the issue in script setup:
+  This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UEmpty = "UEmpty";
 export const UInput = "UInput";

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

@@ -2,9 +2,11 @@ import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
 import UInput from "vueless/ui.form-input";
 import UIcon from "vueless/ui.image-icon";
+import UGroup from "vueless/ui.container-group";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "3010",
   title: "Form Inputs & Controls / Input",
   component: UInput,
   args: {
@@ -47,7 +49,7 @@ const SlotTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UInput, URow },
   setup() {
     return {
@@ -59,15 +61,15 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UInput
         v-for="(size, index) in sizes"
+        v-bind="args"
         :size="size"
         :key="index"
-        v-bind="args"
       />
     </URow>
   `,
 });
 
-const ValidationRuleTemplate = (args, { argTypes }) => ({
+const ValidationRuleTemplate = (args, { argTypes } = {}) => ({
   components: { UInput, URow },
   setup() {
     return {
@@ -79,15 +81,39 @@ const ValidationRuleTemplate = (args, { argTypes }) => ({
     <URow>
       <UInput
         v-for="(rule, index) in rules"
+        v-bind="args"
         :validationRule="rule"
         :key="index"
         :description="rule"
-        v-bind="args"
       />
     </URow>
   `,
 });
 
+const LabelPlacementTemplate = (args) => ({
+  components: { UInput, UGroup },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <UInput
+        v-bind="args"
+        label="top"
+        :label-outside="true"
+      />
+
+      <UInput
+        v-bind="args"
+        label="topInside"
+        :label-outside="false"
+      />
+    </UGroup>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -112,21 +138,29 @@ noAutocomplete.args = { noAutocomplete: true };
 export const typePassword = DefaultTemplate.bind({});
 typePassword.args = { type: "password" };
 
+export const labelPlacement = LabelPlacementTemplate.bind({});
+labelPlacement.args = {};
+
 export const sizes = SizesTemplate.bind({});
 sizes.args = {};
 
 export const validationRules = ValidationRuleTemplate.bind({});
 validationRules.args = {};
 
-export const slotIcon = SlotTemplate.bind({});
-slotIcon.args = {
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
   slotTemplate: `
-    <template #icon>
-      <UIcon
-        name="star"
-        color="black"
-        size="sm"
-      />
+    <template #left>
+      🥸
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      🥸
     </template>
   `,
 };