@indielayer/ui 0.2.3 → 1.0.0-alpha.2

package/src/composables/interactive.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue'
+
+export const useInteractive = (
+  el: Ref<HTMLElement | undefined>,
+) => {
+  return {
+    focus: () => {
+      el.value?.focus?.()
+    },
+  }
+}
+
+useInteractive.props = () => ({
+  disabled: Boolean,
+  loading: Boolean,
+} as const)

package/src/composables/keys.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue'
+
+export const injectTabKey = Symbol() as InjectionKey<any>
+export const injectFormKey = Symbol() as InjectionKey<any>
+export const injectIconsKey = Symbol() as InjectionKey<any>
+export const injectColorsKey = Symbol() as InjectionKey<any>
+export const injectButtonGroupKey = Symbol() as InjectionKey<any>
+export const injectNotificationKey = Symbol() as InjectionKey<any>

package/src/composables/notification.ts

@@ -0,0 +1,10 @@
+import { inject } from 'vue'
+import { injectNotificationKey } from './keys'
+
+export const useNotification = () => {
+  const notification = inject(injectNotificationKey)
+
+  if (!notification) console.warn('useNotification must have a parent wrapped with Notifications component')
+
+  return notification
+}

package/src/create.ts

@@ -0,0 +1,36 @@
+import type { App } from 'vue'
+import type { ColorLibrary } from './composables/colors'
+import { injectColorsKey } from './composables/keys'
+
+export interface IndielayerUIOptions {
+  prefix?: string,
+  components?: any,
+  colors?: ColorLibrary
+}
+
+const defaultOptions: IndielayerUIOptions = {
+  prefix: 'X',
+}
+
+const create = (createOptions: IndielayerUIOptions = {}) => {
+  const install = (app: App, installOptions: IndielayerUIOptions = {}) => {
+    const options = {
+      ...defaultOptions,
+      ...createOptions,
+      ...installOptions,
+    }
+
+    if (options.components)
+      options.components.forEach((component: any) => {
+        app.component(`${options.prefix}${component.name.slice(1)}`, component)
+      })
+
+    app.provide(injectColorsKey, options.colors)
+  }
+
+  return {
+    install,
+  }
+}
+
+export default create

package/src/exports/nuxt.js

@@ -0,0 +1,32 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtModule({
+  meta: {
+    name: '@indielayer/ui',
+    configKey: 'indielayer',
+    compatibility: {
+      nuxt: '^3.0.0',
+    },
+  },
+  defaults: {
+    prefix: 'X',
+  },
+  async setup(options, nuxt) {
+    // Create resolver to resolve relative paths
+    const { resolve } = createResolver(import.meta.url)
+
+    nuxt.options.runtimeConfig.public.indielayerOptions = options
+
+    // plugin install
+    addPlugin(resolve('./nuxt.plugin.js'))
+
+    // nuxt install
+    nuxt.hook('components:dirs', (dirs) => {
+      dirs.push({
+        path: fileURLToPath(new URL('../src/components', import.meta.url)),
+        prefix: options?.prefix ? options?.prefix : 'X',
+      })
+    })
+  },
+})

package/src/exports/nuxt.plugin.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app'
+import create from '../src/create'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const UI = create(nuxtApp.$config.indielayerOptions)
+
+  nuxtApp.vueApp.use(UI)
+})

package/src/exports/tailwind.preset.js

@@ -0,0 +1,55 @@
+const colors = require('tailwindcss/colors')
+
+module.exports = (useDark = true) => ({
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.emerald,
+        secondary: colors.slate,
+        success: colors.green,
+        warning: colors.yellow,
+        error: colors.red,
+      },
+      borderColor: colors.gray[100],
+      fontFamily: {
+        sans: [
+          'Inter',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'ui-sans-serif',
+          'system-ui',
+          '"Segoe UI"',
+          'Roboto',
+          '"Helvetica Neue"',
+          'Arial',
+          '"Noto Sans"',
+          'sans-serif',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
+      },
+    },
+  },
+  plugins: useDark ? [
+    ({ addBase, config }) => {
+      addBase({
+        html: {
+          color: config('theme.colors.gray.900'),
+          backgroundColor: 'white',
+        },
+        'html.dark': {
+          color: config('theme.colors.gray.100'),
+          backgroundColor: config('theme.colors.gray.900'),
+        },
+        '*, ::before, ::after': {
+          borderColor: colors.gray[200],
+        },
+        '.dark *, .dark ::before, .dark ::after': {
+          borderColor: colors.slate[700],
+        },
+      })
+    },
+  ] : [],
+})

package/src/index.ts

@@ -0,0 +1,8 @@
+export { tailwindColors as colors } from './composables/colors-utils'
+export { default as version } from './version'
+export * from './components'
+export * from './composables'
+
+export { default as createUI } from './create'
+
+export { default } from './install'

package/src/install.ts

@@ -0,0 +1,8 @@
+import * as components from './components'
+import create from './create'
+
+export default create({
+  components: Object.keys(components).map(
+    (key) => components[key as keyof object],
+  ),
+})

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// shims-vue.d.ts
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/version.ts

@@ -0,0 +1 @@
+export default '1.0.0-alpha.2'

package/volar.d.ts

@@ -0,0 +1,52 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    XAlert: typeof import('@indielayer/ui')['XAlert']
+    XAvatar: typeof import('@indielayer/ui')['XAvatar']
+    XBadge: typeof import('@indielayer/ui')['XBadge']
+    XBreadcrumbs: typeof import('@indielayer/ui')['XBreadcrumbs']
+    XButton: typeof import('@indielayer/ui')['XButton']
+    XButtonGroup: typeof import('@indielayer/ui')['XButtonGroup']
+    XCard: typeof import('@indielayer/ui')['XCard']
+    XCheckbox: typeof import('@indielayer/ui')['XCheckbox']
+    XCollapse: typeof import('@indielayer/ui')['XCollapse']
+    XContainer: typeof import('@indielayer/ui')['XContainer']
+    XDivider: typeof import('@indielayer/ui')['XDivider']
+    XDrawer: typeof import('@indielayer/ui')['XDrawer']
+    XForm: typeof import('@indielayer/ui')['XForm']
+    XIcon: typeof import('@indielayer/ui')['XIcon']
+    XImage: typeof import('@indielayer/ui')['XImage']
+    XInput: typeof import('@indielayer/ui')['XInput']
+    XLink: typeof import('@indielayer/ui')['XLink']
+    XMenu: typeof import('@indielayer/ui')['XMenu']
+    XMenuItem: typeof import('@indielayer/ui')['XMenuItem']
+    XModal: typeof import('@indielayer/ui')['XModal']
+    XNotifications: typeof import('@indielayer/ui')['XNotifications']
+    XPagination: typeof import('@indielayer/ui')['XPagination']
+    XPaginationItem: typeof import('@indielayer/ui')['XPaginationItem']
+    XPopover: typeof import('@indielayer/ui')['XPopover']
+    XPopoverContainer: typeof import('@indielayer/ui')['XPopoverContainer']
+    XProgress: typeof import('@indielayer/ui')['XProgress']
+    XRadio: typeof import('@indielayer/ui')['XRadio']
+    XScroll: typeof import('@indielayer/ui')['XScroll']
+    XSelect: typeof import('@indielayer/ui')['XSelect']
+    XSkeleton: typeof import('@indielayer/ui')['XSkeleton']
+    XSlider: typeof import('@indielayer/ui')['XSlider']
+    XSpacer: typeof import('@indielayer/ui')['XSpacer']
+    XSpinner: typeof import('@indielayer/ui')['XSpinner']
+    XTable: typeof import('@indielayer/ui')['XTable']
+    XTableBody: typeof import('@indielayer/ui')['XTableBody']
+    XTableCell: typeof import('@indielayer/ui')['XTableCell']
+    XTableHead: typeof import('@indielayer/ui')['XTableHead']
+    XTableHeader: typeof import('@indielayer/ui')['XTableHeader']
+    XTableRow: typeof import('@indielayer/ui')['XTableRow']
+    XTab: typeof import('@indielayer/ui')['XTab']
+    XTabs: typeof import('@indielayer/ui')['XTabs']
+    XTag: typeof import('@indielayer/ui')['XTag']
+    XTextarea: typeof import('@indielayer/ui')['XTextarea']
+    XToggle: typeof import('@indielayer/ui')['XToggle']
+    XTooltip: typeof import('@indielayer/ui')['XTooltip']
+    [key: string]: any
+  }
+}
+
+export {}

package/lib/cjs/components/avatar/Avatar.vue.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var Avatar_vue_vue_type_script_lang = require('./Avatar.vue_vue_type_script_lang.js');
-var Avatar_vue_vue_type_template_id_2549fb8f_lang = require('./Avatar.vue_vue_type_template_id_2549fb8f_lang.js');
-
-Avatar_vue_vue_type_script_lang.render = Avatar_vue_vue_type_template_id_2549fb8f_lang.render;
-Avatar_vue_vue_type_script_lang.__file = "src/components/avatar/Avatar.vue";
-
-module.exports = Avatar_vue_vue_type_script_lang;

package/lib/cjs/components/avatar/Avatar.vue_vue_type_script_lang.js

@@ -1,86 +0,0 @@
-'use strict';
-
-const validator = {
-  variant: [
-    'rounded',
-    'squared',
-  ],
-};
-
-var script = {
-  name: 'XAvatar',
-
-  validator,
-
-  props: {
-    alt: {
-      type: String,
-      default: null,
-    },
-
-    color: {
-      type: String,
-      default: 'primary',
-    },
-
-    name: {
-      type: String,
-      default: null,
-    },
-
-    size: {
-      type: String,
-      default: null,
-    },
-
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-
-    src: {
-      type: String,
-      default: null,
-    },
-
-    tag: {
-      type: String,
-      default: 'span',
-    },
-
-    squared: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      source: null,
-    }
-  },
-
-  computed: {
-    initials() {
-      if (this.name) {
-        const initials = this.name.match(/\b\w/g) || [];
-
-        return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
-      }
-
-      return ''
-    },
-  },
-
-  mounted() {
-    if (this.src) {
-      const img = new Image();
-
-      img.onload = () => { this.source = this.src; };
-      img.onerror = () => { };
-      img.src = this.src;
-    }
-  },
-};
-
-module.exports = script;

package/lib/cjs/components/avatar/Avatar.vue_vue_type_template_id_2549fb8f_lang.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-const _hoisted_1 = {
-  key: 0,
-  class: "leading-none"
-};
-const _hoisted_2 = ["alt", "src"];
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-    class: vue.normalizeClass(["inline-flex items-center justify-center overflow-hidden", [
-      // color
-      { [`bg-${$props.color}-500 text-${$props.color}-50`]: !$data.source && !$props.outlined },
-      {
-        // border
-        'border border-gray-400 dark:border-gray-500': !$data.source && $props.outlined,
-
-        // size
-        'h-6 w-6 text-xs': $props.size === 'xs',
-        'h-7 w-7 text-sm': $props.size === 'sm',
-        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes($props.size),
-        'h-12 w-12 text-lg': $props.size === 'lg',
-        'h-20 w-20 text-2xl': $props.size === 'xl',
-        'h-36 w-36 text-2xl': $props.size === '2xl',
-      },
-      $props.squared ? 'rounded-md' : 'rounded-full'
-    ]])
-  }, {
-    default: vue.withCtx(() => [
-      (!$data.source && $props.name)
-        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString($options.initials), 1 /* TEXT */))
-        : vue.createCommentVNode("v-if", true),
-      ($data.source)
-        ? (vue.openBlock(), vue.createElementBlock("img", {
-            key: 1,
-            alt: $props.alt,
-            src: $props.src,
-            class: "h-full w-full"
-          }, null, 8 /* PROPS */, _hoisted_2))
-        : vue.createCommentVNode("v-if", true)
-    ]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["class"]))
-}
-
-exports.render = render;

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var Button_vue_vue_type_script_lang = require('./Button.vue_vue_type_script_lang.js');
-var Button_vue_vue_type_template_id_5975756f_lang = require('./Button.vue_vue_type_template_id_5975756f_lang.js');
-
-Button_vue_vue_type_script_lang.render = Button_vue_vue_type_template_id_5975756f_lang.render;
-Button_vue_vue_type_script_lang.__file = "src/components/button/Button.vue";
-
-module.exports = Button_vue_vue_type_script_lang;

package/lib/cjs/components/button/Button.vue_vue_type_script_lang.js

@@ -1,82 +0,0 @@
-'use strict';
-
-var interactive = require('../../composables/interactive.js');
-require('../spinner/Spinner.vue.js');
-require('../icon/Icon.vue.js');
-var Spinner_vue_vue_type_script_lang = require('../spinner/Spinner.vue_vue_type_script_lang.js');
-var Icon_vue_vue_type_script_lang = require('../icon/Icon.vue_vue_type_script_lang.js');
-
-const validator = {
-  group: [false, true, '', 'first', 'last'],
-};
-
-var script = {
-  name: 'XButton',
-  components: {
-    XSpinner: Spinner_vue_vue_type_script_lang,
-    XIcon: Icon_vue_vue_type_script_lang,
-  },
-
-  validator: {
-    ...interactive.withValidator(),
-    ...validator,
-  },
-
-  props: {
-    ...interactive.withProps(),
-
-    group: {
-      default: false,
-      type: [String, Boolean],
-      validator: (value) => validator.group.includes(value),
-    },
-
-    icon: {
-      type: String,
-      default: null,
-    },
-
-    iconRight: {
-      type: Boolean,
-      default: false,
-    },
-
-    to: {
-      type: String,
-      default: undefined,
-    },
-
-    tag: {
-      type: String,
-      default: 'button',
-    },
-
-    type: {
-      type: String,
-      default: 'button',
-    },
-
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-
-    glow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  setup() {
-    return {
-      ...interactive.useInteractive(),
-    }
-  },
-};
-
-module.exports = script;

package/lib/cjs/components/button/Button.vue_vue_type_template_id_5975756f_lang.js

@@ -1,100 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_x_spinner = vue.resolveComponent("x-spinner");
-  const _component_x_icon = vue.resolveComponent("x-icon");
-
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
-    ref: "focusRef",
-    to: $props.to,
-    class: vue.normalizeClass(["relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none inline-block items-center justify-center font-medium", [
-      {
-        'shadow': !_ctx.flat && !$props.glow,
-        [`shadow-lg shadow-${_ctx.color}-500/50`]: !_ctx.flat && $props.glow,
-      },
-      _ctx.disabled ?
-        // disabled
-        'border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 cursor-not-allowed'
-        : {
-          // not disabled
-          [`border border-${_ctx.color}-500 text-${_ctx.color}-500`]: $props.outlined,
-
-          // colors
-          [`border border-transparent text-${_ctx.color}-50 bg-${_ctx.color}-500`]: !$props.outlined,
-
-          // colors hovers | actives
-          'hover:bg-dark-image active:bg-darker-image active:shadow-none': !_ctx.loading && !$props.outlined,
-          [`hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:hover:active:bg-gray-600`]: !_ctx.loading && $props.outlined,
-        },
-      _ctx.$slots.default ? {
-        // size
-        'py-1': _ctx.size === 'auto',
-        'px-2 py-1 text-xs': _ctx.size === 'xs',
-        'px-2 py-1 text-sm': _ctx.size === 'sm',
-        'px-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
-        'px-6 py-3 text-lg': _ctx.size === 'lg',
-        'px-10 py-6 text-xl': _ctx.size === 'xl',
-      } : 'px-3 py-2',
-      {
-        // icon
-        'inline-flex items-center': $props.icon,
-
-        // group
-        'rounded-button': $props.group === false,
-        'rounded-l-button': $props.group === 'first',
-        'rounded-r-button': $props.group === 'last',
-
-        '!rounded-full': $props.rounded,
-
-        // loading
-        'cursor-default': _ctx.loading,
-
-        // content
-        'flex items-center justify-center': _ctx.loading,
-        'flex-row-reverse': $props.icon && $props.iconRight
-      },
-
-    ]]),
-    "aria-busy": _ctx.loading ? 'true' : null,
-    "aria-disabled": $props.tag !== 'button' && _ctx.disabled ? 'true' : null,
-    disabled: _ctx.disabled || _ctx.loading,
-    type: $props.tag === 'button' ? $props.type : null
-  }, {
-    default: vue.withCtx(() => [
-      (_ctx.loading)
-        ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
-            key: 0,
-            size: _ctx.size,
-            class: "absolute"
-          }, null, 8 /* PROPS */, ["size"]))
-        : vue.createCommentVNode("v-if", true),
-      ($props.icon)
-        ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 1,
-            class: vue.normalizeClass(["flex", [{
-        'mr-2': _ctx.$slots.default && !$props.iconRight,
-        'ml-2': _ctx.$slots.default && $props.iconRight,
-        'invisible': _ctx.loading
-      }]])
-          }, [
-            vue.createVNode(_component_x_icon, {
-              size: _ctx.size,
-              icon: $props.icon
-            }, null, 8 /* PROPS */, ["size", "icon"])
-          ], 2 /* CLASS */))
-        : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("span", {
-        class: vue.normalizeClass({ 'invisible': _ctx.loading })
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 2 /* CLASS */)
-    ]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["to", "class", "aria-busy", "aria-disabled", "disabled", "type"]))
-}
-
-exports.render = render;

package/lib/cjs/components/card/Card.vue.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var Card_vue_vue_type_script_lang = require('./Card.vue_vue_type_script_lang.js');
-var Card_vue_vue_type_template_id_7be81122_lang = require('./Card.vue_vue_type_template_id_7be81122_lang.js');
-
-Card_vue_vue_type_script_lang.render = Card_vue_vue_type_template_id_7be81122_lang.render;
-Card_vue_vue_type_script_lang.__file = "src/components/card/Card.vue";
-
-module.exports = Card_vue_vue_type_script_lang;

package/lib/cjs/components/card/Card.vue_vue_type_script_lang.js

@@ -1,18 +0,0 @@
-'use strict';
-
-var script = {
-  name: 'XCard',
-  props: {
-    flat: {
-      type: Boolean,
-      default: false,
-    },
-
-    tag: {
-      type: String,
-      default: 'div',
-    },
-  },
-};
-
-module.exports = script;

package/lib/cjs/components/card/Card.vue_vue_type_template_id_7be81122_lang.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
-    class: vue.normalizeClass(["rounded bg-white dark:bg-gray-800", [
-      {
-        'shadow': !$props.flat,
-      },
-    ]])
-  }, {
-    default: vue.withCtx(() => [
-      vue.renderSlot(_ctx.$slots, "default")
-    ]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class"]))
-}
-
-exports.render = render;

package/lib/cjs/components/checkbox/Checkbox.vue.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var Checkbox_vue_vue_type_script_lang = require('./Checkbox.vue_vue_type_script_lang.js');
-var Checkbox_vue_vue_type_template_id_fa43bd62_lang = require('./Checkbox.vue_vue_type_template_id_fa43bd62_lang.js');
-
-Checkbox_vue_vue_type_script_lang.render = Checkbox_vue_vue_type_template_id_fa43bd62_lang.render;
-Checkbox_vue_vue_type_script_lang.__file = "src/components/checkbox/Checkbox.vue";
-
-module.exports = Checkbox_vue_vue_type_script_lang;