@indielayer/ui 1.10.1 → 1.10.2

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

@@ -13,7 +13,9 @@ date.value = [startDate, endDate]
     v-model="date"
     label="Date"
     tooltip="Use it to pick a date"
+    text-input
     multi-calendars
+    time-picker-inline
     range
   />
 </template>

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

@@ -47,5 +47,20 @@ const options2 = ref(genOptions(1000))
         <span class="text-secondary-400 text-xs font-mono w-2">#{{ item.suffix }}</span>
       </template>
     </x-select>
+    <x-select
+      v-model="selected"
+      label="Custom input"
+      :options="options"
+      helper="Helper text"
+      tooltip="Tooltip here"
+    >
+      <template #input="{ popover, label, disabled }">
+        <button
+          class="w-full text-left border rounded-md px-3 py-2"
+          :disabled="disabled"
+          @click="popover?.show()"
+        >{{ label || 'Select an option' }}</button>
+      </template>
+    </x-select>
   </div>
 </template>

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

@@ -4,7 +4,7 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Tag'
-const description = 'Tags are used to display a label.'
+const description = 'Tags are used to display a small amount of information. They can be used to display a category, a status, or a label.'
 const components = [XTag]
 const demos = [{
   name: 'Usage',

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

@@ -5,8 +5,17 @@ const notifications = useNotifications()
 </script>
 
 <template>
-  <div class="space-x-2">
+  <div class="space-x-2 space-y-2">
     <x-tag color="primary">Hello</x-tag>
+    <x-tag color="purple">Hello</x-tag>
+    <x-tag
+      color="green"
+      size="sm"
+      filled
+      rounded
+      outlined
+    >Hello</x-tag>
+    <x-tag color="red">Hello</x-tag>
     <x-tag color="amber">Amber</x-tag>
     <x-tag outlined>I'm a tag</x-tag>
     <x-tag rounded outlined color="pink">I'm a tag</x-tag>