@indielayer/ui 1.10.1 → 1.10.3

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>

package/lib/components/button/theme/Button.base.theme.js

@@ -1,15 +1,15 @@
 const g = {
   classes: {
     wrapper({ props: e, slots: n, data: i }) {
-      const l = ["relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none"];
-      return i.isButtonGroup || l.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && l.push("shadow-sm"), e.size === "xs" ? l.push(n.default ? `py-1 text-xs ${e.icon, "px-2"}` : "leading-none p-1") : e.size === "sm" ? l.push(n.default ? `py-1.5 text-sm ${e.icon, "px-3"}` : "leading-none p-1.5") : e.size === "lg" ? l.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-6"}` : "leading-none p-3") : e.size === "xl" ? l.push(n.default ? `py-4 text-xl ${e.icon, "px-6"}` : "leading-none p-4") : l.push(n.default ? `py-2 ${e.icon ? "px-4" : "px-5"}` : "leading-none p-2"), e.disabled ? l.push("cursor-not-allowed") : e.loading ? l.push("cursor-default") : l.push("cursor-pointer"), l;
+      const l = ["relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0"];
+      return i.isButtonGroup || l.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && l.push("shadow-sm"), e.size === "xs" ? l.push(n.default ? `py-1 text-xs ${e.icon, "px-2"}` : "leading-none p-1") : e.size === "sm" ? l.push(n.default ? `py-1.5 text-sm ${e.icon, "px-3"}` : "leading-none p-1.5") : e.size === "lg" ? l.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-6"}` : "leading-none p-3") : e.size === "xl" ? l.push(n.default ? `py-4 text-xl ${e.icon, "px-6"}` : "leading-none p-3.5") : l.push(n.default ? `py-2 ${e.icon ? "px-4" : "px-5"}` : "leading-none p-[0.532rem]"), e.disabled ? l.push("cursor-not-allowed") : e.loading ? l.push("cursor-default") : l.push("cursor-pointer"), l;
     },
     iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
     iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
   },
   styles({ props: e, colors: n, css: i, data: l }) {
-    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, d = [], b = e.color && e.light, r = !e.color && !e.ghost;
-    return e.glow && d.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), r ? e.disabled ? d.push(i.variables({
+    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, d = [], r = e.color && e.light, b = !e.color && !e.ghost;
+    return e.glow && d.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), b ? e.disabled ? d.push(i.variables({
       bg: a[50],
       text: a[300],
       border: a[200],
@@ -31,7 +31,7 @@ const g = {
         hover: { bg: e.loading ? "" : a[700], border: a[600] },
         active: { bg: e.loading ? "" : a[600], border: a[500] }
       }
-    })) : b ? ((!e.outlined || e.disabled) && d.push(i.get("border", "transparent")), e.disabled ? d.push(i.variables({
+    })) : r ? ((!e.outlined || e.disabled) && d.push(i.get("border", "transparent")), e.disabled ? d.push(i.variables({
       bg: t[50],
       text: t[200],
       border: "transparent",