@indielayer/ui 1.3.0 → 1.5.0

package/src/composables/useInputtable.ts

@@ -1,6 +1,6 @@
 import type { MaybeRef, PropType } from 'vue'
 import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
-import { injectFormKey } from './keys'
+import { injectFormGroupKey, injectFormKey } from './keys'
 
 export interface XFormInputMethods {
   focus: () => void;
@@ -11,6 +11,7 @@ export interface XFormInputMethods {
 export const useInputtable = (props: any, { focus, emit, withListeners = true }: { focus: () => void; emit: any; withListeners?: boolean; }) => {
   const isFirstValidation = ref(true)
   const errorInternal = ref(props.error)
+  const hideFooterInternal = ref(props.hideFooter)
 
   const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
   const nameInternal = ref(name)
@@ -18,6 +19,18 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   watch(() => props.error, (val) => { errorInternal.value = val })
   watch(() => props.name, (val) => { if (val) nameInternal.value = val })
 
+  const formGroup = inject(injectFormGroupKey, {
+    registerInputGroup: () => {},
+    unregisterInputGroup: () => {},
+    setValue: () => {},
+    isInsideFormGroup: false,
+    value: undefined,
+  })
+
+  if (formGroup.isInsideFormGroup) {
+    hideFooterInternal.value = true
+  }
+
   const form = inject(injectFormKey, {
     registerInput: () => {},
     unregisterInput: () => {},
@@ -101,19 +114,31 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   }
 
   onMounted(() => {
-    form.registerInput(nameInternal.value, focus, validate, setError)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.registerInputGroup(nameInternal.value, focus)
+    } else {
+      form.registerInput(nameInternal.value, focus, validate, setError)
+    }
   })
 
   onUnmounted(() => {
-    form.unregisterInput(nameInternal.value)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.unregisterInputGroup(nameInternal.value)
+    } else {
+      form.unregisterInput(nameInternal.value)
+    }
+
   })
 
   return {
     isFirstValidation,
     errorInternal,
+    hideFooterInternal,
     isFocused,
     isInsideForm: form.isInsideForm,
+    isInsideFormGroup: formGroup.isInsideFormGroup,
     inputListeners,
+    formGroup,
     reset,
     validate,
     setError,
@@ -128,6 +153,7 @@ useInputtable.emits = (withListeners = true): string[] => {
 
 useInputtable.props = () => ({
   modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+  id: String,
   name: String,
   readonly: Boolean,
   required: Boolean,
@@ -135,10 +161,13 @@ useInputtable.props = () => ({
     type: Boolean,
     default: true,
   },
+  label: String,
+  helper: String,
   error: String,
   hideFooter: Boolean,
   rules: {
     type: Array,
     default: () => [],
   },
+  tooltip: String,
 } as const)

package/src/theme.ts

@@ -1,5 +1,7 @@
 import type { ColorLibrary } from './composables/useColors'
 import type {
+  AccordionTheme,
+  AccordionItemTheme,
   AlertTheme,
   AvatarTheme,
   BadgeTheme,
@@ -10,11 +12,11 @@ import type {
   CarouselTheme,
   CarouselSlideTheme,
   CheckboxTheme,
-  CollapseTheme,
   ContainerTheme,
   DividerTheme,
   DrawerTheme,
   FormTheme,
+  FormGroupTheme,
   IconTheme,
   ImageTheme,
   InputTheme,
@@ -36,16 +38,22 @@ import type {
   SelectTheme,
   SkeletonTheme,
   SliderTheme,
+  StepperTheme,
   TabTheme,
   TabGroupTheme,
   TableTheme,
   TableCellTheme,
+  TableHeadTheme,
+  TableHeaderTheme,
+  TableRowTheme,
   TagTheme,
   TextareaTheme,
   ToggleTheme,
 } from './components'
 
 export type ComponentThemes = {
+  Accordion: AccordionTheme;
+  AccordionItem: AccordionItemTheme;
   Alert: AlertTheme;
   Avatar: AvatarTheme;
   Badge: BadgeTheme;
@@ -56,11 +64,11 @@ export type ComponentThemes = {
   Carousel: CarouselTheme;
   CarouselSlide: CarouselSlideTheme;
   Checkbox: CheckboxTheme;
-  Collapse: CollapseTheme;
   Container: ContainerTheme;
   Divider: DividerTheme;
   Drawer: DrawerTheme;
   Form: FormTheme;
+  FormGroup: FormGroupTheme;
   Icon: IconTheme;
   Image: ImageTheme;
   Input: InputTheme;
@@ -82,10 +90,14 @@ export type ComponentThemes = {
   Select: SelectTheme;
   Skeleton: SkeletonTheme;
   Slider: SliderTheme;
+  Stepper: StepperTheme;
   Tab: TabTheme;
   TabGroup: TabGroupTheme;
   Table: TableTheme;
   TableCell: TableCellTheme;
+  TableHead: TableHeadTheme;
+  TableHeader: TableHeaderTheme;
+  TableRow: TableRowTheme;
   Tag: TagTheme;
   Textarea: TextareaTheme;
   Toggle: ToggleTheme;

package/src/themes/base/components.ts

@@ -1,3 +1,5 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.base.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.base.theme'
 export { default as Alert } from '../../components/alert/theme/Alert.base.theme'
 export { default as Avatar } from '../../components/avatar/theme/Avatar.base.theme'
 export { default as Badge } from '../../components/badge/theme/Badge.base.theme'
@@ -8,11 +10,11 @@ export { default as Card } from '../../components/card/theme/Card.base.theme'
 export { default as Carousel } from '../../components/carousel/theme/Carousel.base.theme'
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.base.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.base.theme'
-export { default as Collapse } from '../../components/collapse/theme/Collapse.base.theme'
 export { default as Container } from '../../components/container/theme/Container.base.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.base.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.base.theme'
 export { default as Form } from '../../components/form/theme/Form.base.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.base.theme'
 export { default as Icon } from '../../components/icon/theme/Icon.base.theme'
 export { default as Image } from '../../components/image/theme/Image.base.theme'
 export { default as Input } from '../../components/input/theme/Input.base.theme'
@@ -34,10 +36,14 @@ export { default as Scroll } from '../../components/scroll/theme/Scroll.base.the
 export { default as Select } from '../../components/select/theme/Select.base.theme'
 export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.base.theme'
 export { default as Slider } from '../../components/slider/theme/Slider.base.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.base.theme'
 export { default as Tab } from '../../components/tab/theme/Tab.base.theme'
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.base.theme'
 export { default as Table } from '../../components/table/theme/Table.base.theme'
 export { default as TableCell } from '../../components/table/theme/TableCell.base.theme'
+export { default as TableHead } from '../../components/table/theme/TableHead.base.theme'
+export { default as TableHeader } from '../../components/table/theme/TableHeader.base.theme'
+export { default as TableRow } from '../../components/table/theme/TableRow.base.theme'
 export { default as Tag } from '../../components/tag/theme/Tag.base.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme'

package/src/themes/base/index.ts

@@ -4,9 +4,6 @@ import rawStyles from './styles.css?raw'
 
 const theme: UITheme = {
   name: 'Base',
-  colors: {
-    primary: { '50': '#ecfdf5', '100': '#d1fae5', '200': '#a7f3d0', '300': '#6ee7b7', '400': '#34d399', '500': '#10b981', '600': '#059669', '700': '#047857', '800': '#065f46', '900': '#064e3b', '950': '#022c22' },
-  },
   styles: `${rawStyles}`,
   classPrefix: 'x-',
   components,

package/src/themes/base/styles.css

@@ -9,6 +9,10 @@ html.dark {
   background-color: #111827;
 }
 
+body {
+  font-size: 14px;
+}
+
 *,
 ::before,
 ::after {

package/src/themes/carbon/components.ts

@@ -1,3 +1,5 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.carbon.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.carbon.theme'
 export { default as Alert } from '../../components/alert/theme/Alert.carbon.theme'
 export { default as Avatar } from '../../components/avatar/theme/Avatar.carbon.theme'
 export { default as Badge } from '../../components/badge/theme/Badge.carbon.theme'
@@ -8,11 +10,11 @@ export { default as Card } from '../../components/card/theme/Card.carbon.theme'
 export { default as Carousel } from '../../components/carousel/theme/Carousel.carbon.theme'
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.carbon.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.carbon.theme'
-export { default as Collapse } from '../../components/collapse/theme/Collapse.carbon.theme'
 export { default as Container } from '../../components/container/theme/Container.carbon.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.carbon.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.carbon.theme'
 export { default as Form } from '../../components/form/theme/Form.carbon.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.carbon.theme'
 export { default as Icon } from '../../components/icon/theme/Icon.carbon.theme'
 export { default as Image } from '../../components/image/theme/Image.carbon.theme'
 export { default as Input } from '../../components/input/theme/Input.carbon.theme'
@@ -34,10 +36,14 @@ export { default as Scroll } from '../../components/scroll/theme/Scroll.carbon.t
 export { default as Select } from '../../components/select/theme/Select.carbon.theme'
 export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.carbon.theme'
 export { default as Slider } from '../../components/slider/theme/Slider.carbon.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.carbon.theme'
 export { default as Tab } from '../../components/tab/theme/Tab.carbon.theme'
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.carbon.theme'
 export { default as Table } from '../../components/table/theme/Table.carbon.theme'
 export { default as TableCell } from '../../components/table/theme/TableCell.carbon.theme'
+export { default as TableHead } from '../../components/table/theme/TableHead.carbon.theme'
+export { default as TableHeader } from '../../components/table/theme/TableHeader.carbon.theme'
+export { default as TableRow } from '../../components/table/theme/TableRow.carbon.theme'
 export { default as Tag } from '../../components/tag/theme/Tag.carbon.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.carbon.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.carbon.theme'

package/src/version.ts

@@ -1 +1 @@
-export default '1.3.0'
+export default '1.5.0'

package/volar.d.ts

@@ -1,5 +1,7 @@
 declare module 'vue' {
   export interface GlobalComponents {
+    XAccordion: typeof import('@indielayer/ui')['XAccordion']
+    XAccordionItem: typeof import('@indielayer/ui')['XAccordionItem']
     XAlert: typeof import('@indielayer/ui')['XAlert']
     XAvatar: typeof import('@indielayer/ui')['XAvatar']
     XBadge: typeof import('@indielayer/ui')['XBadge']
@@ -10,15 +12,16 @@ declare module 'vue' {
     XCarousel: typeof import('@indielayer/ui')['XCarousel']
     XCarouselSlide: typeof import('@indielayer/ui')['XCarouselSlide']
     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']
+    XFormGroup: typeof import('@indielayer/ui')['XFormGroup']
     XIcon: typeof import('@indielayer/ui')['XIcon']
     XImage: typeof import('@indielayer/ui')['XImage']
     XInput: typeof import('@indielayer/ui')['XInput']
     XInputFooter: typeof import('@indielayer/ui')['XInputFooter']
+    XLabel: typeof import('@indielayer/ui')['XLabel']
     XLink: typeof import('@indielayer/ui')['XLink']
     XLoader: typeof import('@indielayer/ui')['XLoader']
     XMenu: typeof import('@indielayer/ui')['XMenu']
@@ -37,6 +40,7 @@ declare module 'vue' {
     XSlider: typeof import('@indielayer/ui')['XSlider']
     XSpacer: typeof import('@indielayer/ui')['XSpacer']
     XSpinner: typeof import('@indielayer/ui')['XSpinner']
+    XStepper: typeof import('@indielayer/ui')['XStepper']
     XTable: typeof import('@indielayer/ui')['XTable']
     XTableBody: typeof import('@indielayer/ui')['XTableBody']
     XTableCell: typeof import('@indielayer/ui')['XTableCell']
@@ -49,6 +53,7 @@ declare module 'vue' {
     XTextarea: typeof import('@indielayer/ui')['XTextarea']
     XThemeProvider: typeof import('@indielayer/ui')['XThemeProvider']
     XToggle: typeof import('@indielayer/ui')['XToggle']
+    XToggleTip: typeof import('@indielayer/ui')['XToggleTip']
     XTooltip: typeof import('@indielayer/ui')['XTooltip']
   }
 }

package/lib/components/collapse/Collapse.vue.js

@@ -1,131 +0,0 @@
-import { defineComponent as P, ref as f, watch as V, openBlock as i, createBlock as v, resolveDynamicComponent as z, normalizeStyle as A, unref as a, normalizeClass as l, withCtx as m, createElementVNode as r, renderSlot as d, createElementBlock as h, createCommentVNode as y, createVNode as D, Transition as H, withDirectives as I, vShow as M } from "vue";
-import { useTheme as X } from "../../composables/useTheme.js";
-import { useColors as j } from "../../composables/useColors.js";
-import q from "../icon/Icon.vue.js";
-const F = { class: "flex-1 overflow-hidden" }, G = {
-  key: 1,
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  fill: "none",
-  role: "presentation",
-  class: "stroke-2 w-5 h-5"
-}, J = /* @__PURE__ */ r("path", { d: "M19 9l-7 7-7-7" }, null, -1), K = [
-  J
-], O = {
-  ...j.props(),
-  tag: {
-    type: String,
-    default: "div"
-  },
-  disabled: Boolean,
-  expanded: Boolean,
-  showIcon: Boolean,
-  icon: String
-}, Q = { name: "XCollapse" }, Z = /* @__PURE__ */ P({
-  ...Q,
-  props: O,
-  emits: ["expand"],
-  setup(g, { expose: x, emit: k }) {
-    const s = g, w = k, t = f(!s.expanded), o = f(!0);
-    V(() => s.expanded, () => {
-      t.value = !s.expanded;
-    });
-    function C(e) {
-      o.value && (e.style.height = "0px");
-    }
-    function _(e, n) {
-      o.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
-        e.style.height = `${e.scrollHeight}px`;
-      }, 1)) : n();
-    }
-    function B(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
-    }
-    function E(e) {
-      o.value && (e.style.height = `${e.scrollHeight}px`);
-    }
-    function $(e, n) {
-      o.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
-        e.style.height = "0px";
-      }, 1)) : n();
-    }
-    function b(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
-    }
-    function c(e = !0) {
-      o.value = e, t.value = !1;
-    }
-    function L(e = !0) {
-      o.value = e, t.value = !0;
-    }
-    function p() {
-      s.disabled || (t.value = !t.value);
-    }
-    function S(e = !0) {
-      c(e), w("expand");
-    }
-    const { styles: N, classes: u, className: T } = X("Collapse", {}, s);
-    return x({ toggle: p, open: c, close: L }), (e, n) => (i(), v(z(e.tag), {
-      style: A(a(N)),
-      class: l(a(T)),
-      "aria-disabled": e.disabled,
-      "aria-expanded": t.value ? "false" : "true"
-    }, {
-      default: m(() => [
-        r("div", {
-          class: l(a(u).wrapper),
-          onClick: p
-        }, [
-          r("div", F, [
-            d(e.$slots, "default", { collapsed: t.value })
-          ]),
-          e.showIcon ? (i(), h("div", {
-            key: 0,
-            class: l(a(u).icon)
-          }, [
-            r("span", {
-              class: l(["flex transform transition-transform duration-150", [
-                {
-                  "rotate-180": !t.value,
-                  "text-gray-300": e.disabled
-                }
-              ]])
-            }, [
-              e.icon ? (i(), v(q, {
-                key: 0,
-                icon: e.icon
-              }, null, 8, ["icon"])) : (i(), h("svg", G, K))
-            ], 2)
-          ], 2)) : y("", !0)
-        ], 2),
-        e.$slots.summary ? d(e.$slots, "summary", { key: 0 }) : y("", !0),
-        D(H, {
-          onBeforeEnter: C,
-          onEnter: _,
-          onAfterEnter: B,
-          onBeforeLeave: E,
-          onLeave: $,
-          onAfterLeave: b
-        }, {
-          default: m(() => [
-            I(r("div", {
-              class: l(a(u).content)
-            }, [
-              d(e.$slots, "content", {
-                expand: S,
-                collapsed: t.value
-              })
-            ], 2), [
-              [M, !t.value]
-            ])
-          ]),
-          _: 3
-        })
-      ]),
-      _: 3
-    }, 8, ["style", "class", "aria-disabled", "aria-expanded"]));
-  }
-});
-export {
-  Z as default
-};

package/lib/components/collapse/Collapse.vue2.js

@@ -1,4 +0,0 @@
-import f from "./Collapse.vue.js";
-export {
-  f as default
-};

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

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

package/lib/components/collapse/theme/Collapse.base.theme.d.ts

@@ -1,3 +0,0 @@
-import type { CollapseTheme } from '../Collapse.vue';
-declare const theme: CollapseTheme;
-export default theme;

package/lib/components/collapse/theme/Collapse.base.theme.js

@@ -1,10 +0,0 @@
-const t = {
-  classes: {
-    wrapper: ({ props: e }) => `relative flex items-center ${e.icon ? "flex-row-reverse" : ""} ${e.disabled ? "" : "cursor-pointer"}`,
-    icon: "absolute top-1/2 transform -translate-y-1/2 right-3",
-    content: "transition-[height] duration-150 overflow-y-hidden"
-  }
-}, r = t;
-export {
-  r as default
-};

package/lib/components/collapse/theme/Collapse.carbon.theme.d.ts

@@ -1,3 +0,0 @@
-import type { CollapseTheme } from '../Collapse.vue';
-declare const theme: CollapseTheme;
-export default theme;

package/lib/components/table/TableHead.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/lib/components/table/TableHead.js

@@ -1,19 +0,0 @@
-import { defineComponent as r, createVNode as t } from "vue";
-const o = /* @__PURE__ */ r({
-  name: "XTableHead",
-  setup(d, {
-    slots: e
-  }) {
-    return () => {
-      var a;
-      return t("thead", {
-        class: "align-bottom"
-      }, [t("tr", {
-        class: "text-sm text-gray-600 dark:text-gray-400 border-b"
-      }, [(a = e.default) == null ? void 0 : a.call(e)])]);
-    };
-  }
-});
-export {
-  o as default
-};

package/src/components/collapse/index.ts

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

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

@@ -1,13 +0,0 @@
-import type { CollapseTheme } from '../Collapse.vue'
-
-const theme: CollapseTheme = {
-  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/theme/Collapse.carbon.theme.ts

@@ -1,7 +0,0 @@
-import type { CollapseTheme } from '../Collapse.vue'
-
-import BaseTheme from './Collapse.base.theme'
-
-const theme: CollapseTheme = BaseTheme
-
-export default theme

package/src/components/table/TableHead.tsx

@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'XTableHead',
-  setup(props, { slots }) {
-    return () => (
-      <thead class="align-bottom">
-        <tr class="text-sm text-gray-600 dark:text-gray-400 border-b">
-          {slots.default?.()}
-        </tr>
-      </thead>
-    )
-  },
-})