@indielayer/ui 0.0.0-dev-20240205224808 → 0.0.0-dev-20240212133527

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/components/toolbar/Toolbar.vue

@@ -25,7 +25,7 @@ const isDev = import.meta.env.DEV
 
 <template>
   <x-container fluid class="bg-white dark:bg-secondary-800">
-    <div class="flex justify-items-center items-center py-2">
+    <div class="flex justify-items-center items-center py-2 min-h-[54px]">
       <a href="/" class="flex items-center">
         <img src="@/assets/images/logo_mini.svg" width="26" alt="Indielayer"/>
         <x-divider vertical class="!h-[24px] mx-3"/>
@@ -40,14 +40,7 @@ const isDev = import.meta.env.DEV
       <x-spacer/>
 
       <div class="flex items-center font-semibold text-sm">
-        <x-select
-          v-if="isDev"
-          v-model="selected"
-          :options="options"
-          hide-footer
-          size="sm"
-        />
-        <x-divider v-if="isDev" vertical style="height: 10px;" class="px-2"/>
+
         <div class="tracking-wide text-xs">v{{ version }}</div>
         <x-divider vertical style="height: 10px;" class="px-2 hidden sm:block"/>
         <x-link

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.')
@@ -33,25 +34,22 @@ function onSubmit(isValid: string) {
 
 <template>
   <x-form title="Edit user information" description="Almost all fields are required" @submit="onSubmit">
-    <div class="grid grid-cols-2 gap-4">
-      <x-input
-        v-model="email"
-        :rules="[rules.isRequired, rules.isEmail]"
-        name="email"
-        label="Email"
-        placeholder="Enter your email"
-      />
-      <x-input
-        v-model="password"
-        type="password"
-        :rules="[rules.isRequired]"
-        name="password"
-        label="Password"
-        placeholder="Enter your password"
-        helper="Must be between 8 and 10 characters"
-      />
-    </div>
-
+    <x-input
+      v-model="email"
+      :rules="[rules.isRequired, rules.isEmail]"
+      name="email"
+      label="Email"
+      placeholder="Enter your email"
+    />
+    <x-input
+      v-model="password"
+      type="password"
+      :rules="[rules.isRequired]"
+      name="password"
+      label="Password"
+      placeholder="Enter your password"
+      helper="Must be between 8 and 10 characters"
+    />
     <x-textarea
       v-model="description"
       name="description"
@@ -78,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/exports/nuxt.plugin.js

@@ -1,8 +1,15 @@
 import { defineNuxtPlugin } from '#app'
-import create from '../src/create'
+import { BaseTheme, injectIconsKey, injectOptionsKey, injectThemeKey, createUI } from '../src'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const UI = create(nuxtApp.$config.public?.indielayerOptions)
+  const UI = createUI({
+    ...nuxtApp.$config.public?.indielayerOptions,
+    theme: BaseTheme,
+    injectIconsKey,
+    injectOptionsKey,
+    injectThemeKey,
+
+  })
 
   nuxtApp.vueApp.use(UI)
 })

package/lib/components/accordion/AccordionItem.vue.js

@@ -27,13 +27,13 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     type: String,
     default: "right"
   }
-}, oe = {
+}, te = {
   name: "XAccordionItem",
   validators: {
     iconAlign: Z
   }
 }, ae = /* @__PURE__ */ V({
-  ...oe,
+  ...te,
   props: ee,
   emits: ["expand"],
   setup(A, { expose: x, emit: _ }) {
@@ -41,40 +41,40 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
       isInsideAccordion: !1
     }), w = z(() => u.iconAlign || n.iconAlign), I = D({
       iconAlign: w
-    }), o = m(!n.expanded), t = m(!0);
+    }), t = m(!n.expanded), o = m(!0);
     H(() => n.expanded, () => {
-      o.value = !n.expanded;
+      t.value = !n.expanded;
     });
     function B(e) {
-      t.value && (e.style.height = "0px");
+      o.value && (e.style.height = "0px");
     }
     function E(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = `${e.scrollHeight}px`;
       }, 1)) : i();
     }
-    function C(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+    function b(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
-    function $(e) {
-      t.value && (e.style.height = `${e.scrollHeight}px`);
+    function C(e) {
+      o.value && (e.style.height = `${e.scrollHeight}px`);
     }
-    function b(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+    function $(e, i) {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = "0px";
       }, 1)) : i();
     }
     function S(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
     function p(e = !0) {
-      t.value = e, o.value = !1;
+      o.value = e, t.value = !1;
     }
     function L(e = !0) {
-      t.value = e, o.value = !0;
+      o.value = e, t.value = !0;
     }
     function f() {
-      n.disabled || (o.value = !o.value);
+      n.disabled || (t.value = !t.value);
     }
     function P(e = !0) {
       p(e), k("expand");
@@ -82,20 +82,21 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
       ...n,
       ...I
-    }, { collapsed: o, isInsideAccordion: u.isInsideAccordion });
+    }, { collapsed: t, isInsideAccordion: u.isInsideAccordion });
     return x({ toggle: f, open: p, close: L }), (e, i) => (a(), v(K(e.tag), {
       style: M(s(N)),
       class: l(s(T)),
       "aria-disabled": e.disabled,
-      "aria-expanded": o.value ? "false" : "true"
+      "aria-expanded": t.value ? "false" : "true"
     }, {
       default: h(() => [
         r("button", {
+          type: "button",
           class: l(s(c).wrapper),
           onClick: f
         }, [
           r("div", R, [
-            d(e.$slots, "default", { collapsed: o.value })
+            d(e.$slots, "default", { collapsed: t.value })
           ]),
           e.showIcon ? (a(), g("div", {
             key: 0,
@@ -111,9 +112,9 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
         X(q, {
           onBeforeEnter: B,
           onEnter: E,
-          onAfterEnter: C,
-          onBeforeLeave: $,
-          onLeave: b,
+          onAfterEnter: b,
+          onBeforeLeave: C,
+          onLeave: $,
           onAfterLeave: S
         }, {
           default: h(() => [
@@ -122,10 +123,10 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
             }, [
               d(e.$slots, "content", {
                 expand: P,
-                collapsed: o.value
+                collapsed: t.value
               })
             ], 2), [
-              [G, !o.value]
+              [G, !t.value]
             ])
           ]),
           _: 3

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -1,16 +1,16 @@
-const r = {
+const i = {
   classes: {
-    wrapper: ({ props: t, slots: i, data: e }) => {
-      const s = ["relative flex items-center w-full text-left"];
-      return e.isInsideAccordion && (i.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-50 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
+    wrapper: ({ props: t, slots: r, data: e }) => {
+      const s = ["relative flex items-center w-full text-left rounded"];
+      return e.isInsideAccordion && (r.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
     },
-    icon: ({ props: t, data: i }) => {
+    icon: ({ props: t, data: r }) => {
       const e = ["absolute flex transform transition-transform duration-150"];
-      return i.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
+      return r.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
     },
     content: "transition-[height] duration-150 overflow-y-hidden"
   }
-}, n = r;
+}, n = i;
 export {
   n as default
 };

package/lib/components/alert/Alert.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as w, renderSlot as t, createBlock as b, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
+import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as b, renderSlot as t, createBlock as w, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
 import { useColors as I } from "../../composables/useColors.js";
 import { useTheme as C } from "../../composables/useTheme.js";
 import { infoIcon as h, successIcon as N, errorIcon as S, warningIcon as V, closeIcon as z } from "../../common/icons.js";
@@ -24,7 +24,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
     const o = m, p = g(() => o.type === "info" ? h : o.type === "success" ? N : o.type === "error" ? S : o.type === "warning" ? V : ""), { styles: u, classes: f, className: d } = C("Alert", {}, o);
     return (e, s) => (l(), a("div", {
       style: k(r(u)),
-      class: w([
+      class: b([
         r(d),
         e.$style.alert,
         e.glow ? e.$style["alert--glow"] : "",
@@ -32,7 +32,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       ])
     }, [
       t(e.$slots, "icon", {}, () => [
-        e.type ? (l(), b(c, {
+        e.type ? (l(), w(c, {
           key: 0,
           icon: p.value,
           class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
@@ -44,6 +44,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       e.removable ? (l(), a(B, { key: 0 }, [
         A,
         n("button", {
+          type: "button",
           class: "shrink-0",
           "aria-label": e.closeLabel,
           onClick: s[0] || (s[0] = (y) => e.$emit("remove", y))

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
 };