@indielayer/ui 1.7.5 → 1.8.1

package/README.md

@@ -27,7 +27,6 @@ npm init @indielayer/ui@latest
 - Ensure you have the latest LTS version of Node.js installed
 - Install dependencies with `pnpm install`
 - Run `pnpm dev` to enter dev mode watch
-- Develop docs with `pnpm run docs`
 
 ### Documentation
 

package/docs/components/common/CodePreview.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   expanded: Boolean,
 })
 
-const notifications = useNotifications('notifica')
+const notifications = useNotifications()
 
 const codeRef = ref()
 const expandedSync = ref(props.expanded)

package/docs/components/common/CopyButton.vue

@@ -6,7 +6,7 @@ const props = defineProps({
   text: String,
 })
 
-const notifications = useNotifications('notifica')
+const notifications = useNotifications()
 
 const icon = ref('copy')
 const animation = ref('')

package/docs/components/toolbar/ToolbarColorToggle.vue

@@ -8,10 +8,10 @@ try {
 
   if (storedMode) {
     colorMode.value = storedMode
-  } else {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      colorMode.value = 'dark'
-    }
+  // } else {
+    // if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    //   colorMode.value = 'dark'
+    // }
   }
 } catch (e) {
   colorMode.value = 'light'

package/docs/components/toolbar/ToolbarSearch.vue

@@ -193,7 +193,7 @@ if (document) {
     @click="openSearch"
   >
     Search
-    <span class="text-secondary-400 ml-2">
+    <span class="text-secondary-400 ml-2 hidden md:inline">
       {{ metaKey }}K
     </span>
   </x-button>

package/docs/layouts/default.vue

@@ -22,8 +22,8 @@ const drawer = ref(false)
     <x-drawer v-model="drawer" breakpoint="lg" width="220" class="border-r flex">
       <docs-menu class="flex-1" @close="drawer = false" />
     </x-drawer>
-    <x-notifications inject-key="notifica">
-      <div class="flex-1 overflow-y-scroll bg-secondary-50 dark:bg-gray-900">
+    <x-notifications>
+      <div id="main" class="flex-1 overflow-y-scroll bg-secondary-50 dark:bg-gray-900">
         <x-container class="py-4 lg:py-8" tag="section">
           <router-view />
         </x-container>

package/docs/pages/colors.vue

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue'
 import { useColors, useNotifications, colors as TailwindColors } from '@indielayer/ui'
 
-const notifications = useNotifications('notifica')
+const notifications = useNotifications()
 const { getPalette } = useColors()
 
 const color500 = ref('#10B981')

package/docs/pages/component/alert/usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div class="grid gap-4">
     <x-alert>Default</x-alert>
     <x-alert color="primary" outlined>Outlined</x-alert>
     <x-alert color="sky" type="info" light removable>Hello</x-alert>

package/docs/pages/component/breadcrumbs/usage.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const simple = [
   { to: '#', label: 'Breadcrumb item 1' },
   { to: '#', label: 'Breadcrumb item 2' },

package/docs/pages/component/button/button-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-x-4">
+  <div class="grid md:grid-cols-4 gap-4">
     <x-button-group>
       <x-button >Cancel</x-button>
       <x-button color="primary">Save</x-button>

package/docs/pages/component/button/variants.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-4 gap-4">
+  <div class="grid md:grid-cols-3 gap-4">
     <x-button color="#F46262" light>Custom color</x-button>
     <x-button color="indigo" light glow>It's glowing</x-button>
     <x-button color="pink" outlined light glow>Glow</x-button>

package/docs/pages/component/drawer/usage.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 
 const el = ref(null)

package/docs/pages/component/form/usage.vue

@@ -2,7 +2,7 @@
 import { useNotifications, type SelectOption } from '@indielayer/ui'
 import { ref } from 'vue'
 
-const notifications = useNotifications('notifica')
+const notifications = useNotifications()
 
 const email = ref('')
 const password = ref('')
@@ -71,6 +71,7 @@ function onSubmit(isValid: string) {
       v-model="country"
       :rules="[rules.isRequired]"
       :options="countries"
+      filterable
       name="country"
       placeholder="Select another country"
       label="Country"

package/docs/pages/component/formGroup/usage.vue

@@ -2,7 +2,7 @@
 import { useNotifications } from '@indielayer/ui'
 import { ref } from 'vue'
 
-const notifications = useNotifications('notifica')
+const notifications = useNotifications()
 
 const selected = ref(['a'])
 const checked = ref()

package/docs/pages/component/modal/composed.vue

@@ -4,11 +4,12 @@ import { useNotifications } from '@indielayer/ui'
 
 const show = ref(false)
 
-const notifications = useNotifications('notifica')
+const notifications = useNotifications()
 
 const email = ref('')
 const password = ref('')
 const description = ref('')
+const datetime = ref('')
 
 const selected = ref()
 const options = [
@@ -62,7 +63,15 @@ function onSubmit(isValid: boolean) {
       placeholder="Description"
       hide-footer
     />
-    <x-select v-model="selected" :options="options" label="Country" :rules="[rules.isRequired]"/>
+    <x-select
+      v-model="selected"
+      filterable
+      :options="options"
+      label="Country"
+      :rules="[rules.isRequired]"
+    />
+
+    <x-datepicker v-model="datetime" label="Start date" :rules="[rules.isRequired]"/>
 
     <!-- <template #tertiary-action>
       <x-button color="gray" size="lg">Tertiary</x-button>
@@ -75,5 +84,5 @@ function onSubmit(isValid: boolean) {
     </template>
   </x-modal>
 
-  <x-button class="mr-2" @click="show = true">Open modal</x-button>
+  <x-button class="mr-2" @click="show = true">Modal as a XForm</x-button>
 </template>

package/docs/pages/component/modal/usage.vue

@@ -41,10 +41,7 @@ const show3 = ref(false)
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
   </x-modal>
 
-  <x-modal v-model="show2" backdrop>
-    <template #header>
-      Modal Header
-    </template>
+  <x-modal v-model="show2" backdrop title="Title">
 
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
 
@@ -54,16 +51,12 @@ const show3 = ref(false)
     </template>
   </x-modal>
 
-  <x-modal v-model="show3" show-close :has-actions="false">
-    <template #header>
-      Modal Title
-    </template>
-
+  <x-modal v-model="show3" show-close :has-actions="false" title="Modal Title">
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
   </x-modal>
 
   <x-button class="mr-2" @click="show = true">complete</x-button>
-  <x-button class="mr-2" @click="show1 = true">content only</x-button>
-  <x-button class="mr-2" @click="show2 = true">title & content</x-button>
-  <x-button class="mr-2" @click="show3 = true">header & content</x-button>
+  <x-button class="mr-2" @click="show1 = true">persistent</x-button>
+  <x-button class="mr-2" @click="show2 = true">title & footer</x-button>
+  <x-button class="mr-2" @click="show3 = true">title & content</x-button>
 </template>

package/docs/pages/component/notifications/usage.vue

@@ -1,15 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { useNotifications } from '@indielayer/ui'
 
-const notification = useNotifications('notifica')
+const notification = useNotifications()
 
-const log = () => {notification.log('Default notification.')}
-const info = () => {notification.info('Starwars is a movie.')}
-const error = () => {notification.error('Disk is full!')}
-const warn = () => {notification.warn('Disk is almost full.')}
-const success = () => {notification.success('File saved!')}
+const log = () => {notification?.log('Default notification.')}
+const info = () => {notification?.info('Starwars is a movie.')}
+const error = () => {notification?.error('Disk is full!')}
+const warn = () => {notification?.warn('Disk is almost full.')}
+const success = () => {notification?.success('File saved!')}
 const custom = () => {
-  notification.info({
+  notification?.info({
     timeout: 0,
     title: 'Notification title',
     message: 'Subtitle text goes here.',
@@ -25,7 +25,7 @@ const custom = () => {
   })
 }
 const custom2 = () => {
-  notification.info({
+  notification?.info({
     timeout: 0,
     title: 'Notification title',
     message: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem accusamus quisquam deleniti error possimus ipsa, fugit maiores. Fuga, non ab id odit praesentium earum optio tempore veniam, eligendi deleniti culpa neque aliquam blanditiis distinctio perferendis delectus ut aut. Sapiente repellendus culpa magnam ullam placeat et sunt laborum minus inventore. Cupiditate, totam soluta. Numquam placeat illum provident culpa corporis quis exercitationem, praesentium dicta quisquam quaerat voluptatem soluta dignissimos, enim dolores, saepe ullam. Dolorem, quo porro officiis aspernatur odit neque at minima totam eius! Cum aliquid repudiandae molestias, dolore accusantium qui ratione iusto, consequatur mollitia quaerat at ipsa voluptatibus quia minima? Nobis?',

package/docs/pages/component/pagination/usage.vue

@@ -1,5 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
+
 const totalPages = 10
 const page = ref(1)
 </script>

package/docs/pages/component/progress/variants.vue

@@ -1,11 +1,4 @@
-<template>
-  <div class="grid grid-cols-3 gap-4">
-    <x-progress :percentage="percentage" gradient color="sky" />
-    <x-progress :percentage="percentage" color="rose" />
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue'
 const percentage = ref(0)
 
@@ -16,3 +9,10 @@ onMounted(() => {
   }, 100)
 })
 </script>
+
+<template>
+  <div class="grid grid-cols-3 gap-4">
+    <x-progress :percentage="percentage" gradient color="sky" />
+    <x-progress :percentage="percentage" color="rose" />
+  </div>
+</template>

package/docs/pages/component/radio/states.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref('a')
+</script>
+
 <template>
   <div class="grid grid-cols-4 gap-4">
     <x-radio v-model="selected" disabled value="a" label="Disabled" />
@@ -5,9 +11,3 @@
     <x-radio v-model="selected" error="Invalid input" value="a" label="Error" />
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { selected: 'a' } },
-}
-</script>

package/docs/pages/component/radio/variants.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref('a')
+</script>
+
 <template>
   <div class="grid grid-cols-4 gap-4">
     <x-radio
@@ -31,9 +37,3 @@
     >Glow</x-radio>
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { selected: 'a' } },
-}
-</script>

package/docs/pages/component/select/index.vue

@@ -2,8 +2,8 @@
 import { XSelect } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
-import VariantsDemoCode from './variants.vue?raw'
-import VariantsDemo from './variants.vue'
+import SizeDemoCode from './size.vue?raw'
+import SizeDemo from './size.vue'
 import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
@@ -16,10 +16,10 @@ const demos = [{
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
-  name: 'Variants',
+  name: 'Size',
   description: '',
-  code: VariantsDemoCode,
-  component: VariantsDemo,
+  code: SizeDemoCode,
+  component: SizeDemo,
 }, {
   name: 'States',
   description: '',

package/docs/pages/component/select/{variants.vue → size.vue}

@@ -1,5 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref<undefined | string>()
+const options = ref([
+  { value: 'A', label: 'Option A' },
+  { value: 'B', label: 'Option B' },
+])
+</script>
+
 <template>
-  <div class="flex items-center space-x-4">
+  <div class="grid md:grid-cols-5 gap-4">
     <x-select v-model="selected" :options="options" placeholder="xs" size="xs" />
     <x-select v-model="selected" :options="options" placeholder="sm" size="sm" />
     <x-select v-model="selected" :options="options" placeholder="md"/>
@@ -7,17 +17,3 @@
     <x-select v-model="selected" :options="options" placeholder="xl" size="xl" />
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: '',
-      options: [
-        { value: 'A', label: 'Option A' },
-        { value: 'B', label: 'Option B' },
-      ],
-    } 
-  },
-}
-</script>

package/docs/pages/component/select/states.vue

@@ -1,22 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref('A')
+const options = ref([
+  { value: 'A', label: 'Option A' },
+  { value: 'B', label: 'Option B' },
+])
+</script>
+
 <template>
-  <div class="grid grid-cols-4 gap-4">
+  <div class="grid md:grid-cols-4 gap-4">
     <x-select v-model="selected" label="Disabled" disabled :options="options"/>
     <x-select v-model="selected" label="Read Only" readonly :options="options"/>
     <x-select v-model="selected" label="Loading" loading :options="options"/>
     <x-select v-model="selected" label="Error" error="Invalid input" :options="options"/>
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: 'A',
-      options: [
-        { value: 'A', label: 'Option A' },
-        { value: 'B', label: 'Option B' },
-      ],
-    }
-  },
-}
-</script>

package/docs/pages/component/select/usage.vue

@@ -1,5 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref<undefined | string>()
+const selectedMultiple = ref<string[]>(['A', 'B'])
+const options = ref([
+  { value: 'A', label: 'Option A' },
+  { value: 'B', label: 'Option B' },
+])
+
+for (let i = 0; i < 20; i++) {
+  options.value.push({ value: i.toString(), label: 'Option ' + i })
+}
+</script>
+
 <template>
-  <div class="grid grid-cols-3 gap-4">
+  <div class="grid md:grid-cols-3 gap-4">
     <x-select
       v-model="selected"
       label="Simple native select"
@@ -13,34 +28,16 @@
       v-model="selected"
       label="Dropdown select"
       placeholder="Placeholder"
+      filterable
       :options="options"
     />
     <x-select
       v-model="selectedMultiple"
       label="Multi select"
-      placeholder="Let's go baby"
+      placeholder="Multiple"
+      filterable
       :options="options"
       multiple
     />
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: null,
-      selectedMultiple: ['A', 'B'],
-      options: [
-        { value: 'A', label: 'Option Ao qoiw oqi jdoqiwd oqid joqiw jdoijoi' },
-        { value: 'B', label: 'Option B' },
-      ],
-    }
-  },
-  created() {
-    for (let i = 0; i < 20; i++) {
-      this.options.push({ value: i, label: 'Option ' + i })
-    }
-  },
-}
-</script>

package/docs/pages/component/spinner/variants.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center space-x-4">
+  <div class="flex items-center gap-4">
     <x-spinner size="xs" />
     <x-spinner size="sm" />
     <x-spinner />

package/docs/pages/component/table/usage.vue

@@ -2,7 +2,7 @@
 import { useNotifications, type TableHeader } from '@indielayer/ui'
 import { computed, ref } from 'vue'
 
-const notifications = useNotifications('notifica')
+const notifications = useNotifications()
 
 const headers: TableHeader[] = [
   { text: '#', value: 'id', sortable: true, align: 'center' },

package/docs/pages/component/tag/usage.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useNotifications } from '@indielayer/ui'
+
+const notifications = useNotifications()
+</script>
+
 <template>
   <div class="space-x-2">
     <x-tag color="primary">Hello</x-tag>
@@ -5,23 +11,9 @@
     <x-tag outlined>I'm a tag</x-tag>
     <x-tag rounded outlined color="pink">I'm a tag</x-tag>
     <x-tag color="pink">I'm a tag</x-tag>
-    <x-tag removable @remove="notifications.log('remove me')">I'm a tag</x-tag>
-    <x-tag removable size="xs" @remove="notifications.log('remove me')">I'm a tag</x-tag>
-    <x-tag removable size="lg" @remove="notifications.log('remove me')">I'm a tag</x-tag>
-    <x-tag removable size="xl" @remove="notifications.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable @remove="notifications?.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable size="xs" @remove="notifications?.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable size="lg" @remove="notifications?.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable size="xl" @remove="notifications?.log('remove me')">I'm a tag</x-tag>
   </div>
 </template>
-
-<script>
-import { useNotifications } from '@indielayer/ui'
-
-export default {
-  setup() {
-    const notifications = useNotifications('notifica')
-
-    return {
-      notifications,
-    }
-  },
-}
-</script>

package/docs/pages/component/toggle/states.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checked = ref(true)
+</script>
+
 <template>
   <div class="grid grid-cols-4 gap-4">
     <x-toggle disabled label="Disabled" />
@@ -5,9 +11,3 @@
     <x-toggle error="Invalid input" label="Error"/>
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { checked: true } },
-}
-</script>

package/docs/pages/component/toggle/variants.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checked = ref(false)
+</script>
+
 <template>
   <div class="flex items-center space-x-4">
     <x-toggle v-model="checked" size="xs" label="xs"/>
@@ -7,9 +13,3 @@
     <x-toggle v-model="checked" size="xl" label="xl"/>
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { checked: false } },
-}
-</script>

package/docs/pages/icons.vue

@@ -1,3 +1,39 @@
+<script setup lang="ts">
+const iconExample = `// icons.js
+export default {
+  check: '<polyline points="20 6 9 17 4 12"></polyline>'
+}`
+
+const installExample = `// main.js
+import { createApp } from 'vue'
+import UI from '@indielayer/ui'
+import icons from './icons'
+
+const app = createApp(App)
+
+app.use(UI, {
+  icons,
+})`
+
+const iconExample1 = `// icons.js
+export default {
+  check: '<polyline points="20 6 9 17 4 12"></polyline>',
+  // or
+  check2: {
+    icon: '<polyline points="20 6 9 17 4 12"></polyline>',
+    viewBox: '0 0 24 24', // default
+    filled: false, // default
+  },
+  // or
+  check3: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>'
+}`
+
+const iconExample2 = `<template>
+  <x-icon icon="check" />
+</template>
+`
+</script>
+
 <template>
   <h2 class="text-4xl font-semibold">Icons</h2>
   <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</h1>
@@ -60,42 +96,3 @@
   </div>
   <code-snippet lang="js" :code="iconExample2"/>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      iconExample: `// icons.js
-export default {
-  check: '<polyline points="20 6 9 17 4 12"></polyline>'
-}`,
-      installExample: `// main.js
-import { createApp } from 'vue'
-import UI from '@indielayer/ui'
-import icons from './icons'
-
-const app = createApp(App)
-
-app.use(UI, {
-  icons,
-})`,
-      iconExample1: `// icons.js
-export default {
-  check: '<polyline points="20 6 9 17 4 12"></polyline>',
-  // or
-  check2: {
-    icon: '<polyline points="20 6 9 17 4 12"></polyline>',
-    viewBox: '0 0 24 24', // default
-    filled: false, // default
-  },
-  // or
-  check3: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>'
-}`,
-      iconExample2: `<template>
-  <x-icon icon="check" />
-</template>
-`,
-    }
-  },
-}
-</script>