Skip to content

Commit

Permalink
Merge pull request #39 from qianmoQ/feature-dev
Browse files Browse the repository at this point in the history 
[Core] Support on-demand import
  • Loading branch information
@qianmoQ
qianmoQ authored Oct 15, 2024
2 parents c64f747 + e990fd9 commit f09232c
Show file tree
Hide file tree
Showing 15 changed files with 466 additions and 256 deletions.
360 changes: 284 additions & 76 deletions package-lock.json
View file

Large diffs are not rendered by default.

28 changes: 20 additions & 8 deletions packages/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { App } from 'vue'
import IButton from '@/ui/button'
import ICard from '@/ui/card'
import IInput from '@/ui/input'
import IModal from '@/ui/modal'
import ShadcnButton from '@/ui/button'
import ShadcnCard from '@/ui/card'
import ShadcnInput from '@/ui/input'
import ShadcnModal from '@/ui/modal'

let components = [
IButton,
ICard,
IInput,
IModal
ShadcnButton,
ShadcnCard,
ShadcnInput,
ShadcnModal
]

const install = (Vue: App) => {
Expand All @@ -24,4 +24,16 @@ if (typeof windowObj !== 'undefined' && windowObj.Vue) {
install(vm)
}

// Auto import css
if (typeof window !== 'undefined') {
import('../dist/view-shadcn-ui.min.css')
}

// Support on-demand import
export { default as ShadcnButton } from '@/ui/button'
export { default as ShadcnCard } from '@/ui/card'
export { default as ShadcnInput } from '@/ui/input'
export { default as ShadcnModal } from '@/ui/modal'

// Support global import
export default install
0 src/ui/button/IButton.vue → src/ui/button/ShadcnButton.vue
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions src/ui/button/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import IButton from './IButton.vue'
import ShadcnButton from './ShadcnButton.vue'

export default IButton
export default ShadcnButton
0 src/ui/card/ICard.vue → src/ui/card/ShadcnCard.vue
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions src/ui/card/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import ICard from './ICard.vue'
import ShadcnCard from './ShadcnCard.vue'

export default ICard
export default ShadcnCard
0 src/ui/input/IInput.vue → src/ui/input/ShadcnInput.vue
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions src/ui/input/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import IInput from './IInput.vue'
import ShadcnInput from './ShadcnInput.vue'

export default IInput
export default ShadcnInput
6 changes: 3 additions & 3 deletions src/ui/modal/IModal.vue → src/ui/modal/ShadcnModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<AlertDialogFooter class="border-t p-2 flex">
<slot v-if="$slots.footer" name="footer"/>
<div class="space-x-2" v-else>
<IButton type="danger" @click="onCancel">{{ cancelText }}</IButton>
<IButton @click="onOk">{{ okText }}</IButton>
<ShadcnButton type="danger" @click="onCancel">{{ cancelText }}</ShadcnButton>
<ShadcnButton @click="onOk">{{ okText }}</ShadcnButton>
</div>
</AlertDialogFooter>
</AlertDialogContent>
Expand All @@ -32,8 +32,8 @@

<script setup lang="ts">
import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
import IButton from '@/ui/button'
import { cn } from '@/lib/utils.ts'
import ShadcnButton from '@/ui/button'
const validateWidthHeight = (value: number) => {
return value >= 10 && value <= 100 && value % 10 === 0
Expand Down
4 changes: 2 additions & 2 deletions src/ui/modal/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import IModal from './IModal.vue'
import ShadcnModal from './ShadcnModal.vue'

export default IModal
export default ShadcnModal
122 changes: 59 additions & 63 deletions src/views/pages/components/ButtonHome.vue
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,125 @@
<template>
<div class="flex w-full flex-col gap-4 md:gap-8 md:p-8 lg:grid lg:grid-cols-4">
<ICard body-class="pt-3">
<ShadcnCard body-class="pt-3">
<template #title>Size</template>
<div class="space-x-2">
<IButton size="large">Large</IButton>
<IButton size="default">Default</IButton>
<IButton size="small">Small</IButton>
<ShadcnButton size="large">Large</ShadcnButton>
<ShadcnButton size="default">Default</ShadcnButton>
<ShadcnButton size="small">Small</ShadcnButton>
</div>
</ICard>
<ICard body-class="pt-3">
</ShadcnCard>
<ShadcnCard body-class="pt-3">
<template #title>Type</template>
<div class="space-x-2 space-y-2">
<IButton type="primary">Primary</IButton>
<IButton type="success">Success</IButton>
<IButton type="warning">Warning</IButton>
<IButton type="danger">Danger</IButton>
<IButton type="info">Info</IButton>
<IButton type="text">Text</IButton>
<ShadcnButton type="primary">Primary</ShadcnButton>
<ShadcnButton type="success">Success</ShadcnButton>
<ShadcnButton type="warning">Warning</ShadcnButton>
<ShadcnButton type="danger">Danger</ShadcnButton>
<ShadcnButton type="info">Info</ShadcnButton>
<ShadcnButton type="text">Text</ShadcnButton>
</div>
</ICard>
<ICard body-class="pt-3">
</ShadcnCard>
<ShadcnCard body-class="pt-3">
<template #title>Icon</template>
<div class="space-x-2 space-y-2">
<IButton>
<ShadcnButton>
<template #icon>
<Save/>
</template>
Icon
</IButton>
<IButton type="success">
</ShadcnButton>
<ShadcnButton type="success">
<template #icon>
<Save/>
</template>
Icon + Type
</IButton>
<IButton type="success" size="small">
</ShadcnButton>
<ShadcnButton type="success" size="small">
<template #icon>
<Save/>
</template>
Icon + Type + Size
</IButton>
</ShadcnButton>
</div>
</ICard>
<ICard body-class="pt-3">
</ShadcnCard>
<ShadcnCard body-class="pt-3">
<template #title>Round</template>
<div class="space-x-2 space-y-2">
<IButton round>Round</IButton>
<IButton type="success" round>Round + Type</IButton>
<IButton type="success" size="small" round>Round + Type + Size</IButton>
<IButton type="success" round>
<ShadcnButton round>Round</ShadcnButton>
<ShadcnButton type="success" round>Round + Type</ShadcnButton>
<ShadcnButton type="success" size="small" round>Round + Type + Size</ShadcnButton>
<ShadcnButton type="success" round>
<template #icon>
<Save/>
</template>
Round + Type + Size + Icon
</IButton>
</ShadcnButton>
</div>
</ICard>
<ICard body-class="pt-3">
</ShadcnCard>
<ShadcnCard body-class="pt-3">
<template #title>Disabled</template>
<div class="space-x-2 space-y-2">
<IButton disabled>Disabled</IButton>
<IButton type="success" disabled>Disabled + Type</IButton>
<IButton type="success" size="small" disabled>Disabled + Type + Size</IButton>
<IButton type="success" disabled>
<ShadcnButton disabled>Disabled</ShadcnButton>
<ShadcnButton type="success" disabled>Disabled + Type</ShadcnButton>
<ShadcnButton type="success" size="small" disabled>Disabled + Type + Size</ShadcnButton>
<ShadcnButton type="success" disabled>
<template #icon>
<Save/>
</template>
Disabled + Type + Size + Icon
</IButton>
</ShadcnButton>
</div>
</ICard>
<ICard body-class="pt-3">
</ShadcnCard>
<ShadcnCard body-class="pt-3">
<template #title>Circle</template>
<div class="space-x-2 space-y-2">
<IButton circle>1</IButton>
<IButton type="success" circle>2</IButton>
<IButton type="success" circle>
<ShadcnButton circle>1</ShadcnButton>
<ShadcnButton type="success" circle>2</ShadcnButton>
<ShadcnButton type="success" circle>
<template #icon>
<Save/>
</template>
</IButton>
</ShadcnButton>
</div>
</ICard>
<ICard body-class="pt-3">
</ShadcnCard>
<ShadcnCard body-class="pt-3">
<template #title>Loading</template>
<div class="space-x-2 space-y-2">
<IButton loading>Loading</IButton>
<IButton type="success" loading>Loading + Type</IButton>
<IButton type="success" size="small" loading>Loading + Type + Size</IButton>
<IButton type="success">
<ShadcnButton loading>Loading</ShadcnButton>
<ShadcnButton type="success" loading>Loading + Type</ShadcnButton>
<ShadcnButton type="success" size="small" loading>Loading + Type + Size</ShadcnButton>
<ShadcnButton type="success">
<template #loading>
<Save/>
</template>
Custom Loading
</IButton>
</ShadcnButton>
</div>
</ICard>
<ICard body-class="pt-3">
</ShadcnCard>
<ShadcnCard body-class="pt-3">
<template #title>Color</template>
<div class="space-x-2 space-y-2">
<IButton color="red">Red</IButton>
<IButton color="green">Green</IButton>
<IButton color="blue">Blue</IButton>
<IButton color="yellow">Yellow</IButton>
<IButton color="purple">Purple</IButton>
<IButton color="pink">Pink</IButton>
<IButton color="indigo">Indigo</IButton>
<IButton color="cyan">Cyan</IButton>
<IButton color="teal">Teal</IButton>
<ShadcnButton color="red">Red</ShadcnButton>
<ShadcnButton color="green">Green</ShadcnButton>
<ShadcnButton color="blue">Blue</ShadcnButton>
<ShadcnButton color="yellow">Yellow</ShadcnButton>
<ShadcnButton color="purple">Purple</ShadcnButton>
<ShadcnButton color="pink">Pink</ShadcnButton>
<ShadcnButton color="indigo">Indigo</ShadcnButton>
<ShadcnButton color="cyan">Cyan</ShadcnButton>
<ShadcnButton color="teal">Teal</ShadcnButton>
</div>
</ICard>
</ShadcnCard>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ICard from '@/ui/card'
import IButton from '@/ui/button'
import { Save } from 'lucide-vue-next'
export default defineComponent({
name: 'ButtonHome',
components: {
IButton,
ICard,
Save
}
})
Expand Down
Loading

0 comments on commit f09232c

Please sign in to comment.