@indielayer/ui 1.0.0-alpha.5 → 1.0.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -40,6 +40,18 @@
     "./tailwind.preset.js": "./lib/tailwind.preset.js"
   },
   "sideEffects": false,
+  "scripts": {
+    "dev": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
+    "dev2": "vite build --watch",
+    "build": "pnpm generate && vite build",
+    "build-prod": "pnpm build && pnpm gen-types",
+    "typecheck": "vue-tsc --noEmit",
+    "build-only": "vite build",
+    "generate": "pnpm gen-version",
+    "gen-types": "vue-tsc --declaration --emitDeclarationOnly",
+    "gen-version": "node .scripts/gen-version.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0"
@@ -83,17 +95,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "dev": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
-    "dev2": "vite build --watch",
-    "build": "pnpm generate && vite build",
-    "build-prod": "pnpm build && pnpm gen-types",
-    "typecheck": "vue-tsc --noEmit",
-    "build-only": "vite build",
-    "generate": "pnpm gen-version",
-    "gen-types": "vue-tsc --declaration --emitDeclarationOnly",
-    "gen-version": "node .scripts/gen-version.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}

package/src/components/badge/Badge.vue

@@ -22,6 +22,8 @@ export default defineComponent({
       type: String as PropType<'left' | 'right'>,
       default: 'right',
     },
+    offsetX: [Number, String],
+    offsetY: [Number, String],
     animated: Boolean,
     outlined: Boolean,
     icon: String,
@@ -57,8 +59,18 @@ export default defineComponent({
       return classes
     })
 
+    const offsetStyle = computed(() => {
+      const style: any = {}
+
+      if (props.offsetX) style[props.align === 'left' ? 'marginLeft' : 'marginRight'] = props.offsetX + 'px'
+      if (props.offsetY) style[props.position === 'top' ? 'marginTop' : 'marginBottom'] = props.offsetY + 'px'
+
+      return style
+    })
+
     return {
       styles,
+      offsetStyle,
       positionClasses,
     }
   },
@@ -76,6 +88,7 @@ export default defineComponent({
       <div
         v-if="show"
         class="absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]"
+        :style="offsetStyle"
         :class="[
           positionClasses,
           {

package/src/components/button/Button.vue

@@ -108,8 +108,8 @@ export default defineComponent({
               bg: gray[800],
               text: 'white',
               border: gray[600],
-              hover: { bg: !props.loading ? gray[800] : '' },
-              active: { bg: !props.loading ? gray[700] : '' },
+              hover: { bg: !props.loading ? gray[700] : '' },
+              active: { bg: !props.loading ? gray[600] : '' },
             },
           }))
         }

package/src/components/checkbox/Checkbox.vue

@@ -38,7 +38,7 @@ export default defineComponent({
 
     watch(() => props.modelValue, (value) => {
       checked.value = !!value
-    })
+    }, { immediate: true })
 
     watch(() => checked.value, (value) => {
       emit('update:modelValue', value)

package/src/components/icon/Icon.vue

@@ -24,7 +24,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const icons: any = inject(injectIconsKey, {})
+    const icons: any = inject(injectIconsKey, () => {}, false)
     const sizeClasses = computed(() => {
       if (props.size === 'xs') return 'h-3 w-3'
       else if (props.size === 'sm') return 'h-4 w-4'
@@ -70,21 +70,21 @@ export default defineComponent({
     })
 
     function getSVG(svgString: string) {
-      const temp = document.createElement('template')
+      svgString = svgString.trim()
+      const content = svgString.substring(svgString.indexOf('>') + 1, svgString.lastIndexOf('</svg>'))
+      const attrsRaw = svgString.substring(svgString.indexOf('<svg') + 4, svgString.indexOf('>')).trim().match(/[\w-]+="[^"]*"/g)
 
-      temp.innerHTML = svgString.trim()
-
-      const [svg] = temp.content.children
-      const names = svg.getAttributeNames()
       const attributes: Record<string, string | null> = {}
 
-      names.forEach((n) => {
-        if (!['height', 'width', 'class'].includes(n)) attributes[n] = svg.getAttribute(n)
+      attrsRaw?.forEach((a) => {
+        const [attribute, value] = a.split('=')
+
+        if (!['height', 'width', 'class'].includes(attribute)) attributes[attribute] = value.replace(/(^"|"$)/g, '')
       })
 
       return {
         attributes,
-        content: svg.innerHTML,
+        content,
       }
     }
 

package/src/components/input/Input.vue

@@ -39,6 +39,7 @@ export default defineComponent({
       default: 'text',
     },
     inputClass: String,
+    block: Boolean,
   },
 
   emits: useInputtable.emits(),
@@ -112,7 +113,7 @@ export default defineComponent({
 <template>
   <label
     class="inline-block relative align-bottom text-left"
-    :class="{ 'mb-3': isInsideForm }"
+    :class="{ 'mb-3': isInsideForm, 'w-full': block }"
   >
     <p
       v-if="label"
@@ -157,7 +158,7 @@ export default defineComponent({
         :placeholder="placeholder"
         :readonly="readonly"
         :type="currentType"
-        :value="modelValue"
+        :value="modelValue || ''"
         v-bind="$attrs"
         v-on="inputListeners"
         @change="onChange"

package/src/components/link/Link.vue

@@ -51,7 +51,7 @@ export default defineComponent({
   <component
     :is="to ? 'router-link' : tag"
     :to="to"
-    class="transition duration-300 ease-in-out cursor-pointer
+    class="transition duration-300 ease-in-out cursor-pointer inline-flex
       text-[color:var(--x-text)]
       dark:text-[color:var(--x-dark-text)]
     "

package/src/components/menu/Menu.vue

@@ -27,8 +27,14 @@ export default defineComponent({
     collapseIcon: String,
     expanded: Boolean,
     disabled: Boolean,
-    rounded: Boolean,
-    filled: Boolean,
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    filled: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ['expand'],

package/src/components/menu/MenuItem.vue

@@ -34,8 +34,14 @@ export default defineComponent({
     icon: String,
     iconRight: String,
     loading: Boolean,
-    rounded: Boolean,
-    filled: Boolean,
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    filled: {
+      type: Boolean,
+      default: true,
+    },
     selected: Boolean,
     disabled: Boolean,
   },
@@ -72,6 +78,13 @@ export default defineComponent({
     })
 
     function onItemClick(e: Event) {
+      if (cItem.value.disabled) {
+        e.stopPropagation()
+        e.preventDefault()
+
+        return
+      }
+
       cItem.value.onClick && cItem.value.onClick(e)
       emit('click', e)
     }
@@ -100,7 +113,12 @@ export default defineComponent({
       const color = colors.getPalette(cItem.value.color || 'gray')
       const gray = colors.getPalette('gray')
 
-      if (cItem.value.disabled) return css.get('text', gray[300])
+      if (cItem.value.disabled) return css.variables({
+        text: gray[300],
+        dark: {
+          text: gray[600],
+        },
+      })
 
       if (filled.value) {
         if (isActive.value) {
@@ -193,7 +211,7 @@ export default defineComponent({
     :href="cItem.href"
     :target="cItem.target"
     :color="cItem.color"
-    class="relative flex items-center whitespace-nowrap px-3 mt-1"
+    class="relative !flex items-center whitespace-nowrap px-3 mt-1"
     :style="cssVariables"
     :class="[
       $style['menu-item'],

package/src/components/modal/Modal.vue

@@ -4,12 +4,14 @@ import { computed, defineComponent, ref, watch, type PropType } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 
 import XScroll from '../../components/scroll/Scroll.vue'
+import XIcon from '../icon/Icon.vue'
 
 export default defineComponent({
   name: 'XModal',
 
   components: {
     XScroll,
+    XIcon,
   },
 
   props: {
@@ -144,7 +146,7 @@ export default defineComponent({
         >
           <div
             v-if="showClose"
-            class="absolute p-1 top-4 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer"
+            class="flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer"
             :class="[
               $slots.image ? 'bg-gray-900 text-white' : 'bg-gray-500 text-gray-800 dark:text-gray-300'
             ]"

package/src/components/radio/Radio.vue

@@ -131,10 +131,11 @@ export default defineComponent({
 <template>
   <label
     ref="elRef"
-    class="inline-block mb-1 relative cursor-pointer focus:outline-none"
+    tabindex="0"
+    class="inline-block mb-1 relative cursor-pointer focus:outline-none group"
     :aria-selected="selected ? 'true' : 'false'"
     :aria-disabled="(disabled || loading) ? 'true' : undefined"
-    tabindex="0"
+    :style="styles"
     @keypress.prevent.stop.space="$emit('update:modelValue', value)"
   >
     <div
@@ -150,13 +151,12 @@ export default defineComponent({
         class="invisible absolute"
       />
       <div
-        class="rounded-full flex justify-center items-center flex-shrink-0 border-2
+        class="rounded-full flex justify-center items-center flex-shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline
           border-[color:var(--x-border)]
           bg-[color:var(--x-bg)]
           dark:border-[color:var(--x-dark-border)]
           dark:bg-[color:var(--x-dark-bg)]
         "
-        :style="styles"
         :class="[
           [glow && !disabled && !loading ? $style['radio--glow'] : ''],
           {

package/src/components/scroll/Scroll.vue

@@ -25,7 +25,7 @@ export default defineComponent({
 
     if (props.horizontal && props.mousewheel)
       useEventListener(scrollEl, 'wheel', (e: WheelEvent) => {
-        if (!scrollEl.value) return
+        if (!scrollEl.value || scrollEl.value.scrollWidth <= scrollEl.value.clientWidth) return
 
         e.preventDefault()
         scrollEl.value.scrollLeft += e.deltaY + e.deltaX

package/src/components/tab/Tab.vue

@@ -1,16 +1,22 @@
 <script lang="ts">
-import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted } from 'vue'
+import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted, onBeforeUnmount } from 'vue'
 import { injectTabKey } from '../../composables/keys'
 import { useCommon } from '../../composables/common'
+import XIcon from '../icon/Icon.vue'
+import XLink from '../link/Link.vue'
 
 export default defineComponent({
   name: 'XTab',
 
+  components: {
+    XIcon,
+    XLink,
+  },
+
   props: {
     ...useCommon.props(),
     value: {
       type: [String, Number],
-      required: true,
     },
     tag: {
       type: String,
@@ -20,11 +26,14 @@ export default defineComponent({
     label: String,
     icon: String,
     disabled: Boolean,
+    exact: Boolean,
   },
 
   setup(props) {
+    const cValue = computed(() => props.to || props.value )
     const cLabel = computed(() => props.label || props.value)
     const teleportTo = ref(null)
+    const elRef = ref()
 
     const tabs = inject(injectTabKey, {
       tabsContentRef: ref(null),
@@ -36,24 +45,62 @@ export default defineComponent({
       }),
     })
 
+    const isSupported = window && 'MutationObserver' in window
+    const mutationObserver = isSupported ? new MutationObserver(check) : null
+
+    const cExact = computed(() => tabs.state.exact || props.exact)
+    const cSize = computed(() => props.size || tabs.state.size)
+
     onMounted(() => {
       teleportTo.value = tabs.tabsContentRef.value
+
+      if (props.to) check()
+
+      if (isSupported && props.to) mutationObserver?.observe(elRef.value.$el, {
+        attributes: true,
+        attributeFilter: ['class'],
+      })
+    })
+
+    onBeforeUnmount(() => {
+      if (mutationObserver) mutationObserver.disconnect()
     })
 
+    function check() {
+      if (elRef.value && elRef.value.$el && (props.to)) {
+        const active = elRef.value?.$el.classList.contains(cExact.value ? 'router-link-exact-active' : 'router-link-active')
+
+        if (active) tabs.activateTab(cValue.value)
+      }
+    }
+
     const state = reactive({
-      selected: computed(() => tabs.state.active === props.value),
+      selected: computed(() => tabs.state.active === cValue.value),
     })
 
     function onClickTab() {
-      tabs.activateTab(props.value)
+      if (!props.to) tabs.activateTab(cValue.value)
     }
 
+    const sizeClasses = computed(() => {
+      if (cSize.value === 'xs') return 'text-xs'
+      else if (cSize.value === 'sm') return 'text-sm'
+      else if (cSize.value === 'lg') return 'text-lg'
+      else if (cSize.value === 'xl') return 'text-xl'
+
+      return ''
+    })
+
     return {
       ...toRefs(state),
       variant: tabs.state.variant,
       grow: tabs.state.grow,
+      elRef,
       cLabel,
+      cValue,
+      cSize,
       tabs,
+      sizeClasses,
       teleportTo,
       onClickTab,
     }
@@ -62,12 +109,14 @@ export default defineComponent({
 </script>
 
 <template>
-  <li :data-value="value" class="shrink-0 font-medium" :class="{ 'flex-1': grow }">
+  <li :data-value="cValue" class="shrink-0 font-medium" :class="{ 'flex-1': grow }">
     <component
-      :is="to ? 'router-link' : tag"
+      :is="to ? 'x-link' : tag"
+      ref="elRef"
       :to="to"
       class="py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center"
       :class="[
+        sizeClasses,
         {
           'px-8': variant === 'block',
           'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-dark-tabs-text)]': selected,
@@ -84,11 +133,11 @@ export default defineComponent({
         name="tab"
         :label="label"
         :value="value"
-        :size="size"
+        :size="cSize"
         :icon="icon"
       >
         <div class="flex items-center justify-center">
-          <x-icon v-if="icon" :icon="icon" :size="size" class="mr-1.5 shrink-0" />
+          <XIcon v-if="icon" :icon="icon" :size="cSize" class="mr-1.5 shrink-0" />
           <span>{{ cLabel }}</span>
         </div>
       </slot>

package/src/components/tab/TabGroup.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-import { defineComponent, reactive, computed, provide, type PropType, ref, watch, onMounted } from 'vue'
+import { defineComponent, reactive, computed, provide, type PropType, ref, watch, onMounted, watchEffect } from 'vue'
 import { injectTabKey } from '../../composables/keys'
+import { useCommon } from '../../composables/common'
 import { useCSS } from '../../composables/css'
 import { useColors } from '../../composables/colors'
 
@@ -16,14 +17,20 @@ export default defineComponent({
   },
 
   props: {
+    ...useCommon.props(),
     ...useColors.props('primary'),
     modelValue: [String, Number],
     variant: {
       type: String as PropType<'line' | 'block'>,
       default: 'line',
     },
+    align: {
+      type: String as PropType<'left' | 'center' | 'right'>,
+      default: 'left',
+    },
     ghost: Boolean,
     grow: Boolean,
+    exact: Boolean,
   },
 
   emits: ['update:modelValue'],
@@ -35,14 +42,23 @@ export default defineComponent({
     const tabsRef = ref<HTMLElement>()
     const tabsContentRef = ref<HTMLElement>()
 
+    const active = ref()
+
+    watchEffect(() => {
+      active.value = props.modelValue
+    })
+
     const state = reactive({
-      active: computed(() => props.modelValue),
+      active: computed(() => active.value),
       variant: computed(() => props.variant),
       ghost: computed(() => props.ghost),
       grow: computed(() => props.grow),
+      exact: computed(() => props.exact),
+      size: computed(() => props.size),
     })
 
     function activateTab(tab: string | number) {
+      active.value = tab
       emit('update:modelValue', tab)
     }
 
@@ -70,14 +86,14 @@ export default defineComponent({
       if (scrollRef.value.scrollEl) scrollRef.value.scrollEl.scrollTo({ left: center, behavior: 'smooth' })
     }, 100)
 
-    useResizeObserver(wrapperRef, () => { updateTracker(props.modelValue) })
+    useResizeObserver(wrapperRef, () => { updateTracker(active.value) })
 
-    watch(() => props.modelValue, (value) => {
+    watch(() => active.value, (value) => {
       updateTracker(value)
     })
 
     onMounted(() => {
-      updateTracker(props.modelValue)
+      updateTracker(active.value)
     })
 
     const css = useCSS('tabs')
@@ -131,7 +147,9 @@ export default defineComponent({
           :class="{
             'border-b border-gray-200 dark:border-gray-700': variant === 'line',
             'space-x-8': variant === 'line' && !grow,
-            'z-[1]': variant === 'block'
+            'z-[1]': variant === 'block',
+            'justify-center': align === 'center',
+            'justify-end': align === 'right'
           }"
         >
           <slot></slot>

package/src/components/table/Table.vue

@@ -14,6 +14,7 @@ export type Header = {
   align?: Align,
   value: string,
   text: string,
+  width: string | number
 }
 
 export default defineComponent({
@@ -136,6 +137,7 @@ export default defineComponent({
         :text-align="header.align"
         :sort="getSort(header.value, sort)"
         :sortable="header.sortable"
+        :width="header.width"
         @click="header.sortable ? sortHeader(header) : null"
       >
         {{ header.text }}

package/src/components/textarea/Textarea.vue

@@ -23,6 +23,7 @@ export default defineComponent({
       type: String,
       default: 'ltr',
     },
+    rows: Number,
     max: Number,
     maxlength: Number,
     min: Number,
@@ -34,6 +35,7 @@ export default defineComponent({
     },
     preventEnter: Boolean,
     inputClass: String,
+    block: Boolean,
   },
 
   emits: useInputtable.emits(),
@@ -99,7 +101,7 @@ export default defineComponent({
 <template>
   <label
     class="inline-block relative align-bottom text-left"
-    :class="{ 'mb-3': isInsideForm }"
+    :class="{ 'mb-3': isInsideForm, 'w-full': block }"
   >
     <p
       v-if="label"
@@ -140,6 +142,7 @@ export default defineComponent({
       :maxlength="maxlength"
       :min="min"
       :dir="dir"
+      :rows="rows"
       :minlength="minlength"
       :name="name"
       :placeholder="placeholder"

package/src/components/toggle/Toggle.vue

@@ -71,7 +71,7 @@ export default defineComponent({
 
 <template>
   <label
-    class="inline-block mb-1 pb-2"
+    class="inline-block"
     :class="[!disabled ? 'cursor-pointer' : 'cursor-not-allowed']"
   >
     <div class="flex items-center">

package/src/version.ts

@@ -1 +1 @@
-export default '1.0.0-alpha.5'
+export default '1.0.0-alpha.6'

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 - Indielayer
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.