@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/textarea/Textarea.theme.js

@@ -1,16 +0,0 @@
-const s = {
-  classes: {
-    wrapper: "inline-block align-bottom text-left",
-    label: ({ props: e }) => {
-      const r = "font-medium text-gray-800 dark:text-gray-200 mb-1";
-      return e.size === "xs" ? r + " text-xs" : e.size === "sm" ? r + " text-sm" : e.size === "lg" ? r + " text-lg" : e.size === "xl" ? r + " text-xl" : r;
-    },
-    input: ({ props: e, data: r }) => {
-      const t = ["resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md"];
-      return !r.errorInternal && !e.disabled && t.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? t.push("px-2 py-1 text-xs") : e.size === "sm" ? t.push("px-2 py-2 text-sm") : e.size === "lg" ? t.push("px-4 py-3 text-lg") : e.size === "xl" ? t.push("px-5 py-4 text-xl") : t.push("px-3 py-2"), t.push(e.disabled ? "bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t;
-    }
-  }
-}, a = s;
-export {
-  a as default
-};

package/lib/components/toggle/Toggle.theme.d.ts

@@ -1,10 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
-import type { ToggleProps } from './Toggle.vue';
-type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button';
-interface InternalTheme extends ThemeComponent<ToggleProps, InternalClasses> {
-}
-export interface ToggleTheme extends Omit<InternalTheme, 'classes'> {
-    classes?: Partial<ThemeClasses<ToggleProps, InternalClasses>>;
-}
-declare const theme: InternalTheme;
-export default theme;

package/lib/composables/colors.js

@@ -1,52 +0,0 @@
-import { inject as p, computed as m, unref as g } from "vue";
-import { injectThemeKey as f } from "./keys.js";
-import { tailwindColors as r, setOpacity as l, isValidColor as y, colorShade as t } from "./colors-utils.js";
-import { mergeRightDeep as d } from "../common/utils.js";
-const a = {}, C = {
-  primary: r.sky,
-  secondary: r.slate,
-  success: r.green,
-  warning: r.yellow,
-  error: r.red
-}, c = () => {
-  const s = p(f, {}), o = m(() => d(C, g(s).colors || {})), i = (e) => r[e];
-  return {
-    getPalette: (e) => {
-      if (!e)
-        return i("gray");
-      const n = i(e);
-      if (n)
-        return n;
-      if (a[e])
-        return a[e];
-      if (o.value[e])
-        return o.value[e];
-      if (!y(e))
-        return console.warn(`Invalid color: ${e}`), i("gray");
-      const u = {
-        50: t(e, 0.9),
-        100: t(e, 0.8),
-        200: t(e, 0.6),
-        300: t(e, 0.4),
-        400: t(e, 0.1),
-        500: e,
-        600: t(e, -0.1),
-        700: t(e, -0.25),
-        800: t(e, -0.58),
-        900: t(e, -0.7),
-        950: t(e, -0.8)
-      };
-      return a[e] = u, u;
-    },
-    getColorOpacity: (e, n) => l(e, n)
-  };
-};
-c.props = (s) => ({
-  color: {
-    type: String,
-    default: s
-  }
-});
-export {
-  c as useColors
-};

package/lib/composables/inputtable.js

@@ -1,78 +0,0 @@
-import { ref as f, watch as I, inject as F, computed as A, onMounted as B, onUnmounted as S } from "vue";
-import { injectFormKey as j } from "./keys.js";
-const v = (t, { focus: p, emit: u, withListeners: y = !0 }) => {
-  const o = f(!0), n = f(t.error), V = t.name ? t.name : (Math.random() + 1).toString(36).substring(7), s = f(V);
-  I(() => t.error, (e) => {
-    n.value = e;
-  }), I(() => t.name, (e) => {
-    e && (s.value = e);
-  });
-  const i = F(j, {
-    registerInput: () => {
-    },
-    unregisterInput: () => {
-    },
-    isInsideForm: !1
-  }), b = () => {
-    n.value = "", o.value = !0, u("update:modelValue", "");
-  }, g = (e) => {
-    n.value = e;
-  }, c = (e) => {
-    e = e || t.modelValue, o.value = !1;
-    for (let d = 0; d < t.rules.length; d++) {
-      const r = t.rules[d];
-      let a = !0;
-      if (typeof r == "function")
-        a = r(e);
-      else if (Array.isArray(r) && r.length === 2) {
-        const { 0: l, 1: m } = r;
-        a = l(e, m);
-      } else {
-        const l = r.fn, { options: m } = r;
-        a = l(e, m);
-      }
-      if (a !== !0)
-        return n.value = a, !1;
-    }
-    return n.value = "", !0;
-  }, h = y ? A(() => ({
-    blur: (e) => u("blur", e),
-    focus: (e) => u("focus", e),
-    input: (e) => {
-      t.validateOnInput && !o.value && c(e.target.value), u("update:modelValue", e.target.value);
-    },
-    change: (e) => u("change", e)
-  })) : {};
-  return B(() => {
-    i.registerInput(s.value, p, c, g);
-  }), S(() => {
-    i.unregisterInput(s.value);
-  }), {
-    isFirstValidation: o,
-    errorInternal: n,
-    isInsideForm: i.isInsideForm,
-    inputListeners: h,
-    reset: b,
-    validate: c,
-    setError: g
-  };
-};
-v.emits = (t = !0) => t ? ["update:modelValue", "blur", "focus", "input", "change"] : ["update:modelValue"];
-v.props = () => ({
-  modelValue: [String, Number, Boolean, Object, Array],
-  name: String,
-  readonly: Boolean,
-  required: Boolean,
-  validateOnInput: {
-    type: Boolean,
-    default: !0
-  },
-  error: String,
-  rules: {
-    type: Array,
-    default: () => []
-  }
-});
-export {
-  v as useInputtable
-};

package/lib/composables/interactive.js

@@ -1,17 +0,0 @@
-const a = (u) => ({
-  focus: () => {
-    var o, e;
-    return (e = (o = u.value) == null ? void 0 : o.focus) == null ? void 0 : e.call(o);
-  },
-  blur: () => {
-    var o, e;
-    return (e = (o = u.value) == null ? void 0 : o.blur) == null ? void 0 : e.call(o);
-  }
-});
-a.props = () => ({
-  disabled: Boolean,
-  loading: Boolean
-});
-export {
-  a as useInteractive
-};

package/lib/composables/notifications.d.ts

@@ -1 +0,0 @@
-export declare const useNotifications: (key?: symbol | string) => any;

package/lib/composables/theme.js

@@ -1,59 +0,0 @@
-import { inject as P, computed as c, unref as r, useSlots as T } from "vue";
-import { injectThemeKey as $ } from "./keys.js";
-import { useColors as d } from "./colors.js";
-import { useCSS as w } from "./css.js";
-import { mergeRightDeep as D, smartUnref as C, isFunction as h, isObject as j } from "../common/utils.js";
-const U = (s, e = {}, n = {}, l = {}) => {
-  const t = P($, !1), b = c(() => {
-    var o;
-    return (o = r(t)) != null && o[s] ? D(e.classes, r(t)[s].classes || {}) : e.classes;
-  }), f = c(() => {
-    var o;
-    return ((o = r(t)) == null ? void 0 : o.classPrefix) ?? "x-";
-  }), v = c(() => `${f.value}${s}`), m = c(() => {
-    var o;
-    return ((o = r(t)) == null ? void 0 : o.rtl) ?? !1;
-  }), a = T(), i = d(), u = w(s), y = c(() => S(b.value, {
-    props: r(n),
-    slots: a,
-    data: C(l),
-    colors: i,
-    css: u,
-    rtl: r(m)
-  })), O = c(() => {
-    var x;
-    const o = ((x = r(t)) == null ? void 0 : x[s]) || {}, p = {
-      props: r(n),
-      slots: a,
-      data: C(l),
-      colors: i,
-      css: u,
-      rtl: r(m)
-    };
-    return [
-      g(e.styles, p),
-      g(o.styles, p)
-    ];
-  });
-  return {
-    classPrefix: f,
-    className: v,
-    colors: i,
-    classes: y,
-    styles: O,
-    css: u
-  };
-};
-function S(s, e) {
-  const n = {};
-  return Object.keys(s).forEach((l) => {
-    const t = s[l];
-    n[l] = h(t) ? t(e) : j(t) ? S(t, e) : t;
-  }), n;
-}
-function g(s, e) {
-  return h(s) ? s(e) || {} : j(s) ? s : {};
-}
-export {
-  U as useTheme
-};

package/src/components/badge/Badge.theme.ts

@@ -1,23 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { BadgeProps } from './Badge.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<BadgeProps, InternalClasses> {}
-export interface BadgeTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<BadgeProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block',
-  },
-
-  styles({ props, colors, css }) {
-    const color = colors.getPalette(props.color)
-
-    return css.get('bg', color[500])
-  },
-}
-
-export default theme

package/src/components/breadcrumbs/Breadcrumbs.theme.ts

@@ -1,19 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { BreadcrumbsProps } from './Breadcrumbs.vue'
-
-type InternalClasses = 'wrapper' | 'item' | 'lastItem'
-
-interface InternalTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {}
-export interface BreadcrumbsTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<BreadcrumbsProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'flex items-center flex-wrap',
-    item: 'flex items-center',
-    lastItem: 'font-semibold',
-  },
-}
-
-export default theme

package/src/components/button/ButtonGroup.theme.ts

@@ -1,18 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ButtonGroupProps } from './ButtonGroup.vue'
-
-type InternalClasses = 'wrapper'
-type InternalExtraData = { isButtonGroupGroup: boolean; }
-
-interface InternalTheme extends ThemeComponent<ButtonGroupProps, InternalClasses, InternalExtraData> {}
-export interface ButtonGroupTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ButtonGroupProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-flex align-middle relative -space-x-[1px]',
-  },
-}
-
-export default theme

package/src/components/card/Card.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { CardProps } from './Card.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<CardProps, InternalClasses> {}
-export interface CardTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<CardProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props }) => `rounded bg-white dark:bg-gray-800${props.flat ? '' : ' shadow'}`,
-  },
-}
-
-export default theme

package/src/components/collapse/Collapse.theme.ts

@@ -1,21 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { CollapseProps } from './Collapse.vue'
-
-type InternalClasses = 'wrapper' | 'icon' | 'content'
-
-interface InternalTheme extends ThemeComponent<CollapseProps, InternalClasses> {}
-export interface CollapseTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<CollapseProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props }) => `relative flex items-center ${props.icon ?  'flex-row-reverse' : ''} ${props.disabled ? '' : 'cursor-pointer'}`,
-
-    icon: 'absolute top-1/2 transform -translate-y-1/2 right-3',
-
-    content: 'transition-[height] duration-150 overflow-y-hidden',
-  },
-}
-
-export default theme

package/src/components/collapse/index.ts

@@ -1,3 +0,0 @@
-export { default as XCollapse } from './Collapse.vue'
-export type { CollapseProps } from './Collapse.vue'
-export type { CollapseTheme } from './Collapse.theme'

package/src/components/container/Container.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ContainerProps } from './Container.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<ContainerProps, InternalClasses> {}
-export interface ContainerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ContainerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
-  },
-}
-
-export default theme

package/src/components/divider/Divider.theme.ts

@@ -1,21 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { DividerProps } from './Divider.vue'
-
-type InternalClasses = 'wrapper' | 'label' | 'line'
-
-interface InternalTheme extends ThemeComponent<DividerProps, InternalClasses> {}
-export interface DividerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<DividerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
-
-    label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
-
-    line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
-  },
-}
-
-export default theme

package/src/components/drawer/Drawer.theme.ts

@@ -1,19 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { DrawerProps } from './Drawer.vue'
-
-type InternalClasses = 'wrapper' | 'backdrop'
-
-interface InternalTheme extends ThemeComponent<DrawerProps, InternalClasses> {}
-export interface DrawerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<DrawerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
-
-    backdrop: 'duration-150 ease-in-out',
-  },
-}
-
-export default theme

package/src/components/form/Form.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { FormProps } from './Form.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<FormProps, InternalClasses> {}
-export interface FormTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<FormProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme

package/src/components/helpers/InputError.tsx

@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'InputError',
-  props: {
-    error: String,
-    helper: String,
-  },
-  setup(props) {
-    return () => props.error
-      ? <p class="text-sm text-red-500 dark:text-red-400 mt-1">{props.error}</p>
-      : props.helper ? <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{props.helper}</p> : ''
-  },
-})

package/src/components/icon/Icon.theme.ts

@@ -1,26 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { IconProps } from './Icon.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<IconProps, InternalClasses> {}
-export interface IconTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<IconProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props }) => {
-      const classes = 'inline'
-
-      if (props.size === 'xs') return classes + ' h-3 w-3'
-      else if (props.size === 'sm') return classes + ' h-4 w-4'
-      else if (props.size === 'lg') return classes + ' h-6 w-6'
-      else if (props.size === 'xl') return classes + ' h-9 w-9'
-
-      return classes + ' h-5 w-5'
-    },
-  },
-}
-
-export default theme

package/src/components/image/Image.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ImageProps } from './Image.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<ImageProps, InternalClasses> {}
-export interface ImageTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ImageProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme

package/src/components/menu/Menu.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { MenuProps } from './Menu.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<MenuProps, InternalClasses> {}
-export interface MenuTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<MenuProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme

package/src/components/modal/Modal.theme.ts

@@ -1,39 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ModalProps } from './Modal.vue'
-
-type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions'
-
-interface InternalTheme extends ThemeComponent<ModalProps, InternalClasses> {}
-export interface ModalTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ModalProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
-
-    backdrop: 'fixed inset-0 bg-gray-500 dark:bg-black transition-opacity',
-
-    modal: ({ props }) => {
-      let c = 'relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full'
-
-      if (props.size === 'xs') c += ' sm:max-w-xs'
-      else if (props.size === 'sm') c += ' sm:max-w-sm'
-      else if (props.size === 'lg') c += ' sm:max-w-xl'
-      else if (props.size === 'xl') c += ' sm:max-w-3xl'
-      else c += ' sm:max-w-lg'
-
-      return c
-    },
-
-    closeIcon: 'flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer',
-
-    header: 'text-lg font-semibold px-6 py-4 border-b',
-
-    content: 'px-6 py-4',
-
-    actions: 'bg-slate-50 dark:bg-gray-800 p-4',
-  },
-}
-
-export default theme

package/src/components/notifications/Notifications.theme.ts

@@ -1,21 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { NotificationsProps } from './Notifications.vue'
-
-type InternalClasses = 'wrapper' | 'list' | 'item'
-
-interface InternalTheme extends ThemeComponent<NotificationsProps, InternalClasses> {}
-export interface NotificationsTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<NotificationsProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen',
-
-    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
-
-    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100',
-  },
-}
-
-export default theme

package/src/components/popover/Popover.theme.ts

@@ -1,19 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { PopoverProps } from './Popover.vue'
-
-type InternalClasses = 'wrapper' | 'content'
-
-interface InternalTheme extends ThemeComponent<PopoverProps, InternalClasses> {}
-export interface PopoverTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<PopoverProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block relative',
-
-    content: 'max-w-xs',
-  },
-}
-
-export default theme

package/src/components/popover/PopoverContainer.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { PopoverContainerProps } from './PopoverContainer.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<PopoverContainerProps, InternalClasses> {}
-export interface PopoverContainerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<PopoverContainerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800',
-  },
-}
-
-export default theme

package/src/components/scroll/Scroll.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ScrollProps } from './Scroll.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<ScrollProps, InternalClasses> {}
-export interface ScrollTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ScrollProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme