@indielayer/ui 1.10.0 → 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>

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

@@ -1,15 +1,15 @@
-const r = {
+const g = {
   classes: {
     wrapper({ props: e, slots: n, data: i }) {
-      const d = ["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 || d.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && d.push("shadow-sm"), e.size === "xs" ? d.push(n.default ? `py-1 text-xs ${e.icon, "px-2"}` : "leading-none p-1") : e.size === "sm" ? d.push(n.default ? `py-1.5 text-sm ${e.icon, "px-3"}` : "leading-none p-1.5") : e.size === "lg" ? d.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-6"}` : "leading-none p-3") : e.size === "xl" ? d.push(n.default ? `py-4 text-xl ${e.icon, "px-6"}` : "leading-none p-4") : d.push(n.default ? `py-2 ${e.icon ? "px-4" : "px-5"}` : "leading-none p-2"), e.disabled ? d.push("cursor-not-allowed") : e.loading ? d.push("cursor-default") : d.push("cursor-pointer"), d;
+      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;
     },
     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: d }) {
-    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], b = e.color && e.light, g = !e.color && !e.ghost;
-    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), g ? e.disabled ? l.push(i.variables({
+  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({
       bg: a[50],
       text: a[300],
       border: a[200],
@@ -18,7 +18,7 @@ const r = {
         text: a[600],
         border: a[700]
       }
-    })) : l.push(i.variables({
+    })) : d.push(i.variables({
       bg: "white",
       text: a[800],
       border: a[300],
@@ -31,7 +31,7 @@ const r = {
         hover: { bg: e.loading ? "" : a[700], border: a[600] },
         active: { bg: e.loading ? "" : a[600], border: a[500] }
       }
-    })) : b ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
+    })) : b ? ((!e.outlined || e.disabled) && d.push(i.get("border", "transparent")), e.disabled ? d.push(i.variables({
       bg: t[50],
       text: t[200],
       border: "transparent",
@@ -40,7 +40,7 @@ const r = {
         text: t[900],
         border: "transparent"
       }
-    })) : l.push(i.variables({
+    })) : d.push(i.variables({
       bg: t[50],
       text: t[600],
       border: e.outlined ? t[500] : "transparent",
@@ -53,75 +53,78 @@ const r = {
         hover: { bg: e.loading ? "" : t[800] },
         active: { bg: e.loading ? "" : t[700] }
       }
-    }))) : e.ghost ? (e.outlined || l.push(i.get("border", "transparent")), e.color ? e.disabled ? l.push(i.variables({
+    }))) : e.ghost ? (e.outlined || d.push(i.get("border", "transparent")), e.color ? e.disabled ? d.push(i.variables({
       text: t[200],
       dark: {
         text: t[700]
       }
-    })) : (l.push(i.variables({
+    })) : (d.push(i.variables({
       text: t[600],
       dark: {
         text: t[500]
       }
-    })), e.loading || l.push(i.variables({
+    })), e.loading || d.push(i.variables({
       hover: { bg: t[50] },
       active: { bg: t[100] },
       dark: {
         hover: { bg: a[800] },
         active: { bg: a[700] }
       }
-    }))) : e.disabled ? l.push(i.variables({
+    }))) : e.disabled ? d.push(i.variables({
       text: a[200],
       dark: {
         text: a[700]
       }
-    })) : (l.push(i.variables({
+    })) : (d.push(i.variables({
       text: a[800],
       dark: {
         text: "white"
       }
-    })), e.loading || l.push(i.variables({
+    })), e.loading || d.push(i.variables({
       hover: { bg: a[100] },
       active: { bg: a[200] },
       dark: {
         hover: { bg: a[800] },
         active: { bg: a[700] }
       }
-    })))) : e.outlined ? e.disabled ? l.push(i.variables({
+    })))) : e.outlined ? e.disabled ? d.push(i.variables({
       text: t[200],
       border: t[200],
       dark: {
         text: t[700],
         border: t[700]
       }
-    })) : (l.push(i.variables({
+    })) : (d.push(i.variables({
       text: t[600],
       border: t[600],
       dark: {
         text: t[500],
         border: t[500]
       }
-    })), e.loading || l.push(i.variables({
+    })), e.loading || d.push(i.variables({
       hover: { bg: t[100] },
       active: { bg: t[200] },
       dark: {
         hover: { bg: a[800] },
         active: { bg: a[700] }
       }
-    }))) : (l.push(i.variables({
+    }))) : (d.push(i.variables({
       text: "#fff",
       border: t[600],
       dark: {
         text: "#fff",
         border: t[500]
       }
-    })), e.disabled ? l.push(i.variables({
-      bg: t[100],
+    })), e.disabled ? d.push(i.variables({
+      bg: a[100],
+      border: a[300],
+      text: a[400],
       dark: {
-        text: t[700],
-        bg: t[900]
+        text: a[700],
+        border: a[700],
+        bg: a[800]
       }
-    })) : l.push(i.variables({
+    })) : d.push(i.variables({
       bg: t[500],
       hover: { bg: e.loading ? "" : t[600] },
       active: { bg: e.loading ? "" : t[800] },
@@ -130,9 +133,9 @@ const r = {
         hover: { bg: e.loading ? "" : t[700] },
         active: { bg: e.loading ? "" : t[800] }
       }
-    }))), l;
+    }))), d;
   }
-}, u = r;
+}, o = g;
 export {
-  u as default
+  o as default
 };