@fiscozen/input 0.1.15 → 0.1.16-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.15",
+  "version": "0.1.16-beta.1",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,8 +9,9 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
+    "@fiscozen/button": "^0.1.12-beta.1",
     "@fiscozen/composables": "^0.1.36",
-    "@fiscozen/icons": "^0.1.24"
+    "@fiscozen/icons": "^0.1.28"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -29,8 +30,8 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzInput.vue

@@ -24,23 +24,26 @@
           :class="leftIconClass"
         />
       </slot>
-      <input
-        :type="type"
-        :required="required ? required : false"
-        :disabled="disabled"
-        :readonly="readonly"
-        :placeholder="placeholder"
-        v-model="model"
-        :id="uniqueId"
-        ref="inputRef"
-        :class="[staticInputClass]"
-        :pattern="pattern"
-        :name
-        :maxlength
-        @blur="(e) => $emit('blur', e)"
-        @focus="(e) => $emit('focus', e)"
-        @paste="(e) => $emit('paste', e)"
-      />
+      <div class="flex flex-col space-around min-w-0">
+        <span v-if="!showNormalPlaceholder" class="text-xs text-gray-300 grow-0 overflow-hidden text-ellipsis whitespace-nowrap">{{ placeholder }}</span>
+        <input
+          :type="type"
+          :required="required ? required : false"
+          :disabled="disabled"
+          :readonly="readonly"
+          :placeholder="showNormalPlaceholder ? placeholder : ''"
+          v-model="model"
+          :id="uniqueId"
+          ref="inputRef"
+          :class="[staticInputClass, computedInputClass]"
+          :pattern="pattern"
+          :name
+          :maxlength
+          @blur="(e) => $emit('blur', e)"
+          @focus="(e) => $emit('focus', e)"
+          @paste="(e) => $emit('paste', e)"
+        />
+      </div>
       <slot name="right-icon">
         <FzIcon
           v-if="valid"
@@ -49,13 +52,22 @@
           class="text-semantic-success"
         />
         <FzIcon
-          v-if="rightIcon"
+          v-if="rightIcon && !rightIconButton"
           :name="rightIcon"
           :size="size"
           :variant="rightIconVariant"
           @click.stop="emit('fzinput:right-icon-click')"
           :class="rightIconClass"
         />
+        <FzIconButton
+          v-if="rightIcon && rightIconButton"
+          :iconName="rightIcon"
+          :size="mappedSize"
+          :iconVariant="rightIconVariant"
+          :variant="disabled ? 'invisible' : rightIconButtonVariant"
+          @click.stop="emit('fzinput:right-icon-click')"
+          :class="[{'bg-grey-100 !text-gray-300': disabled}, rightIconClass]"
+        />
       </slot>
     </div>
     <div
@@ -83,15 +95,18 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from "vue";
+import { computed, toRefs, Ref, ref } from "vue";
 import { FzInputProps } from "./types";
 import { FzIcon } from "@fiscozen/icons";
+import { FzIconButton } from "@fiscozen/button";
 import useInputStyle from "./useInputStyle";
 
 const props = withDefaults(defineProps<FzInputProps>(), {
   size: "md",
   error: false,
   type: "text",
+  rightIconButtonVariant: 'invisible',
+  variant: 'normal'
 });
 
 const model = defineModel();
@@ -104,10 +119,24 @@ const {
   computedContainerClass,
   computedLabelClass,
   staticInputClass,
+  computedInputClass,
   computedHelpClass,
   computedErrorClass,
   containerWidth,
-} = useInputStyle(props, containerRef);
+  showNormalPlaceholder
+} = useInputStyle(toRefs(props), containerRef, model);
+
+
+const sizeMap = {
+  xl: 'lg',
+  lg: 'md',
+  md: 'sm',
+  sm: 'xs',
+}
+
+const mappedSize = computed(() => {
+  return sizeMap[props.size];
+});
 
 const emit = defineEmits([
   "input",

package/src/types.ts

@@ -1,4 +1,5 @@
-import { IconVariant } from "@fiscozen/icons";
+import { IconButtonVariant } from "@fiscozen/button";
+import { IconSize , IconVariant } from "@fiscozen/icons";
 
 type FzInputProps = {
   /**
@@ -13,6 +14,10 @@ type FzInputProps = {
    * The placeholder displayed in the input
    */
   placeholder?: string;
+  /**
+   * Secondary - floating like placeholder
+   */
+  secondaryPlaceholder?: string;
   /**
    * If set to true, the input is required
    */
@@ -33,14 +38,30 @@ type FzInputProps = {
    * Left icon variant
    */
   leftIconVariant?: IconVariant;
+  /**
+   * Left icon button variant
+   */
+  leftIconButtonVariant?: IconButtonVariant;
   /**
    * Right icon name
    */
   rightIcon?: string;
+  /**
+   * Right icon name
+   */
+  rightIconSize?: IconSize;
   /**
    * Right icon variant
    */
   rightIconVariant?: IconVariant;
+  /**
+   * Right icon button vs normal icon
+   */
+  rightIconButton?: boolean;
+  /**
+   * Right icon button variant
+   */
+  rightIconButtonVariant?: IconButtonVariant;
   /**
    * The input type
    */
@@ -49,6 +70,10 @@ type FzInputProps = {
    * If set to true, the input is valid
    */
   valid?: boolean;
+  /**
+   * Input variant
+   */
+  variant?: 'normal' | 'floating-label';
   /**
    * Pattern to validate the input
    */

package/src/useInputStyle.ts

@@ -1,9 +1,10 @@
-import { computed, Ref } from "vue";
+import { computed, ToRefs, Ref } from "vue";
 import { FzInputProps } from "./types";
 
 export default function useInputStyle(
-  props: FzInputProps,
+  props: ToRefs<FzInputProps>,
   container: Ref<HTMLElement | null>,
+  model: Ref<string>
 ) {
   const containerWidth = computed(() =>
     container.value ? `${container.value.clientWidth}px` : "auto",
@@ -15,37 +16,53 @@ export default function useInputStyle(
     lg: "h-40 text-lg",
   };
 
-  const staticContainerClass = `flex justify-between w-full items-center px-10 border-1 rounded gap-8 text-left has-[:focus]:border-blue-600`;
+  const staticContainerClass = `flex justify-between w-full items-center px-10 border-1 rounded gap-8 text-left has-[:focus]:border-blue-600 relative`;
 
   const computedContainerClass = computed(() => [
-    mapContainerClass[props.size!],
+    props.variant?.value === 'normal' ? mapContainerClass[props.size?.value!] : 'h-40 pr-6',
     evaluateProps(),
   ]);
 
   const computedLabelClass = computed(() => [
-    props.disabled ? "text-grey-300" : "text-core-black",
+    props.disabled?.value ? "text-grey-300" : "text-core-black",
   ]);
 
   const staticInputClass = `peer w-full bg-transparent border-0 focus:outline-none cursor-[inherit] focus:ring-0 truncate`;
 
+  const textSizeMap = {
+    xl: 'text-lg',
+    lg: 'text-base',
+    md: 'text-sm',
+    sm: 'text-xs'
+  }
+
+  const showNormalPlaceholder = computed(() => {
+    return !(props.variant?.value === 'floating-label') ||
+    ((props.variant?.value === 'floating-label') && !model.value)
+  });
+
+  const computedInputClass = computed(() => [
+    props.variant?.value === 'floating-label' ? textSizeMap[props.size?.value] : '',
+  ]);
+
   const computedHelpClass = computed(() => [
-    props.size === "sm" ? "text-xs" : "",
-    props.size === "md" ? "text-sm" : "",
-    props.size === "lg" ? "text-base" : "",
-    props.disabled ? "text-grey-300" : "text-grey-500",
+    props.size?.value === "sm" ? "text-xs" : "",
+    props.size?.value === "md" ? "text-sm" : "",
+    props.size?.value === "lg" ? "text-base" : "",
+    props.disabled?.value ? "text-grey-300" : "text-grey-500",
   ]);
   const computedErrorClass = computed(() => [
-    props.size === "sm" ? "text-xs" : "",
-    props.size === "md" ? "text-sm" : "",
-    props.size === "lg" ? "text-base" : "",
-    props.disabled ? "text-grey-300" : "text-core-black",
+    props.size?.value === "sm" ? "text-xs" : "",
+    props.size?.value === "md" ? "text-sm" : "",
+    props.size?.value === "lg" ? "text-base" : "",
+    props.disabled?.value ? "text-grey-300" : "text-core-black",
   ]);
 
   const evaluateProps = () => {
     switch (true) {
-      case props.disabled:
+      case props.disabled?.value:
         return "bg-grey-100 border-grey-100 text-grey-300 cursor-not-allowed";
-      case props.error:
+      case props.error?.value:
         return "border-semantic-error bg-white text-core-black cursor-text";
       default:
         return "border-grey-300 bg-white text-core-black cursor-text";
@@ -57,8 +74,10 @@ export default function useInputStyle(
     computedContainerClass,
     computedLabelClass,
     staticInputClass,
+    computedInputClass,
     computedHelpClass,
     computedErrorClass,
     containerWidth,
+    showNormalPlaceholder
   };
 }