Merge pull request #47 from selemondev/feat/Divider

feat(app): #46 Divider

packages/windi/src/App.vue

@@ -3,6 +3,6 @@
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WAvatar src="https://github.com/selemondev.png" chip-text="Online" chip-color="green" name="Selemon" initials="SB" chip-position="top-right" size="xl" />
+    <WButton variant="default-light" disabled label="Button" />
   </div>
 </template>

packages/windi/src/Types/componentsTypes/components.ts

@@ -120,6 +120,10 @@ export interface WCheckbox extends WComponentRoot {
   checkboxDisplay?: string
   checkboxIconSize?: string
 }
+
+export interface WDivider extends WComponentRoot {
+  dividerVertical?: string
+}
 export type WAccordionVariant = WithVariantProps<WAccordion>
 
 export type WAccordionItemVariants = WithVariantProps<WAccordionItem>
@@ -145,3 +149,5 @@ export type WKbdVariants = WithVariantProps<WKbd>
 export type WInputVariants = WithVariantProps<WInput>
 
 export type WCheckboxVariants = WithVariantProps<WCheckbox>
+
+export type WDividerVariants = WithVariantProps<WDivider>

packages/windi/src/Types/enums/Components.ts

@@ -12,4 +12,5 @@ export enum Components {
   WInput = 'WInput',
   WCheckbox = 'WCheckbox',
   WKbd = 'WKbd',
+  WDivider = 'WDivider',
 }

packages/windi/src/Types/variant.ts

@@ -1,5 +1,5 @@
 import type { Components } from './enums/Components'
-import type { WAccordionItemVariants, WAccordionVariants, WAlertVariants, WAvatarGroup, WAvatarVariants, WBadgeVariants, WButtonGroupVariants, WButtonVariants, WIconVariants, WInputVariants, WKbdVariants } from './componentsTypes/components'
+import type { WAccordionItemVariants, WAccordionVariants, WAlertVariants, WAvatarGroup, WAvatarVariants, WBadgeVariants, WButtonGroupVariants, WButtonVariants, WDividerVariants, WIconVariants, WInputVariants, WKbdVariants } from './componentsTypes/components'
 
 export declare interface CSSClassKeyValuePair {
   [key: string]: any
@@ -41,4 +41,5 @@ export interface WindiUIConfiguration {
   [Components.WButtonGroup]?: WButtonGroupVariants
   [Components.WKbd]?: WKbdVariants
   [Components.WInput]?: WInputVariants
+  [Components.WDivider]?: WDividerVariants
 }

packages/windi/src/components/Button/WButton.vue

@@ -152,6 +152,7 @@ export default defineComponent({
 </script>
 
 <template>
+  {{ variant }}
   <component :is="props.to ? 'a' : 'button'" :disabled="disabled" :class="buttonWrapperClass" v-bind="bind">
     <slot name="leading" :disabled="disabled" :loading="props.loading">
       <Icon v-if="isLeading && leadingIcon" :icon="leadingIcon" :style="iconSizeStyle" />

packages/windi/src/components/Divider/WDivider.vue

@@ -0,0 +1,36 @@
+<script setup lang='ts'>
+import { computed, defineComponent } from 'vue'
+import classNames from 'classnames'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import { useVariants } from '../../composables/useVariants'
+import type { WDivider } from '../../Types/componentsTypes/components'
+import { Components } from '../../Types/enums/Components'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WDivider>(),
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const variant = computed(() => {
+  return useVariants<WDivider>(Components.WDivider, props)
+})
+
+const isVertical = computed(() => {
+  return classNames(
+    props.vertical && variant.value.dividerVertical,
+  )
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: Components.WDivider,
+})
+</script>
+
+<template>
+  <div :class="[variant.root, isVertical]" role="separator" />
+</template>

packages/windi/src/components/Divider/index.ts

@@ -0,0 +1,5 @@
+import Divider from './WDivider.vue'
+
+export default {
+  Divider,
+}

packages/windi/src/index.ts

@@ -14,6 +14,7 @@ import AccordionItem from './components/Accordion/WAccordionItem.vue'
 import Kbd from './components/Kbd/WKbd.vue'
 import Input from './components/Input/WInput.vue'
 import Checkbox from './components/Checkbox/WCheckbox.vue'
+import Divider from './components/Divider/WDivider.vue'
 import windiTheme from './theme/windiTheme'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
@@ -30,6 +31,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   Kbd,
   Input,
   Checkbox,
+  Divider,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -53,3 +55,4 @@ export { default as AccordionItem } from './components/Accordion'
 export { default as Kbd } from './components/Kbd'
 export { default as Input } from './components/Input'
 export { default as Checkbox } from './components/Checkbox'
+export { default as Divider } from './components/Divider'

packages/windi/src/theme/windiTheme.ts

@@ -250,6 +250,18 @@ export default {
 
   },
 
+  WDivider: {
+    base: {
+      root: 'w-full h-px',
+      dividerVertical: 'relative !w-px !h-4 !inline-block align-middle -top-0.5',
+    },
+    variants: {
+      default: {
+        root: 'bg-gray-200 dark:bg-zinc-600',
+      },
+    },
+  },
+
   WButton: {
     base: {
       root: 'focus:outline-none text-white block font-medium focus-visible:outline-0 rounded-md disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in',
@@ -288,30 +300,30 @@ export default {
 
     variants: {
       'default': {
-        root: 'bg-yellow-500 not:disabled:hover:bg-yellow-600',
+        root: 'bg-yellow-500 hover:enabled:bg-yellow-600 !disabled:hover:bg-yellow-100',
       },
       'default-outline': {
         root: [
-          'border border-yellow-500 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
+          'border border-yellow-500 text-yellow-800 hover:enabled:bg-yellow-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'default-light': {
         root: [
-          'border border-yellow-500 bg-yellow-100 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
+          'border border-yellow-500 bg-yellow-100 text-yellow-800 hover:enabled:bg-yellow-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'default-dashed': {
         root: [
-          'border border-dashed border-yellow-500 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
+          'border border-dashed border-yellow-500 text-yellow-800 hover:enabled:bg-yellow-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'default-ghost': {
         root: [
-          'text-yellow-500 not:disabled:hover:bg-yellow-100',
+          'text-yellow-500 hover:enabled:bg-yellow-100',
         ],
       },
       'primary': {
-        root: 'bg-blue-500 hover:enabled:bg-red-600 !disabled:hover:bg-blue-100',
+        root: 'bg-blue-500 hover:enabled:bg-blue-600 !disabled:hover:bg-blue-100',
       },
       'primary-light': {
         root: [