@indielayer/ui 0.0.0-dev-20240125104319 → 0.0.0-dev-20240127005325

package/src/components/table/theme/TableRow.carbon.theme.ts

@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+      } else {
+        classes.push('border-b border-gray-200 dark:border-gray-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/tag/Tag.vue

@@ -13,7 +13,7 @@ const tagProps = {
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
 
-type InternalClasses = 'wrapper' | 'loadingWrapper'
+type InternalClasses = 'wrapper'
 export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {}
 
 export default {
@@ -52,13 +52,13 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
 <template>
   <component
     :is="tag"
-    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"
     :style="styles"
     :class="
       [
         className,
         classes.wrapper,
-        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)]',
+        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >
@@ -70,7 +70,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        class="ml-1.5 cursor-pointer hover:text-gray-700 transition-colors duration-150"
         @click="(e: Event) => $emit('remove', e)"
       />
     </span>

package/src/components/tag/theme/Tag.base.theme.ts

@@ -13,19 +13,19 @@ const theme: TagTheme = {
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      bg: color[100],
+      bg: color[200],
       text: color[800],
       border: color[800],
       dark: {
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },

package/src/components/tag/theme/Tag.carbon.theme.ts

@@ -5,15 +5,13 @@ const theme: TagTheme = {
     wrapper: ({ props }) => {
       let c = 'inline-flex items-center leading-none max-w-full '
 
-      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-1 text-xs'
+      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-0.5 text-xs'
       else if (props.size === 'lg') c += ' px-4 py-3'
       else if (props.size === 'xl') c += ' px-5 py-5 text-lg'
-      else c += ' px-3 py-2 text-sm'
+      else c += ' px-3 py-1 text-sm'
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
@@ -24,8 +22,9 @@ const theme: TagTheme = {
       text: color[800],
       border: color[800],
       dark: {
-        bg: color[700],
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },

package/src/theme.ts

@@ -43,6 +43,9 @@ import type {
   TabGroupTheme,
   TableTheme,
   TableCellTheme,
+  TableHeadTheme,
+  TableHeaderTheme,
+  TableRowTheme,
   TagTheme,
   TextareaTheme,
   ToggleTheme,
@@ -92,6 +95,9 @@ export type ComponentThemes = {
   TabGroup: TabGroupTheme;
   Table: TableTheme;
   TableCell: TableCellTheme;
+  TableHead: TableHeadTheme;
+  TableHeader: TableHeaderTheme;
+  TableRow: TableRowTheme;
   Tag: TagTheme;
   Textarea: TextareaTheme;
   Toggle: ToggleTheme;

package/src/themes/base/components.ts

@@ -41,6 +41,9 @@ 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/carbon/components.ts

@@ -41,6 +41,9 @@ 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 '0.0.0-dev-20240125104319'
+export default '0.0.0-dev-20240127005325'

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/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>
-    )
-  },
-})