@indielayer/ui 1.0.0-alpha.3 → 1.0.0-alpha.7

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'
 
@@ -9,21 +10,27 @@ import { useResizeObserver, useThrottleFn } from '@vueuse/core'
 import XScroll from '../../components/scroll/Scroll.vue'
 
 export default defineComponent({
-  name: 'XTabs',
+  name: 'XTabGroup',
 
   components: {
     XScroll,
   },
 
   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/create.ts

@@ -1,11 +1,12 @@
 import type { App } from 'vue'
 import type { ColorLibrary } from './composables/colors'
-import { injectColorsKey } from './composables/keys'
+import { injectColorsKey, injectIconsKey } from './composables/keys'
 
 export interface IndielayerUIOptions {
   prefix?: string,
   components?: any,
-  colors?: ColorLibrary
+  colors?: ColorLibrary,
+  icons?: any
 }
 
 const defaultOptions: IndielayerUIOptions = {
@@ -26,6 +27,7 @@ const create = (createOptions: IndielayerUIOptions = {}) => {
       })
 
     app.provide(injectColorsKey, options.colors)
+    app.provide(injectIconsKey, options.icons)
   }
 
   return {

package/src/version.ts

@@ -1 +1 @@
-export default '1.0.0-alpha.3'
+export default '1.0.0-alpha.7'

package/volar.d.ts

@@ -40,7 +40,7 @@ declare module 'vue' {
     XTableHeader: typeof import('@indielayer/ui')['XTableHeader']
     XTableRow: typeof import('@indielayer/ui')['XTableRow']
     XTab: typeof import('@indielayer/ui')['XTab']
-    XTabs: typeof import('@indielayer/ui')['XTabs']
+    XTabGroup: typeof import('@indielayer/ui')['XTabGroup']
     XTag: typeof import('@indielayer/ui')['XTag']
     XTextarea: typeof import('@indielayer/ui')['XTextarea']
     XToggle: typeof import('@indielayer/ui')['XToggle']