Merge pull request #33 from StaticMania/new-component

Update: Update old component, Doc for component and add Select and InputOTP component.

Author: kausarpial

CHANGELOG.md

@@ -0,0 +1,42 @@
+## Changelog
+
+All notable changes to this project will be documented in this file.
+
+### v1.1.0
+
+We are thrilled to announce the initial release of Keep vue, our open-source component library built on Vue and Tailwind CSS. This release marks the beginning of our journey in providing a collection of pre-designed UI components to simplify web application development.
+
+### Key Features
+
+- **Basic Components**: Our library includes a set of essential UI components, such as buttons, modals, alerts, and more.
+
+- **Seamless Integration**: Keep Vue is designed to seamlessly integrate with your React projects. Just install the library and start using the components.
+
+- **Tailwind CSS Integration**: Our components come with Tailwind CSS styles, making it easy to maintain and customize the look and feel of your app.
+
+### v1.1.0 (2025-02-05)
+
+### Features
+
+- **`<AvatarFallback>`** component added to the Avatar component.
+- **Button Component:** New variants added - `default` and `softBg`.
+- **Checkbox Component:** API documentation updated.
+- **`<CarouselDotButton>`** component API added.
+- **Drawer Component:** API updated.
+- **Dropdown Component:** Added three new variants:
+  - **Dropdown Submenu**
+  - **Dropdown with Radio**
+  - **Dropdown with Checkbox**
+- **Renamed:** `<DropdownList>` is now `<DropdownAction>`.
+- **Dropdown Component:** API documentation updated.
+- **Input Component:** API documentation updated.
+- **New Component:** `<InputOTP>` added.
+- **Radio Component:** API updated.
+- **New Component:** `<Select>` added.
+
+---
+
+### Bug Fixes
+
+- **Switch Component:** Fixed prop suggestion issues.
+- **Input Component:** Resolved issue with capturing input values.

Routes/routes.ts

@@ -133,6 +133,13 @@ export const docsRoutes = ref<RouterPath[]>([
     tag: false,
     deprecate: false,
   },
+  {
+    id: generatedID.v4(),
+    name: "Input OTP",
+    href: "/docs/components/input-otp",
+    tag: false,
+    deprecate: false,
+  },
   {
     id: generatedID.v4(),
     name: "Modal",
@@ -193,6 +200,13 @@ export const docsRoutes = ref<RouterPath[]>([
     tag: false,
     deprecate: false,
   },
+  {
+    id: generatedID.v4(),
+    name: "Select",
+    href: "/docs/components/select",
+    tag: false,
+    deprecate: false,
+  },
 
   {
     id: generatedID.v4(),

components/Command/CommandInput.vue

@@ -14,13 +14,13 @@ defineOptions({
 
 const props = defineProps<ComboboxInputProps & ClassProps>();
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+const restProps = computed(() => {
+  const { class: _, ...rest } = props;
 
-  return delegated;
+  return rest;
 });
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(restProps);
 </script>
 
 <template>
@@ -36,7 +36,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       height="32"
       viewBox="0 0 256 256">
       <path
-        d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
+        d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" />
     </svg>
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"

components/HeaderComponent.vue

@@ -4,11 +4,11 @@ import { docsRoutes, gettingStaredRoutes, navbarRoutes } from "~/Routes/routes";
 import {
   buttonVariants,
   Drawer,
+  DrawerAction,
   DrawerClose,
   DrawerContent,
   DrawerDescription,
   DrawerTitle,
-  DrawerTrigger,
 } from "~/src";
 import { cn } from "~/src/utils/cn";
 import SearchBar from "./SearchBar.vue";
@@ -113,7 +113,7 @@ const isActive = (str: string): boolean => {
 
           <!-- mobile drawer  -->
           <Drawer v-model:open="active" position="right">
-            <DrawerTrigger as-child>
+            <DrawerAction as-child>
               <button
                 class="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 laptop:hidden dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900"
                 @click="() => (active = true)">
@@ -129,7 +129,7 @@ const isActive = (str: string): boolean => {
                     class="text-metal-900 dark:text-white" />
                 </span>
               </button>
-            </DrawerTrigger>
+            </DrawerAction>
 
             <DrawerContent
               class="w-full overflow-y-auto overflow-x-hidden sm:w-1/2 lg:hidden dark:border-metal-900 dark:bg-metal-900">

components/content/ComponentApiTable.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-interface ComponentApiProps {
+export interface ComponentApiProps {
   id: number;
   propsName: string;
   propsDescription: string;

components/content/docs/components/button/ButtonApi.vue

@@ -10,23 +10,23 @@ const buttonApiData = ref([
   {
     id: 2,
     propsName: "variant",
-    propsType: ["link", "outline"],
+    propsType: ["default", "link", "outline", "softBg"],
     propsDescription: "Variant of the button.",
-    default: "outline",
+    default: "default",
   },
   {
     id: 3,
     propsName: "shape",
     propsType: ["circle", "icon"],
     propsDescription: "Apply circular styling to the button.",
-    default: "circle",
+    default: "",
   },
   {
     id: 4,
     propsName: "position",
     propsType: ["start", "end", "center"],
     propsDescription: "Position of the button within a button group.",
-    default: "start",
+    default: "",
   },
   {
     id: 5,

components/content/docs/components/button/buttonCode.ts

@@ -15,6 +15,15 @@ import { Button } from "keep-vue";
 </template>`,
 };
 
+const buttonSoftBgVariantCode = {
+  "ButtonComponent.vue": `<script setup>
+import { Button } from "keep-vue";
+</script>
+<template>
+    <Button color="primary" variant="softBg">Click here</Button>
+</template>`,
+};
+
 const buttonColorVariantCode = {
   "ButtonComponent.vue": `<script setup>
 import { Button } from "keep-vue";
@@ -119,13 +128,14 @@ import { Button } from "keep-vue";
 };
 
 export {
-  ButtonWithLeftSideIcon,
-  ButtonWithRightSideIcon,
   buttonColorVariantCode,
   buttonLinkVariantCode,
   buttonOutlineVariantCode,
   buttonPrimaryCode,
   buttonRadiusVariantCode,
   buttonShapeVariantCode,
   buttonSizeVariantCode,
+  buttonSoftBgVariantCode,
+  ButtonWithLeftSideIcon,
+  ButtonWithRightSideIcon,
 };

components/content/docs/components/button/variant/ButtonSoftBgVariant.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPreview.vue";
+import { Button } from "~/src";
+import { buttonSoftBgVariantCode } from "../buttonCode";
+</script>
+<template>
+  <CodeHighlightWithPreview :code="buttonSoftBgVariantCode">
+    <div
+      class="flex h-32 flex-wrap items-center justify-center gap-2 gap-y-4 p-4">
+      <Button color="primary" variant="softBg">Click here</Button>
+    </div>
+  </CodeHighlightWithPreview>
+</template>

components/content/docs/components/carousel/CarouselApi.vue

@@ -7,21 +7,18 @@ const carouselDataApi = [
     propsName: "options",
     propsType: "EmblaOptionsType",
     propsDescription: "Embla carousel options.",
-    default: "{}",
   },
   {
     id: 2,
     propsName: "plugins",
     propsType: "EmblaPluginType[]",
     propsDescription: "Embla carousel plugins for adding more variants.",
-    default: "",
   },
   {
     id: 3,
-    propsName: "carouselViewportClasses",
+    propsName: "view-port-class",
     propsType: "String",
     propsDescription: "Customize the viewport of the carousel container",
-    default: `''`,
   },
 ];
 </script>

components/content/docs/components/carousel/CarouselIndicatorsApi.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import ComponentApiTable from "~/components/content/ComponentApiTable.vue";
+
+const carouselIndicatorsApi = [
+  {
+    id: 1,
+    propsName: " dot-button-style",
+    propsType: "string",
+    propsDescription:
+      "Add your own class to style the dot button. Use data-[active=true] and data-[active=false] to apply specific styles to the dot buttons.",
+  },
+];
+</script>
+
+<template>
+  <ComponentApiTable :data="carouselIndicatorsApi" />
+</template>