@gameap/ui 1.1.1 → 1.2.0

package/components/GCard.vue

@@ -0,0 +1,53 @@
+<template>
+  <n-card
+    v-bind="mergedProps"
+    v-on="$attrs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}" />
+    </template>
+  </n-card>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+import { NCard } from 'naive-ui'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'small'
+  },
+  bordered: {
+    type: Boolean,
+    default: true
+  },
+  segmented: {
+    type: [Boolean, Object],
+    default: () => ({ content: true, footer: 'soft' })
+  },
+  headerClass: {
+    type: String,
+    default: 'g-card-header'
+  }
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  title: props.title,
+  size: props.size,
+  bordered: props.bordered,
+  segmented: props.segmented,
+  headerClass: props.headerClass,
+  ...attrs
+}))
+</script>

package/components/GDataTable.vue

@@ -0,0 +1,63 @@
+<template>
+  <n-data-table
+    v-bind="mergedProps"
+    v-on="$attrs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}" />
+    </template>
+  </n-data-table>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+import { NDataTable } from 'naive-ui'
+
+const props = defineProps({
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  singleLine: {
+    type: Boolean,
+    default: true
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  pagination: {
+    type: [Object, Boolean],
+    default: false
+  },
+  remote: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  bordered: props.bordered,
+  singleLine: props.singleLine,
+  columns: props.columns,
+  data: props.data,
+  loading: props.loading,
+  pagination: props.pagination,
+  remote: props.remote,
+  ...attrs
+}))
+</script>

package/components/GDivider.vue

@@ -0,0 +1,9 @@
+<template>
+  <n-divider v-bind="$attrs">
+    <slot />
+  </n-divider>
+</template>
+
+<script setup>
+import { NDivider } from 'naive-ui'
+</script>

package/components/GEmpty.vue

@@ -0,0 +1,38 @@
+<template>
+  <n-empty
+    v-bind="mergedProps"
+    v-on="$attrs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}" />
+    </template>
+  </n-empty>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+import { NEmpty } from 'naive-ui'
+
+const props = defineProps({
+  description: {
+    type: String,
+    default: undefined
+  },
+  size: {
+    type: String,
+    default: undefined
+  }
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  ...(props.description && { description: props.description }),
+  ...(props.size && { size: props.size }),
+  ...attrs
+}))
+</script>

package/components/GInput.vue

@@ -0,0 +1,66 @@
+<template>
+  <n-input
+    v-bind="mergedProps"
+    v-on="$attrs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}" />
+    </template>
+  </n-input>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+import { NInput } from 'naive-ui'
+
+const props = defineProps({
+  value: {
+    type: [String, Array],
+    default: undefined
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: undefined
+  }
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const emit = defineEmits(['update:value'])
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  value: props.value,
+  'onUpdate:value': (val) => emit('update:value', val),
+  type: props.type,
+  placeholder: props.placeholder,
+  disabled: props.disabled,
+  readonly: props.readonly,
+  clearable: props.clearable,
+  ...(props.size && { size: props.size }),
+  ...attrs
+}))
+</script>

package/components/GModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <n-modal
+    v-bind="mergedProps"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}" />
+    </template>
+  </n-modal>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+import { NModal } from 'naive-ui'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  preset: {
+    type: String,
+    default: 'card'
+  },
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  segmented: {
+    type: Object,
+    default: () => ({ content: 'soft', footer: 'soft' })
+  }
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const emit = defineEmits(['update:show'])
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  show: props.show,
+  'onUpdate:show': (value) => emit('update:show', value),
+  preset: props.preset,
+  bordered: props.bordered,
+  title: props.title,
+  segmented: props.segmented,
+  class: 'custom-card',
+  ...attrs
+}))
+</script>

package/components/GSwitch.vue

@@ -0,0 +1,46 @@
+<template>
+  <n-switch
+    v-bind="mergedProps"
+    v-on="$attrs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}" />
+    </template>
+  </n-switch>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+import { NSwitch } from 'naive-ui'
+
+const props = defineProps({
+  value: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: undefined
+  }
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const emit = defineEmits(['update:value'])
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  value: props.value,
+  'onUpdate:value': (val) => emit('update:value', val),
+  disabled: props.disabled,
+  ...(props.size && { size: props.size }),
+  ...attrs
+}))
+</script>

package/components/GTable.vue

@@ -0,0 +1,41 @@
+<template>
+  <n-table
+    v-bind="mergedProps"
+    v-on="$attrs"
+  >
+    <slot />
+  </n-table>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+import { NTable } from 'naive-ui'
+
+const props = defineProps({
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  singleLine: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    default: undefined
+  }
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  bordered: props.bordered,
+  singleLine: props.singleLine,
+  ...(props.size && { size: props.size }),
+  ...attrs
+}))
+</script>

package/index.js

@@ -8,6 +8,14 @@ export { default as GMenuButton } from './components/GMenuButton.vue'
 export { default as GMenuItems } from './components/GMenuItems.vue'
 export { default as GMenuItem } from './components/GMenuItem.vue'
 export { default as GIcon } from './components/GIcon.vue'
+export { default as GDataTable } from './components/GDataTable.vue'
+export { default as GModal } from './components/GModal.vue'
+export { default as GInput } from './components/GInput.vue'
+export { default as GCard } from './components/GCard.vue'
+export { default as GTable } from './components/GTable.vue'
+export { default as GEmpty } from './components/GEmpty.vue'
+export { default as GSwitch } from './components/GSwitch.vue'
+export { default as GDivider } from './components/GDivider.vue'
 
 export { registerIcons, iconRegistry, getIcon, hasIcon } from './icons/registry.js'
 export { defaultIconMap } from './icons/iconMap.js'
@@ -22,6 +30,14 @@ import GMenuButton from './components/GMenuButton.vue'
 import GMenuItems from './components/GMenuItems.vue'
 import GMenuItem from './components/GMenuItem.vue'
 import GIcon from './components/GIcon.vue'
+import GDataTable from './components/GDataTable.vue'
+import GModal from './components/GModal.vue'
+import GInput from './components/GInput.vue'
+import GCard from './components/GCard.vue'
+import GTable from './components/GTable.vue'
+import GEmpty from './components/GEmpty.vue'
+import GSwitch from './components/GSwitch.vue'
+import GDivider from './components/GDivider.vue'
 
 export function install(app) {
   app.component('GBreadcrumbs', GBreadcrumbs)
@@ -34,6 +50,14 @@ export function install(app) {
   app.component('GMenuItems', GMenuItems)
   app.component('GMenuItem', GMenuItem)
   app.component('GIcon', GIcon)
+  app.component('GDataTable', GDataTable)
+  app.component('GModal', GModal)
+  app.component('GInput', GInput)
+  app.component('GCard', GCard)
+  app.component('GTable', GTable)
+  app.component('GEmpty', GEmpty)
+  app.component('GSwitch', GSwitch)
+  app.component('GDivider', GDivider)
 }
 
 export default { install }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gameap/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",