@indielayer/ui 1.5.2 → 1.6.1

package/README.md

@@ -16,7 +16,7 @@ Read the <a href="https://indielayer.com/ui/docs">Online Documentation</a>.
 
 ## Quickstart
 ```bash
-npm init @indielayer/ui
+npm init @indielayer/ui@latest
 ```
 
 ---

package/docs/components/common/DocumentPage.vue

@@ -104,36 +104,6 @@ const componentsProperties = computed(() => {
 
 const anchors = ref([])
 const currentAnchor = ref(null)
-const anchorObserver = ref(null)
-
-onMounted(() => {
-  // setAnchorObserver()
-  // setAnchors()
-})
-
-onUnmounted(() => {
-  // anchorObserver.value.disconnect()
-})
-
-// function setAnchors() {
-//   document.querySelectorAll('h2').forEach((element) => {
-//     anchors.value.push({
-//       id: element.id,
-//       name: element?.textContent?.trim().replace('#', '') || '',
-//     })
-//     anchorObserver.value.observe(element)
-//   })
-// }
-// function setAnchorObserver() {
-//   anchorObserver = new IntersectionObserver((entries) => {
-//     entries.forEach((entry) => {
-//       if (entry.isIntersecting) currentAnchor.value = entry.target.id
-//     })
-//   }, {
-//     root: null,
-//     threshold: 1,
-//   })
-// }
 </script>
 
 <template>

package/docs/components/menu/DocsMenu.vue

@@ -15,6 +15,7 @@ const components = [
     items: [
       { to: '/component/button', label: 'Button' },
       { to: '/component/checkbox', label: 'Checkbox' },
+      { to: '/component/datepicker', label: 'Datepicker' },
       { to: '/component/form', label: 'Form' },
       { to: '/component/formGroup', label: 'Form Group' },
       { to: '/component/input', label: 'Input' },
@@ -51,6 +52,7 @@ const components = [
       { to: '/component/pagination', label: 'Pagination' },
       { to: '/component/popover', label: 'Popover' },
       { to: '/component/progress', label: 'Progress' },
+      { to: '/component/qrCode', label: 'QR Code' },
       { to: '/component/skeleton', label: 'Skeleton' },
       { to: '/component/spinner', label: 'Spinner' },
       { to: '/component/stepper', label: 'Stepper' },

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { XDatepicker } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Datepicker'
+const description = 'The datepicker component is used to select a date or time.'
+const components = [XDatepicker]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/datepicker"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+  >
+    <x-alert type="info" color="warning" outlined>
+      This component is just a wrapper for the @vuepic/vue-datepicker package to fit the look and feel. For more documentation please see <x-link
+        href="https://vue3datepicker.com/"
+        external
+        target="blank"
+        shadow
+        rel="noopener noreferrer"
+      >@vuepic/vue-datepicker</x-link> documentation.
+    </x-alert>
+  </document-page>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const date = ref()
+const startDate = new Date()
+const endDate = new Date(new Date().setDate(startDate.getDate() + 7))
+
+date.value = [startDate, endDate]
+</script>
+
+<template>
+  <x-datepicker
+    v-model="date"
+    label="Select a date"
+    helper="Pick a date"
+    tooltip="Use it to pick a date"
+    range
+    multi-calendars
+    disable-year-select
+    :enable-time-picker="false"
+  />
+</template>

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

@@ -24,6 +24,7 @@ const rules = {
     return !!v  || 'Field is required'
   },
 }
+const range = ref([])
 
 function onSubmit(isValid: string) {
   if (isValid) notifications?.success('Valid! Sumitted.')
@@ -75,6 +76,18 @@ function onSubmit(isValid: string) {
       label="Country"
     />
 
+    <x-datepicker
+      v-model="range"
+      :rules="[rules.isRequired]"
+      label="Select a date"
+      helper="Pick a date"
+      tooltip="Use it to pick a date"
+      range
+      multi-calendars
+      disable-year-select
+      :enable-time-picker="false"
+    />
+
     <x-checkbox
       v-model="agree"
       :rules="[rules.isRequired]"

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

@@ -1,4 +1,6 @@
-<script setup>
+<script setup lang="ts">
+import type { MenuArrayItem } from '@indielayer/ui'
+
 const menu1 = [{
   label: 'Open',
   active: false,
@@ -15,10 +17,11 @@ const menu1 = [{
   active: false,
   value: 'c',
 }]
-const menu2 = [{
+const menu2: MenuArrayItem[] = [{
   label: 'Menu item 1',
   value: '',
   target: '_blank',
+  icon: 'smile',
   href: 'https://indielayer.com',
 }, {
   to: 'menu',
@@ -30,6 +33,7 @@ const menu2 = [{
   label: 'Menu item 3',
   value: '',
   exact: true,
+  icon: 'smile',
   items: [{
     label: 'derp',
   }],
@@ -56,7 +60,7 @@ const menu2 = [{
   label: 'Last menu item',
   value: '',
   icon: 'heart',
-  exact: '',
+  exact: true,
   onClick: () => {},
   disabled: false,
 }]

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { XQrCode } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'QR Code'
+const description = 'The QR Code component is used to generate a QR code.'
+const components = [XQrCode]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/qrCode"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+  />
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('https://indielayer.com')
+const selected = ref('M')
+const options = [
+  { value: 'L', label: 'Low' },
+  { value: 'M', label: 'Medium' },
+  { value: 'Q', label: 'Quartile' },
+  { value: 'H', label: 'High' },
+]
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4 mb-2">
+    <x-input v-model="value" label="QR Code Value"/>
+    <x-select v-model="selected" native :options="options" label="Error correction"/>
+  </div>
+  <x-qr-code :value="value" size="140" :error-correction-level="selected"/>
+</template>

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

@@ -1,15 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
-const value = ref(0)
+const value = ref(30)
 </script>
 
 <template>
-  <div class="grid gap-2 grid-cols-3">
-    <x-slider v-model="value" label="Slider 1" class="w-full">
-      <template #prefix="ctx">
-        <div class="w-12 text-sm">{{ ctx.value }}%</div>
-      </template>
-    </x-slider>
-    <x-slider v-model="value" label="Slider 2 (gradient)" gradient/>
-  </div>
+  <x-slider v-model="value" label="Slider 1">
+    <template #prefix="ctx">
+      <div class="w-12">{{ ctx.value }}%</div>
+    </template>
+  </x-slider>
+  <x-slider v-model="value" label="Slider 2" helper="Slide me" class="mt-10"/>
 </template>

package/docs/pages/index.vue

@@ -77,12 +77,12 @@ module.exports = {
   <code-snippet
     lang="js"
     :code="`import { createApp } from 'vue'
-import UI from '@indielayer/ui'
+import UI, { BaseTheme } from '@indielayer/ui'
 
 const app = createApp(App)
 
 app.use(UI, {
-  prefix: 'X',
+  theme: BaseTheme,
 })`"
   />
   <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
@@ -91,35 +91,24 @@ app.use(UI, {
     :snippets="[{
       label: 'npm',
       lang: 'bash',
-      code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
+      code: 'npm install @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
     }, {
       label: 'yarn',
       lang: 'bash',
-      code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
+      code: 'yarn add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
     }, {
       label: 'pnpm',
       lang: 'bash',
-      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
+      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
     }]"
   />
   <code-snippet
     lang="js"
-    :code="`import { colors } from '@indielayer/ui'
-
+    :code="`
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
-    ['@indielayer/ui/nuxt', {
-      theme: {
-        colors: {
-          primary: colors.emerald,
-          secondary: colors.slate,
-          success: colors.green,
-          warning: colors.yellow,
-          error: colors.red,
-        },
-      },
-    }],
+    ['@indielayer/ui/nuxt'],
   ],
   css: ['~/assets/tailwind.css'],
   /**
@@ -140,12 +129,13 @@ export default defineNuxtConfig({
   <code-snippet
     lang="js"
     :code="`import { createApp } from 'vue'
-import { createUI, XButton, XAlert } from '@indielayer/ui'
+import { createUI, BaseTheme, XButton, XAlert } from '@indielayer/ui'
 
 const app = createApp(App)
 
 const UI = createUI({
   components: [XButton, XAlert],
+  theme: BaseTheme,
 })
 
 app.use(UI)`"

package/lib/components/button/Button.vue.d.ts

@@ -12,7 +12,7 @@ declare const buttonProps: {
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     outlined: BooleanConstructor;
     rounded: BooleanConstructor;
     glow: BooleanConstructor;
@@ -56,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     outlined: BooleanConstructor;
     rounded: BooleanConstructor;
     glow: BooleanConstructor;
@@ -95,7 +95,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     outlined: BooleanConstructor;
     rounded: BooleanConstructor;
     glow: BooleanConstructor;

package/lib/components/button/Button.vue.js

@@ -3,7 +3,7 @@ import s from "./Button.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: s
-}, m = /* @__PURE__ */ t(o, [["__cssModules", e], ["__scopeId", "data-v-b25d6b6e"]]);
+}, c = /* @__PURE__ */ t(o, [["__cssModules", e], ["__scopeId", "data-v-ee892a0a"]]);
 export {
-  m as default
+  c as default
 };

package/lib/components/button/Button.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
-import { useTheme as O } from "../../composables/useTheme.js";
+import { defineComponent as D, ref as I, inject as O, computed as l, useAttrs as T, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as V, normalizeClass as u, normalizeStyle as A, withCtx as E, createCommentVNode as d, createElementVNode as m, renderSlot as F } from "vue";
+import { useTheme as K } from "../../composables/useTheme.js";
 import { useColors as X } from "../../composables/useColors.js";
 import { useCommon as b } from "../../composables/useCommon.js";
 import { useInteractive as h } from "../../composables/useInteractive.js";
@@ -21,7 +21,7 @@ const J = {
   icon: String,
   iconLeft: String,
   iconRight: String,
-  to: String,
+  to: [String, Object],
   outlined: Boolean,
   rounded: Boolean,
   glow: Boolean,
@@ -38,10 +38,10 @@ const J = {
   ...M,
   props: J,
   setup(y, { expose: v }) {
-    const e = y, g = I(null), s = T(q, {
+    const e = y, g = I(null), s = O(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = V(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = T(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
       size: t(n),
       flat: t(z),
       color: t(k),
@@ -55,10 +55,10 @@ const J = {
       iconLeft: t(p),
       iconRight: e.iconRight,
       rounded: e.rounded
-    })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
+    })), { className: G, classes: c, styles: $ } = K("Button", {}, L, {
       isButtonGroup: B
     }), { focus: j, blur: N } = h(g);
-    return v({ focus: j, blur: N }), (o, Q) => (a(), r(A(R.value), {
+    return v({ focus: j, blur: N }), (o, Q) => (a(), r(V(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
@@ -69,13 +69,13 @@ const J = {
         t(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: E(t($)),
+      style: A(t($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
       type: o.tag === "button" ? o.type : null
     }, {
-      default: F(() => [
+      default: E(() => [
         o.loading ? (a(), r(H, {
           key: 0,
           class: "absolute",
@@ -95,7 +95,7 @@ const J = {
             ])
           }, null, 8, ["size", "icon", "class"])) : d("", !0),
           m("span", null, [
-            K(o.$slots, "default", {}, void 0, !0)
+            F(o.$slots, "default", {}, void 0, !0)
           ])
         ], 2),
         o.iconRight ? (a(), r(f, {

package/lib/components/carousel/Carousel.vue.d.ts

@@ -45,7 +45,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     to: (index: number) => void;
     next: () => void;
     prev: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update"[], "update", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     autoplay: BooleanConstructor;
     delay: {
         type: NumberConstructor;
@@ -60,7 +60,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     classDots: (ArrayConstructor | StringConstructor)[];
-}>>, {
+}>> & {
+    onUpdate?: ((...args: any[]) => any) | undefined;
+}, {
     autoplay: boolean;
     delay: number;
     showDots: boolean;
@@ -70,11 +72,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         to: (index: number) => void;
         next: () => void;
         prev: () => void;
+        current: number;
+        total: number;
     }): any;
     dots?(_: {
         to: (index: number) => void;
         next: () => void;
         prev: () => void;
+        current: number;
+        total: number;
     }): any;
 }>;
 export default _default;

package/lib/components/carousel/Carousel.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as D, ref as h, computed as I, onMounted as N, watch as $, openBlock as p, createElementBlock as m, normalizeStyle as z, unref as l, normalizeClass as d, createElementVNode as g, renderSlot as k, normalizeProps as C, guardReactiveProps as A, mergeProps as R, Fragment as E, renderList as V, createCommentVNode as X } from "vue";
-import { useTheme as b } from "../../composables/useTheme.js";
-const F = ["onClick"], L = {
+import { defineComponent as N, ref as h, computed as $, onMounted as z, watch as A, openBlock as p, createElementBlock as m, normalizeStyle as R, unref as l, normalizeClass as d, createElementVNode as g, renderSlot as k, normalizeProps as C, guardReactiveProps as E, mergeProps as V, Fragment as X, renderList as b, createCommentVNode as F } from "vue";
+import { useTheme as L } from "../../composables/useTheme.js";
+const M = ["onClick"], T = {
   autoplay: Boolean,
   delay: {
     type: Number,
@@ -15,80 +15,83 @@ const F = ["onClick"], L = {
     default: "slide"
   },
   classDots: [Array, String]
-}, M = {
+}, j = {
   name: "XCarousel",
   validators: {}
-}, x = /* @__PURE__ */ D({
-  ...M,
-  props: L,
-  setup(_, { expose: P }) {
-    const f = _, r = h(null), t = h(0), u = I(() => {
-      var e;
-      return ((e = r.value) == null ? void 0 : e.children.length) || 0;
+}, H = /* @__PURE__ */ N({
+  ...j,
+  props: T,
+  emits: ["update"],
+  setup(_, { expose: P, emit: S }) {
+    const v = _, u = h(null), e = h(0), a = $(() => {
+      var t;
+      return ((t = u.value) == null ? void 0 : t.children.length) || 0;
     });
     let s = null;
-    N(() => {
-      y(), S();
+    z(() => {
+      y(), w();
     });
-    function S() {
-      f.autoplay && (s && clearInterval(s), s = setInterval(() => {
+    function w() {
+      v.autoplay && (s && clearInterval(s), s = setInterval(() => {
         i();
-      }, f.delay));
+      }, v.delay));
     }
-    $(t, y);
+    A(e, () => {
+      y(), I("update", e.value);
+    });
     function y() {
-      if (r.value) {
-        const e = r.value.children;
-        for (let o = 0; o < e.length; o++) {
-          const n = e[o];
-          n.style.transform = `translateX(${(o - t.value) * 100}%)`;
+      if (u.value) {
+        const t = u.value.children;
+        for (let n = 0; n < t.length; n++) {
+          const r = t[n];
+          r.style.transform = `translateX(${(n - e.value) * 100}%)`;
         }
       }
     }
-    function c(e) {
-      t.value = e, s && clearInterval(s);
+    function c(t) {
+      e.value = t, s && clearInterval(s);
     }
     function i() {
-      t.value < u.value - 1 ? t.value += 1 : t.value = 0;
+      e.value < a.value - 1 ? e.value += 1 : e.value = 0;
     }
-    function v() {
-      t.value > 0 ? t.value -= 1 : t.value = u.value - 1;
+    function f() {
+      e.value > 0 ? e.value -= 1 : e.value = a.value - 1;
     }
-    const { styles: w, classes: a, className: B } = b("Carousel", {}, f, {
-      current: t,
-      total: u
-    });
-    return P({ to: c, next: i, prev: v }), (e, o) => (p(), m("div", {
-      style: z(l(w)),
+    const { styles: B, classes: o, className: D } = L("Carousel", {}, v, {
+      current: e,
+      total: a
+    }), I = S;
+    return P({ to: c, next: i, prev: f }), (t, n) => (p(), m("div", {
+      style: R(l(B)),
       class: d([
-        l(B),
-        l(a).wrapper
+        l(D),
+        l(o).wrapper
       ])
     }, [
       g("div", {
         ref_key: "slidesRef",
-        ref: r,
-        class: d(l(a).slides)
+        ref: u,
+        class: d(l(o).slides)
       }, [
-        k(e.$slots, "default", C(A({ to: c, next: i, prev: v })))
+        k(t.$slots, "default", C(E({ to: c, next: i, prev: f, current: e.value, total: a.value })))
       ], 2),
-      e.showDots ? k(e.$slots, "dots", C(R({ key: 0 }, { to: c, next: i, prev: v })), () => [
+      t.showDots ? k(t.$slots, "dots", C(V({ key: 0 }, { to: c, next: i, prev: f, current: e.value, total: a.value })), () => [
         g("div", {
-          class: d([l(a).dots, e.classDots])
+          class: d([l(o).dots, t.classDots])
         }, [
-          (p(!0), m(E, null, V(u.value, (n) => (p(), m("span", {
-            key: n,
+          (p(!0), m(X, null, b(a.value, (r) => (p(), m("span", {
+            key: r,
             class: d([
-              l(a).dot,
-              n - 1 === t.value ? l(a).dotActive : ""
+              l(o).dot,
+              r - 1 === e.value ? l(o).dotActive : ""
             ]),
-            onClick: (T) => c(n - 1)
-          }, null, 10, F))), 128))
+            onClick: (q) => c(r - 1)
+          }, null, 10, M))), 128))
         ], 2)
-      ]) : X("", !0)
+      ]) : F("", !0)
     ], 6));
   }
 });
 export {
-  x as default
+  H as default
 };

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -9,7 +9,7 @@ const i = {
       return e.size === "lg" ? r.push("h-5 w-5") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-4 w-4"), r;
     },
     content: ({ props: e }) => {
-      const r = ["flex items-baseline"];
+      const r = ["flex items-center"];
       return e.disabled && r.push("cursor-not-allowed"), r;
     },
     icon: ({ props: e }) => {