adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

package/components/elements/status-badge/AStatusBadge.vue

@@ -1,105 +1,74 @@
-<script lang="ts" setup>
-type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
-type BadgeView = 'default' | 'inverted' | 'transparent'
-type BadgeSize = 'xs' | 'sm' | 'lg'
-
-type StateType = {
-  [key in BadgeType]?: string
-}
-
-interface ViewType {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-}
-
-interface Props {
-  type?: BadgeType
-  view?: BadgeView
-  size?: BadgeSize
-  point?: boolean
-  customClasses?: string
-}
-
-defineOptions({ name: 'AStatusBadge' })
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'default',
-  size: 'lg',
-  point: false,
-  customClasses: '',
-})
-
-const typeSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
-    success: 'bg-[#00A63E] text-white border-transparent dark:bg-[#00A63E]/30 dark:text-green-100',
-    danger: 'bg-[#E7000B] text-white border-transparent dark:bg-[#E7000B]/30 dark:text-red-100',
-    warning: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100',
-    gray: 'bg-[#4A5565] text-white border-transparent dark:bg-[#4A5565]/30 dark:text-gray-100',
-  },
-  inverted: {
-    primary: 'bg-[#F0F8FF] text-[#068DFF] border-transparent dark:bg-[#068DFF]/10 dark:text-blue-400',
-    success: 'bg-[#DCFCE7] text-[#008236] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
-    danger: 'bg-[#FFE2E2] text-[#C10007] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
-    warning: 'bg-[#FEF3C6] text-[#9A5800] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
-    gray: 'bg-[#F3F4F6] text-[#364153] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
-  },
-  transparent: {
-    primary: 'bg-white border-[#B3DCFF] text-[#0066BD] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
-    success: 'bg-white border-[#7BF1A8] text-[#008236] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
-    danger: 'bg-white border-[#FFA2A2] text-[#C10007] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
-    warning: 'bg-white border-[#FFD230] text-[#9A5800] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
-    gray: 'bg-white border-[#D1D5DC] text-[#364153] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
-  },
-}
-
-const pointSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-white',
-    success: 'bg-white',
-    danger: 'bg-white',
-    warning: 'bg-white',
-    gray: 'bg-white',
-  },
-  inverted: {
-    primary: 'bg-[#068DFF] dark:bg-blue-400',
-    success: 'bg-[#00A63E] dark:bg-green-400',
-    danger: 'bg-[#E7000B] dark:bg-red-400',
-    warning: 'bg-[#E17100] dark:bg-orange-400',
-    gray: 'bg-[#6A7282] dark:bg-gray-300',
-  },
-  transparent: {
-    primary: 'bg-[#068DFF] dark:bg-blue-400',
-    success: 'bg-[#00A63E] dark:bg-green-400',
-    danger: 'bg-[#E7000B] dark:bg-red-400',
-    warning: 'bg-[#E17100] dark:bg-orange-400',
-    gray: 'bg-[#6A7282] dark:bg-gray-300',
-  },
-}
-
-const classes = computed(() =>
-  [
-    'text-body-md rounded-2xl select-none inline-flex gap-[5.5px] justify-center items-center border',
-    typeSwitchValues[props.view][props.type],
-    props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
-    props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
-    props.size === 'lg' ? 'px-3 py-[6px] font-semibold' : '',
-  ])
-
-const pointClasses = computed(() =>
-  [
-    'w-1.5 h-1.5 rounded-full shrink-0',
-    pointSwitchValues[props.view][props.type],
-  ])
-</script>
-
-<template>
-  <div :class="[[classes], customClasses]">
-    <slot name="point">
-      <span v-if="point" :class="pointClasses" />
-    </slot>
-    <slot />
-  </div>
-</template>
+<script lang="ts" setup>
+import {twMerge} from "tailwind-merge";
+
+defineOptions({ name: 'AStatusBadge' })
+
+interface Props {
+  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+  view?: 'default' | 'inverted' | 'transparent'
+  size?:  'xs' | 'sm' | 'lg'
+  customClasses?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  customClasses: ''
+})
+
+const classes = computed(() =>
+  [
+    'text-sm rounded-md select-none inline-flex gap-[5.5px] justify-center items-center',
+    typeSwitchValues[props.view][props.type],
+    props.size === 'xs'? 'px-4 py-[2px] text-xs font-bold' : '',
+    props.size === 'sm'? 'text-xs font-semibold px-4 py-[2px] h-6' : '',
+    props.size === 'lg'? 'px-4 py-[7.5px] font-semibold' : '',
+  ])
+
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:text-gray-900 dark:bg-blue-500',
+    success: 'bg-green-500 text-white dark:text-gray-200 dark:bg-green-400',
+    danger: 'bg-red-500 text-white dark:text-gray-200  ',
+    warning: 'bg-yellow-400 text-white dark:text-gray-200  ',
+    gray: 'bg-deepblue-900 text-white dark:text-gray-200 dark:bg-gray-200/10',
+    orange: 'bg-orange-600 text-white  dark:text-gray-200'
+  },
+  inverted: {
+    primary: 'bg-blue-700/10  text-blue-700 dark:text-blue-500 dark:bg-[#1EABFF1A]',
+    success: 'bg-green-500/20  text-green-500 dark:text-green-400 dark:bg-green-400/20',
+    danger: 'bg-red-500/10 text-red-500  dark:text-red-400 dark:bg-red-400/10',
+    warning: 'bg-yellow-400/10 text-yellow-400',
+    gray: 'bg-deepblue-900/10 text-gray-600 dark:text-gray-200 dark:bg-gray-200/10',
+    orange: 'bg-orange-600/10 text-orange-600'
+  },
+  transparent: {
+    success: 'bg-green-500/10 text-green-500 dark:bg-green-400/10 dark:text-green-400',
+    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400'
+  }
+}
+
+
+
+
+type StateType = {
+  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string
+}
+
+type ViewType = {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+};
+
+
+
+</script>
+<template>
+  <div :class="[[classes], customClasses]">
+    <slot name="point"/>
+    <slot />
+  </div>
+</template>

package/components/elements/table/ATable.vue

@@ -1,93 +1,93 @@
-<script setup lang="ts">
-import { twMerge } from '#adata-ui/utils/twMerge'
-import {ui} from './table.config'
-type Column = {
-  label: string
-  key: string | number
-  class?: string
-}
-type Row = {
-  [key: string]: any
-}
-interface Props {
-  columns: Column[],
-  columnAttribute?: keyof Column
-  rows: Row[]
-  loading?: boolean
-  size?: 'sm' | 'md'
-  classHead?: string
-}
-const props = withDefaults(defineProps<Props>(),{
-  columnAttribute: "label",
-  loading: true,
-  size: 'md',
-  classHead: '',
-})
-
-const {t} = useI18n()
-
-function getRowData (row, rowKey, defaultValue: any = '') {
-  return row[rowKey] ?? defaultValue
-}
-
-</script>
-
-<template>
-  <div :class="ui.wrapper">
-    <table :class="[ui.base, ui.divide]">
-      <thead :class="ui.thead">
-        <tr :class="twMerge(ui.tr.base, classHead)">
-          <th
-            v-for="(column, index) in columns"
-            :key="index"
-            scope="col"
-            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
-          >
-            <slot
-              :name="`${column.key}-header`"
-              :column="column"
-            >
-              <span>{{ t(column[columnAttribute]) }}</span>
-            </slot>
-          </th>
-        </tr>
-        <tr v-if="loading">
-          <td
-            :colspan="0"
-            :class="ui.progress.wrapper"
-          />
-        </tr>
-      </thead>
-      <tbody :class="ui.tbody">
-        <slot
-          name="extra_row-top"
-          :base-class="{row: ui.tr.base, td: [ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size]}"
-        />
-        <tr
-          v-for="(row, index) in rows"
-          :key="index"
-          :class="twMerge(ui.tr.base, row?.class)"
-        >
-          <td
-            v-for="(column, subIndex) in columns"
-            :key="subIndex"
-            :class="[ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size, column.class]"
-          >
-            <slot
-              :name="`${column.key}-data`"
-              :column="column"
-              :row="row"
-              :index="index"
-            >
-              {{ getRowData(row, column.key) }}
-            </slot>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import {ui} from './table.config'
+import { twMerge } from 'tailwind-merge'
+type Column = {
+  label: string
+  key: string | number
+  class?: string
+}
+type Row = {
+  [key: string]: any
+}
+interface Props {
+  columns: Column[],
+  columnAttribute?: keyof Column
+  rows: Row[]
+  loading?: boolean
+  size?: 'sm' | 'md'
+  classHead?: string
+}
+const props = withDefaults(defineProps<Props>(),{
+  columnAttribute: "label",
+  loading: true,
+  size: 'md',
+  classHead: '',
+})
+
+const {t} = useI18n()
+
+function getRowData (row, rowKey, defaultValue: any = '') {
+  return row[rowKey] ?? defaultValue
+}
+
+</script>
+
+<template>
+  <div :class="ui.wrapper">
+    <table :class="[ui.base, ui.divide]">
+      <thead :class="ui.thead">
+        <tr :class="twMerge(ui.tr.base, classHead)">
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            scope="col"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
+          >
+            <slot
+              :name="`${column.key}-header`"
+              :column="column"
+            >
+              <span>{{ t(column[columnAttribute]) }}</span>
+            </slot>
+          </th>
+        </tr>
+        <tr v-if="loading">
+          <td
+            :colspan="0"
+            :class="ui.progress.wrapper"
+          />
+        </tr>
+      </thead>
+      <tbody :class="ui.tbody">
+        <slot
+          name="extra_row-top"
+          :base-class="{row: ui.tr.base, td: [ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size]}"
+        />
+        <tr
+          v-for="(row, index) in rows"
+          :key="index"
+          :class="twMerge(ui.tr.base, row?.class)"
+        >
+          <td
+            v-for="(column, subIndex) in columns"
+            :key="subIndex"
+            :class="[ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size, column.class]"
+          >
+            <slot
+              :name="`${column.key}-data`"
+              :column="column"
+              :row="row"
+              :index="index"
+            >
+              {{ getRowData(row, column.key) }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/table/table.config.ts

@@ -1,32 +1,32 @@
-export const ui = {
-  wrapper: 'relative overflow-x-auto rounded bg-white dark:bg-gray-900',
-  base: 'min-w-full table-fixed ',
-  divide: '',
-  thead: 'relative bg-gray-100 dark:bg-[#E3E5E81A]',
-  tbody: '',
-  tr: {
-    base: 'even:bg-gray-50 dark:even:bg-[#E3E5E81A]',
-    selected: 'bg-gray-50 dark:bg-gray-800/50',
-    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
-  },
-  th: {
-    base: 'text-left rtl:text-right',
-    padding: 'px-4 py-3.5',
-    color: 'text-deepblue-900 dark:text-gray-200',
-    font: 'font-semibold',
-    size: 'text-body-sm',
-  },
-  td: {
-    base: '',
-    padding: {
-      sm: 'px-3 py-2',
-      md: 'px-4 py-4'
-    },
-    color: 'text-deepblue-900 dark:text-gray-200',
-    font: '',
-    size: 'text-body-md',
-  },
-  progress: {
-    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
-  },
-}
+export const ui = {
+  wrapper: 'relative overflow-x-auto rounded bg-white dark:bg-gray-900',
+  base: 'min-w-full table-fixed ',
+  divide: '',
+  thead: 'relative bg-gray-100 dark:bg-[#E3E5E81A]',
+  tbody: '',
+  tr: {
+    base: 'even:bg-gray-50 dark:even:bg-[#E3E5E81A]',
+    selected: 'bg-gray-50 dark:bg-gray-800/50',
+    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
+  },
+  th: {
+    base: 'text-left rtl:text-right',
+    padding: 'px-4 py-3.5',
+    color: 'text-deepblue-900 dark:text-gray-200',
+    font: 'font-semibold',
+    size: 'text-xs',
+  },
+  td: {
+    base: '',
+    padding: {
+      sm: 'px-3 py-2',
+      md: 'px-4 py-4'
+    },
+    color: 'text-deepblue-900 dark:text-gray-200',
+    font: '',
+    size: 'text-sm',
+  },
+  progress: {
+    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
+  },
+}