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

package/docs/pages/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <h2 class="text-4xl font-semibold">Getting Started</h2>
+  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.</h1>
+  <x-divider class="mt-4 mb-8"/>
+
+  <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
+  <p class="my-4">
+    This following command will install and execute <x-link
+      external
+      href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
+      target="_blank"
+      shadow
+      color="primary"
+    >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
+  </p>
+  <code-snippet :code="`npm init @indielayer/ui`" lang="bash"/>
+  <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
+❯   Vue 3
+    Nuxt 3</pre>
+
+  <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
+  <h3 class="text-2xl mb-4">1. Install via package manager</h3>
+  <multi-snippet
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui'
+    }]"
+  />
+
+  <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
+  <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
+  <p class="my-4">
+    Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
+  </p>
+  <code-snippet
+    lang="js"
+    :code="`// tailwind.config.js
+const colors = require('tailwindcss/colors')
+const indielayer = require('@indielayer/ui/tailwind.preset')
+
+module.exports = {
+  darkMode: 'class',
+  // load indielayer ui presets
+  presets: [indielayer()],
+  // allow PurgeCSS to analyze components
+  content: [
+    './index.html',
+    './**/*.vue',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    'node_modules/@indielayer/ui/{lib,src}/**/*',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.emerald,
+        secondary: colors.slate,
+        success: colors.green,
+        warning: colors.yellow,
+        error: colors.red,
+      },
+    },
+  },
+  plugins: [],
+}`"
+  />
+  <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
+  <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
+import UI from '@indielayer/ui'
+
+const app = createApp(App)
+
+app.use(UI, {
+  prefix: 'X',
+})`"
+  />
+  <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
+  <multi-snippet
+    class="my-4"
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
+    }]"
+  />
+  <code-snippet
+    lang="js"
+    :code="`import { colors } from '@indielayer/ui'
+
+// 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,
+        },
+      },
+    }],
+  ],
+  css: ['~/assets/tailwind.css'],
+  /**
+   * @tailwind base;
+   * @tailwind components;
+   * @tailwind utilities;
+   */
+  postcss: {
+    plugins: {
+      'tailwindcss/nesting': {},
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+})`"
+  />
+  <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
+import { createUI, XButton, XAlert } from '@indielayer/ui'
+
+const app = createApp(App)
+
+const UI = createUI({
+  components: [XButton, XAlert],
+})
+
+app.use(UI)`"
+  />
+</template>

package/docs/pages/play.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>playground</div>
+</template>

package/docs/pages/typography.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const textClasses = {
+  'text-xs': {
+    size: '0.75rem',
+    line: '1rem',
+  },
+  'text-sm': {
+    size: '0.875rem',
+    line: '1.25rem',
+  },
+  'text-base': {
+    size: '1rem',
+    line: '1.5rem',
+  },
+  'text-lg': {
+    size: '1.125rem',
+    line: '1.75rem',
+  },
+  'text-xl': {
+    size: '1.25rem',
+    line: '1.75rem',
+  },
+  'text-2xl': {
+    size: '1.5rem',
+    line: '2rem',
+  },
+  'text-3xl': {
+    size: '1.875rem',
+    line: '2.25rem',
+  },
+  'text-4xl': {
+    size: '2.25rem',
+    line: '2.5rem',
+  },
+  'text-5xl': {
+    size: '3rem',
+    line: 'auto',
+  },
+  'text-6xl': {
+    size: '3.75rem',
+    line: 'auto',
+  },
+  'text-7xl': {
+    size: '4.5rem',
+    line: 'auto',
+  },
+  'text-8xl': {
+    size: '6rem',
+    line: 'auto',
+  },
+  'text-9xl': {
+    size: '8rem',
+    line: 'auto',
+  },
+}
+
+</script>
+
+<template>
+  <h1 class="text-4xl font-semibold">Typography</h1>
+  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
+
+  <x-divider class="mt-4 mb-8"/>
+
+  <div>
+    <div>Main font</div>
+    <div class="text-gray-500 dark:text-gray-400">Inter</div>
+    <div class="text-6xl mt-4">AaBbCc</div>
+  </div>
+
+  <div class="mt-10">
+    <table class="text-left w-full">
+      <tr>
+        <th class="py-2">Class</th>
+        <th>Size</th>
+        <th>Line Height</th>
+        <th>Preview</th>
+      </tr>
+      <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
+        <td class="py-2">{{ key }}</td>
+        <td class="text-secondary-500 font-light">{{ c.size }}</td>
+        <td class="text-secondary-500 font-light">{{ c.line }}</td>
+        <td :class="key" class="max-w-lg truncate">Preview text</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="text-secondary-500 mt-4">
+    See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
+  </div>
+</template>

package/docs/router/index.ts

@@ -0,0 +1,77 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+
+// layouts
+import DefaultLayout from '../layouts/default.vue'
+import SimpleLayout from '../layouts/simple.vue'
+
+// help
+import HomePage from '../pages/index.vue'
+import IconsPage from '../pages/icons.vue'
+import PlayPage from '../pages/play.vue'
+import TypographyPage from '../pages/typography.vue'
+import ColorsPage from '../pages/colors.vue'
+
+const pages: Record<string, any> = import.meta.glob('../pages/component/*/index.vue', { eager: true })
+
+const componentPages: RouteRecordRaw[] = []
+
+Object.keys(pages).forEach((path) => {
+  const match = path.match(/\/pages\/component\/(.*)\/index\.vue$/)
+
+  if (match) {
+    const name = match[1].toLowerCase()
+
+    componentPages.push({
+      path: name,
+      component: pages[path].default,
+    })
+  }
+})
+
+const routes: RouteRecordRaw[] = [{
+  path: '/',
+  component: DefaultLayout,
+  children: [{
+    path: '',
+    redirect: { name: 'getting-started' },
+  }, {
+    path: 'getting-started',
+    name: 'getting-started',
+    component: HomePage,
+  }, {
+    path: 'icons',
+    name: 'icons',
+    component: IconsPage,
+  }, {
+    path: 'typography',
+    name: 'typography',
+    component: TypographyPage,
+  }, {
+    path: 'colors',
+    name: 'colors',
+    component: ColorsPage,
+  }, {
+    path: 'component',
+    component: SimpleLayout,
+    children: componentPages,
+  }],
+}, {
+  path: '/play',
+  component: PlayPage,
+}, {
+  path: '/:pathMatch(.*)*', name: 'NotFound', redirect: { name: 'getting-started' },
+}]
+
+const router = createRouter({
+  history: createWebHistory('/'),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  },
+})
+
+export default router

package/exports/tailwind.preset.js

@@ -28,7 +28,6 @@ module.exports = () => ({
         secondary: getColorVarPallete('secondary'),
         success: getColorVarPallete('success'),
         warning: getColorVarPallete('warning'),
-        danger: getColorVarPallete('error'),
         error: getColorVarPallete('error'),
       },
       borderColor: getColorVar('border'),

package/lib/components/accordion/Accordion.vue.d.ts

@@ -15,6 +15,9 @@ declare const accordionProps: {
     iconAlign: PropType<"left" | "right">;
 };
 export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>;
+export type AccordionInjection = AccordionProps & {
+    isInsideAccordion: boolean;
+};
 type InternalClasses = 'wrapper';
 export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {
 }

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

@@ -1,5 +1,5 @@
-import { defineComponent as c, provide as l, openBlock as i, createElementBlock as d, normalizeStyle as p, unref as e, normalizeClass as m, renderSlot as f } from "vue";
-import { useTheme as u } from "../../composables/useTheme.js";
+import { defineComponent as a, provide as i, openBlock as l, createElementBlock as d, normalizeStyle as p, unref as e, normalizeClass as m, renderSlot as u } from "vue";
+import { useTheme as f } from "../../composables/useTheme.js";
 import { injectAccordionKey as _ } from "../../composables/keys.js";
 const y = {
   tag: {
@@ -17,21 +17,21 @@ const y = {
 }, g = {
   name: "XAccordion",
   validators: {}
-}, h = /* @__PURE__ */ c({
+}, h = /* @__PURE__ */ a({
   ...g,
   props: y,
   setup(n) {
     const o = n;
-    l(_, o);
-    const { styles: t, classes: r, className: s } = u("Accordion", {}, o);
-    return (a, B) => (i(), d("div", {
+    i(_, { ...o, isInsideAccordion: !0 });
+    const { styles: t, classes: r, className: s } = f("Accordion", {}, o);
+    return (c, A) => (l(), d("div", {
       style: p(e(t)),
       class: m([
         e(s),
         e(r).wrapper
       ])
     }, [
-      f(a.$slots, "default")
+      u(c.$slots, "default")
     ], 6));
   }
 });

package/lib/components/accordion/AccordionItem.vue.d.ts

@@ -23,6 +23,7 @@ export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProp
 type InternalClasses = 'wrapper' | 'icon' | 'content';
 type InternalData = {
     collapsed: boolean;
+    isInsideAccordion: boolean;
 };
 export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {
 }

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

@@ -1,4 +1,4 @@
-import { defineComponent as V, inject as j, computed as z, reactive as D, ref as f, watch as H, openBlock as s, createBlock as m, resolveDynamicComponent as K, normalizeStyle as M, unref as a, normalizeClass as l, withCtx as v, createElementVNode as r, renderSlot as d, createElementBlock as h, createCommentVNode as g, createVNode as X, Transition as q, withDirectives as F, vShow as G } from "vue";
+import { defineComponent as V, inject as j, computed as z, reactive as D, ref as m, watch as H, openBlock as a, createBlock as v, resolveDynamicComponent as K, normalizeStyle as M, unref as s, normalizeClass as l, withCtx as h, createElementVNode as r, renderSlot as d, createElementBlock as g, createCommentVNode as y, createVNode as X, Transition as q, withDirectives as F, vShow as G } from "vue";
 import { useTheme as J } from "../../composables/useTheme.js";
 import O from "../icon/Icon.vue.js";
 import { injectAccordionKey as Q } from "../../composables/keys.js";
@@ -27,103 +27,105 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     type: String,
     default: "right"
   }
-}, te = {
+}, oe = {
   name: "XAccordionItem",
   validators: {
     iconAlign: Z
   }
-}, se = /* @__PURE__ */ V({
-  ...te,
+}, ae = /* @__PURE__ */ V({
+  ...oe,
   props: ee,
   emits: ["expand"],
-  setup(y, { expose: A, emit: x }) {
-    const n = y, _ = x, k = j(Q, {}), w = z(() => k.iconAlign || n.iconAlign), B = D({
+  setup(A, { expose: x, emit: _ }) {
+    const n = A, k = _, u = j(Q, {
+      isInsideAccordion: !1
+    }), w = z(() => u.iconAlign || n.iconAlign), I = D({
       iconAlign: w
-    }), t = f(!n.expanded), o = f(!0);
+    }), o = m(!n.expanded), t = m(!0);
     H(() => n.expanded, () => {
-      t.value = !n.expanded;
+      o.value = !n.expanded;
     });
-    function E(e) {
-      o.value && (e.style.height = "0px");
+    function B(e) {
+      t.value && (e.style.height = "0px");
     }
-    function C(e, i) {
-      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+    function E(e, i) {
+      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = `${e.scrollHeight}px`;
       }, 1)) : i();
     }
-    function I(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
+    function C(e) {
+      t.value ? e.style.removeProperty("height") : t.value = !0;
     }
     function $(e) {
-      o.value && (e.style.height = `${e.scrollHeight}px`);
+      t.value && (e.style.height = `${e.scrollHeight}px`);
     }
     function b(e, i) {
-      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = "0px";
       }, 1)) : i();
     }
     function S(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
+      t.value ? e.style.removeProperty("height") : t.value = !0;
     }
-    function u(e = !0) {
-      o.value = e, t.value = !1;
+    function p(e = !0) {
+      t.value = e, o.value = !1;
     }
     function L(e = !0) {
-      o.value = e, t.value = !0;
+      t.value = e, o.value = !0;
     }
-    function p() {
-      n.disabled || (t.value = !t.value);
+    function f() {
+      n.disabled || (o.value = !o.value);
     }
     function P(e = !0) {
-      u(e), _("expand");
+      p(e), k("expand");
     }
     const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
       ...n,
-      ...B
-    }, { collapsed: t });
-    return A({ toggle: p, open: u, close: L }), (e, i) => (s(), m(K(e.tag), {
-      style: M(a(N)),
-      class: l(a(T)),
+      ...I
+    }, { collapsed: o, 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": t.value ? "false" : "true"
+      "aria-expanded": o.value ? "false" : "true"
     }, {
-      default: v(() => [
+      default: h(() => [
         r("button", {
-          class: l(a(c).wrapper),
-          onClick: p
+          class: l(s(c).wrapper),
+          onClick: f
         }, [
           r("div", R, [
-            d(e.$slots, "default", { collapsed: t.value })
+            d(e.$slots, "default", { collapsed: o.value })
           ]),
-          e.showIcon ? (s(), h("div", {
+          e.showIcon ? (a(), g("div", {
             key: 0,
-            class: l(a(c).icon)
+            class: l(s(c).icon)
           }, [
-            e.icon ? (s(), m(O, {
+            e.icon ? (a(), v(O, {
               key: 0,
               icon: e.icon
-            }, null, 8, ["icon"])) : (s(), h("svg", U, Y))
-          ], 2)) : g("", !0)
+            }, null, 8, ["icon"])) : (a(), g("svg", U, Y))
+          ], 2)) : y("", !0)
         ], 2),
-        e.$slots.summary ? d(e.$slots, "summary", { key: 0 }) : g("", !0),
+        e.$slots.summary ? d(e.$slots, "summary", { key: 0 }) : y("", !0),
         X(q, {
-          onBeforeEnter: E,
-          onEnter: C,
-          onAfterEnter: I,
+          onBeforeEnter: B,
+          onEnter: E,
+          onAfterEnter: C,
           onBeforeLeave: $,
           onLeave: b,
           onAfterLeave: S
         }, {
-          default: v(() => [
+          default: h(() => [
             F(r("div", {
-              class: l(a(c).content)
+              class: l(s(c).content)
             }, [
               d(e.$slots, "content", {
                 expand: P,
-                collapsed: t.value
+                collapsed: o.value
               })
             ], 2), [
-              [G, !t.value]
+              [G, !o.value]
             ])
           ]),
           _: 3
@@ -134,5 +136,5 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
   }
 });
 export {
-  se as default
+  ae as default
 };

package/lib/components/accordion/index.d.ts

@@ -1,4 +1,4 @@
 export { default as XAccordion } from './Accordion.vue';
-export type { AccordionProps, AccordionTheme } from './Accordion.vue';
+export type { AccordionProps, AccordionInjection, AccordionTheme } from './Accordion.vue';
 export { default as XAccordionItem } from './AccordionItem.vue';
 export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue';

package/lib/components/accordion/theme/Accordion.carbon.theme.js

@@ -1,8 +1,5 @@
-const e = {
-  classes: {
-    wrapper: "grid grid-cols-1 divide-y border-b border-t"
-  }
-}, r = e;
+import e from "./Accordion.base.theme.js";
+const t = e, o = t;
 export {
-  r as default
+  o as default
 };

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

@@ -1,16 +1,16 @@
-const s = {
+const r = {
   classes: {
-    wrapper: ({ props: t, slots: r }) => {
-      const e = ["relative flex items-center w-full text-left"];
-      return r.default && (e.push("px-4 py-2"), t.disabled || e.push("hover:bg-gray-50 dark:hover:bg-gray-800")), t.iconAlign === "left" && e.push("flex-row-reverse"), t.disabled || e.push("cursor-pointer"), e;
+    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;
     },
-    icon: ({ props: t, data: r }) => {
-      const e = ["flex transform transition-transform duration-150"];
-      return r.collapsed || e.push("rotate-180"), t.disabled && e.push("text-gray-300"), t.iconAlign === "left" && e.push("mr-4"), e;
+    icon: ({ props: t, data: i }) => {
+      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;
     },
     content: "transition-[height] duration-150 overflow-y-hidden"
   }
-}, i = s;
+}, n = r;
 export {
-  i as default
+  n as default
 };

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

@@ -1,16 +1,5 @@
-const s = {
-  classes: {
-    wrapper: ({ props: t, slots: r }) => {
-      const e = ["relative flex items-center w-full text-left"];
-      return r.default && (e.push("px-4 py-2"), t.disabled || e.push("hover:bg-gray-50 dark:hover:bg-gray-800")), t.iconAlign === "left" && e.push("flex-row-reverse"), t.disabled || e.push("cursor-pointer"), e;
-    },
-    icon: ({ props: t, data: r }) => {
-      const e = ["flex transform transition-transform duration-150"];
-      return r.collapsed || e.push("rotate-180"), t.disabled && e.push("text-gray-300"), t.iconAlign === "left" && e.push("mr-4"), e;
-    },
-    content: "px-4 pt-2 pb-6 transition-[height] duration-150 overflow-y-hidden"
-  }
-}, i = s;
+import e from "./AccordionItem.base.theme.js";
+const t = e, o = t;
 export {
-  i as default
+  o as default
 };