Merge pull request #50 from selemondev/feat/Tags

feat(app): #49 Tag

packages/windi/src/App.vue

@@ -1,11 +1,11 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
-
-const selected = ref('')
+function handleClose() {
+  alert('Closing')
+}
 </script>
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WSwitch v-model="selected" on-icon="ph:sun" off-icon="ph:moon" class="text-xl" />
+    <WTag value="Success" variant="success-light" closable @close="handleClose" />
   </div>
 </template>

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

@@ -138,6 +138,13 @@ export interface WSwitch extends WComponentRoot {
   switchIconOn?: string
   switchIconOff?: string
 }
+
+export interface WTag extends WComponentRoot {
+  tagSize?: string
+  tagRounded?: string
+  tagCloseIcon?: string
+}
+
 export type WAccordionVariant = WithVariantProps<WAccordion>
 
 export type WAccordionItemVariants = WithVariantProps<WAccordionItem>
@@ -167,3 +174,5 @@ export type WCheckboxVariants = WithVariantProps<WCheckbox>
 export type WDividerVariants = WithVariantProps<WDivider>
 
 export type WSwitchVariants = WithVariantProps<WSwitch>
+
+export type WTagVariants = WithVariantProps<WTag>

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

@@ -14,4 +14,5 @@ export enum Components {
   WKbd = 'WKbd',
   WDivider = 'WDivider',
   WSwitch = 'WSwitch',
+  WTag = 'WTag',
 }

packages/windi/src/components/Tag/WTag.vue

@@ -0,0 +1,84 @@
+<script setup lang='ts'>
+import { computed, defineComponent, ref } from 'vue'
+import { Icon } from '@iconify/vue'
+import classNames from 'classnames'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import { Components } from '../../Types/enums/Components'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
+import type { WTag } from '../../Types/componentsTypes/components'
+import { useVariants } from '../../composables/useVariants'
+import windiTheme from '../../theme/windiTheme'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WTag>(),
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+
+  rounded: {
+    type: String,
+    default: 'md',
+  },
+
+  size: {
+    type: String,
+    default: 'md',
+  },
+
+  dismissLabel: {
+    type: String,
+    default: 'Dismiss',
+  },
+
+  value: {
+    type: String,
+    default: null,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+const isActive = ref(true)
+
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+
+  return useVariants<WTag>(
+    Components.WTag,
+    customProps as VariantJSWithClassesListProps<WTag>,
+  )
+})
+
+const tagWrapperClass = computed(() => {
+  return classNames(
+    variant.value.root,
+    windiTheme.WTag.base.tagRounded[props.rounded],
+    windiTheme.WTag.base.tagSize[props.size],
+  )
+})
+function onDismiss() {
+  emit('close')
+  return isActive.value = false
+}
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: Components.WTag,
+})
+</script>
+
+<template>
+  <div v-if="isActive" :class="tagWrapperClass">
+    <p>{{ props.value }}</p>
+    <p v-if="props.closable">
+      <Icon icon="ph:x-bold" :aria-label="dismissLabel" :class="variant.tagCloseIcon" @click="onDismiss()" />
+    </p>
+  </div>
+</template>

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

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

packages/windi/src/index.ts

@@ -16,6 +16,7 @@ import Input from './components/Input/WInput.vue'
 import Checkbox from './components/Checkbox/WCheckbox.vue'
 import Divider from './components/Divider/WDivider.vue'
 import Switch from './components/Switch/WSwitch.vue'
+import Tag from './components/Tag/WTag.vue'
 import windiTheme from './theme/windiTheme'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
@@ -34,6 +35,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   Checkbox,
   Divider,
   Switch,
+  Tag,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -59,3 +61,4 @@ export { default as Input } from './components/Input'
 export { default as Checkbox } from './components/Checkbox'
 export { default as Divider } from './components/Divider'
 export { default as Switch } from './components/Switch'
+export { default as Tag } from './components/Tag'

packages/windi/src/theme/windiTheme.ts

@@ -685,6 +685,127 @@ export default {
     },
   },
 
+  WTag: {
+    base: {
+      root: 'flex justify-between items-center text-xs px-2 space-x-3 cursor-pointer py-1 text-white',
+      tagCloseIcon: 'w-3 h-3 rounded-md block transition duration-200 ease-in',
+      tagRounded: {
+        'xs': 'rounded-xs',
+        'sm': 'rounded-sm',
+        'md': 'rounded-md',
+        'lg': 'rounded-lg',
+        'xl': 'rounded-xl',
+        '2xl': 'rounded-2xl',
+        'full': 'rounded-full',
+      },
+      tagSize: {
+        'xs': 'text-xs',
+        'sm': 'text-sm',
+        'md': 'text-sm',
+        'lg': 'text-sm',
+        'xl': 'text-base',
+        '2xl': 'text-lg',
+      },
+    },
+    variants: {
+      'default': {
+        root: 'bg-yellow-500 text-white',
+      },
+      'default-light': {
+        root: [
+          'border border-yellow-500 bg-yellow-100 text-yellow-800 duration-200 ease-in',
+        ],
+      },
+      'default-dashed': {
+        root: [
+          'border border-dashed border-yellow-500 text-yellow-800 duration-200 ease-in',
+        ],
+      },
+      'default-outline': {
+        root: [
+          'border border-yellow-500 text-yellow-800 duration-200 ease-in',
+        ],
+      },
+      'primary': {
+        root: 'bg-blue-500 text-white',
+      },
+      'primary-light': {
+        root: [
+          'border border-blue-500 bg-blue-100 text-blue-800 duration-200 ease-in',
+        ],
+      },
+
+      'primary-outline': {
+        root: [
+          'border border-blue-500 text-blue-800 duration-200 ease-in',
+        ],
+      },
+
+      'primary-dashed': {
+        root: [
+          'border border-dashed border-blue-500 text-blue-800 duration-200 ease-in',
+        ],
+      },
+      'success': {
+        root: 'bg-green-500 text-white',
+      },
+
+      'success-light': {
+        root: [
+          'border border-green-500 bg-green-100 text-green-800 duration-200 ease-in',
+        ],
+      },
+
+      'success-outline': {
+        root: [
+          'border border-green-500 text-green-800 duration-200 ease-in',
+        ],
+      },
+
+      'success-dashed': {
+        root: [
+          'border border-dashed border-green-500 text-green-800 duration-200 ease-in',
+        ],
+      },
+      'warning': {
+        root: 'bg-orange-500 text-white',
+      },
+      'warning-light': {
+        root: [
+          'border border-orange-500 bg-orange-100 text-orange-800 duration-200 ease-in',
+        ],
+      },
+      'warning-outline': {
+        root: [
+          'border border-orange-500 text-orange-800 duration-200 ease-in',
+        ],
+      },
+      'warning-dashed': {
+        root: [
+          'border border-dashed border-orange-500 text-orange-800 duration-200 ease-in',
+        ],
+      },
+      'danger': {
+        root: 'bg-red-500 text-white',
+      },
+      'danger-light': {
+        root: [
+          'border border-red-500 bg-red-100 text-red-800 duration-200 ease-in',
+        ],
+      },
+      'danger-outline': {
+        root: [
+          'border border-red-500 text-red-800 duration-200 ease-in',
+        ],
+      },
+      'danger-dashed': {
+        root: [
+          'border border-dashed border-red-500 text-red-800 duration-200 ease-in',
+        ],
+      },
+    },
+  },
+
   transitions: {
     scale: {
       'enter-active-class': 'duration-200 ease-[cubic-bezier(0.175,0.885,0.32,1.475)]',