Merge pull request #92 from qianmoQ/feature-dev

feat and fix some component
devlive-community · Nov 9, 2024 · ab115d6 · ab115d6
2 parents b1922e0 + cd1ea49
commit ab115d6
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 138 deletions.
diff --git a/CNAME b/CNAME
@@ -1 +1 @@
-shadcn.vue.devlive.org
+view-shadcn-ui.devlive.org
diff --git a/docs/components/modal.md b/docs/components/modal.md
@@ -300,7 +300,7 @@ const value = ref(false);
         ['title', 'The title of the dialog box. If the page header is customized using slot, the title will be invalid.', 'string', '-', '-'],
         ['description', 'Modal description', 'string', '-', 'title'],
         ['width', 'Modal width', 'number | string', '30%', '-'],
-        ['height', 'Modal height', 'number | string', '10%', '-'],
+        ['height', 'Modal height', 'number | string', 'auto', '-'],
         ['okText', 'The text of the OK button', 'string', 'OK', '-'],
         ['cancelText', 'The text of the Cancel button', 'string', 'Cancel', '-'],
         ['closable', 'Whether the dialog box can be closed', 'boolean', 'true', '-'],

diff --git a/docs/components/select.md b/docs/components/select.md
@@ -175,6 +175,43 @@ const defaultSelectOptions = [
 
 :::
 
+## Border
+
+::: raw
+
+<CodeRunner title="Border">
+    <div class="space-y-2">
+        <p>Select Value: {{ defaultSelect }}</p>
+        <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" />
+        <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" :border="false" />
+    </div>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <p>Select Value: {{ defaultSelect }}</p>
+    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" />
+    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" :border="false" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const defaultSelect = ref('')
+const defaultSelectOptions = [
+    { label: 'Vue', value: 'Vue' },
+    { label: 'Nuxt', value: 'Nuxt', disabled: true },
+    { label: 'Svelte', value: 'Svelte' }
+]
+</script>
+```
+
+:::
+
 ## Group
 
 ::: raw
@@ -270,6 +307,7 @@ const defaultSelectOptions = [
         ['type', 'The type of the select', 'enum', 'default', 'primary | success | warning | error'],
         ['placeholder', 'The placeholder of the select', 'string', '-', '-'],
         ['multiple', 'Whether the select is multiple', 'boolean', 'false', 'true | false'],
+        ['border', 'Whether the select has border', 'boolean', 'true', 'true | false'],
     ]">
 </ApiTable>
 

diff --git a/docs/components/tree.md b/docs/components/tree.md
@@ -250,7 +250,7 @@ const data = reactive<[]>([
   }
 ])
 
-const generateChildNodes = (parentValue: string, level: number = 1, maxLevel: number = 3): TreeNode[] => {
+const generateChildNodes = (parentValue: string, level: number = 1, maxLevel: number = 3): any[] => {
   if (level >= maxLevel) {
     return []
   }
@@ -266,14 +266,12 @@ const generateChildNodes = (parentValue: string, level: number = 1, maxLevel: nu
     }
   })
 }
-const loadNodeData = async (node: any): Promise<any[]> => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const level = 0
-      const children = generateChildNodes(node.value, level)
-      resolve(children)
-    }, 1000)
-  })
+const loadNodeData = (item: any, callback: (children: any[]) => void) => {
+  setTimeout(() => {
+    const level = 0
+    const children = generateChildNodes(item.value, level)
+    callback(children)
+  }, 1000)
 }
 </script>
 ```
@@ -543,7 +541,7 @@ export default {
     ]
   }
 ])
-        const generateChildNodes = (parentValue: string, level: number = 1, maxLevel: number = 3): TreeNode[] => {
+        const generateChildNodes = (parentValue: string, level: number = 1, maxLevel: number = 3): any[] => {
           if (level >= maxLevel) {
             return []
           }
@@ -559,15 +557,12 @@ export default {
             }
           })
         }
-        const loadNodeData = async (node: TreeNode): Promise<TreeNode[]> => {
-          return new Promise((resolve) => {
+        const loadNodeData = (item: any, callback: (children: any[]) => void) => {
             setTimeout(() => {
               const level = 0
-              const children = generateChildNodes(node.value, level)
-              console.log('Generated children for node', node.value, ':', children)
-              resolve(children)
+              const children = generateChildNodes(item.value, level)
+              callback(children)
             }, 1000)
-          })
         }
 
         return {

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "author": "devlive-community",
   "homepage": "https://github.com/devlive-community/view-shadcn-ui",
   "private": false,
-  "version": "2024.2.0-alpha.1730986239",
+  "version": "2024.2.0-alpha.1731129825",
   "license": "MIT",
   "main": "./dist/view-shadcn.umd.ts",
   "module": "./dist/view-shadcn.es.ts",

diff --git a/src/App.vue b/src/App.vue
@@ -1,41 +1,8 @@
 <template>
-  <div class="p-32 space-y-2">
-    <ShadcnSelect v-model="selected"
-                  type="warning"
-                  placeholder="Select options"
-                  size="small"
-                  :options="options"/>
-    <ShadcnSelect v-model="selected"
-                  type="warning"
-                  placeholder="Select options"
-                  size="default"
-                  :options="options"/>
-    <ShadcnSelect v-model="selected"
-                  type="warning"
-                  placeholder="Select options"
-                  size="large"
-                  :options="options"/>
-  </div>
+  <ShadcnButton disabled>Disabled</ShadcnButton>
+  <ShadcnButton type="danger" disabled>Disabled + Type</ShadcnButton>
+  <ShadcnButton type="success" size="small" disabled>Disabled + Type + Size</ShadcnButton>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const selected = ref([])
-
-const generateRandomOptions = (count) => {
-  const options = [] as any[]
-
-  for (let i = 1; i <= count; i++) {
-    options.push({
-      value: i,
-      label: `Option ${ i }`
-    })
-  }
-
-  return options
-}
-
-const options = generateRandomOptions(30)
-
 </script>
diff --git a/src/ui/button/ShadcnButton.vue b/src/ui/button/ShadcnButton.vue
@@ -100,6 +100,37 @@ const getHoverClass = computed(() => {
   return hoverColorMap[props.type]
 })
 
+// New computed property for type styles including hover
+const getTypeStyles = computed(() => {
+  // If disabled or loading, don't include hover styles
+  if (props.disabled || props.loading) {
+    return props.type === 'default'
+        ? [
+          'bg-white',
+          'border-solid border border-gray-200',
+          'text-gray-500'
+        ]
+        : [
+          ButtonBackgroundType[props.type],
+          props.type === 'text' ? 'text-gray-500' : 'text-white'
+        ]
+  }
+
+  // Normal state with hover effects
+  return props.type === 'default'
+      ? [
+        'bg-white',
+        'border-solid border border-gray-200',
+        'text-gray-500',
+        'hover:border-gray-300'
+      ]
+      : [
+        ButtonBackgroundType[props.type],
+        ButtonHoverType[props.type],
+        props.type === 'text' ? 'text-gray-500' : 'text-white'
+      ]
+})
+
 const buttonGroupSize = inject<ComputedRef<keyof typeof ButtonSize> | undefined>(
     'buttonGroupSize',
     undefined
@@ -123,23 +154,16 @@ const buttonProps = computed(() => ({
     'inline-flex items-center justify-center whitespace-nowrap transition-colors',
     // Size
     !props.circle && ButtonSize[finalSize.value],
-    // Type style
-    props.ghost ? [
-      'bg-transparent',
-      'border-solid border',
-      getBorderColorClass.value,
-      getTextColorClass.value,
-      getHoverClass.value
-    ] : props.type === 'default' ? [
-      'bg-white',
-      'border-solid border border-gray-200',
-      'text-gray-500',
-      'hover:border-gray-300'
-    ] : [
-      ButtonBackgroundType[props.type],
-      ButtonHoverType[props.type],
-      props.type === 'text' ? 'text-gray-500' : 'text-white'
-    ],
+    // Type style with conditional hover
+    props.ghost
+        ? [
+          'bg-transparent',
+          'border-solid border',
+          getBorderColorClass.value,
+          getTextColorClass.value,
+          !props.disabled && !props.loading && getHoverClass.value
+        ]
+        : getTypeStyles.value,
     // Rounded corners
     { 'rounded-full': props.round || props.circle },
     { 'rounded-md': !props.round && !props.circle },

diff --git a/src/ui/modal/ShadcnModal.vue b/src/ui/modal/ShadcnModal.vue
@@ -73,7 +73,7 @@ const props = withDefaults(defineProps<ModalProps>(), {
   cancelText: 'Cancel',
   closable: true,
   width: '30%',
-  height: '10%',
+  height: 'auto',
   maskClosable: true
 })
 

diff --git a/src/ui/select/ShadcnSelect.vue b/src/ui/select/ShadcnSelect.vue
@@ -1,61 +1,7 @@
-<!--<template>-->
-<!--  <div ref="selectRef" class="relative">-->
-<!--    <div :class="['flex items-center justify-between border rounded px-2 py-1',-->
-<!--                  Size[size],-->
-<!--                  {-->
-<!--                    'cursor-pointer': !disabled,-->
-<!--                    'cursor-not-allowed opacity-50 bg-gray-100': disabled,-->
-<!--                    [HoverType[type]]: true-->
-<!--                  }-->
-<!--         ]"-->
-<!--         @click="toggleDropdown">-->
-<!--      <div class="flex flex-wrap gap-1 flex-1">-->
-<!--        <slot name="selected">-->
-<!--          <template v-if="multiple && selectedLabels.length">-->
-<!--            <span v-for="(label, _index) in selectedLabels"-->
-<!--                  :key="_index"-->
-<!--                  class="bg-gray-100 px-2 py-1 rounded-md text-sm flex items-center gap-1">-->
-<!--              {{ label }}-->
-<!--              <button class="hover:text-red-500" @click.stop="removeSelection(_index)">-->
-<!--                ×-->
-<!--              </button>-->
-<!--            </span>-->
-<!--          </template>-->
-<!--          <template v-else>-->
-<!--            {{ selectedLabels[0] || placeholder }}-->
-<!--          </template>-->
-<!--        </slot>-->
-<!--      </div>-->
-
-<!--      <svg :class="['w-4 h-4 transition-transform duration-200 ml-1',-->
-<!--                    { 'rotate-180': isExpanded }]"-->
-<!--           fill="currentColor"-->
-<!--           viewBox="0 0 20 20"-->
-<!--           xmlns="http://www.w3.org/2000/svg">-->
-<!--        <path clip-rule="evenodd"-->
-<!--              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"-->
-<!--              fill-rule="evenodd"/>-->
-<!--      </svg>-->
-<!--    </div>-->
-
-<!--    <div v-show="isExpanded"-->
-<!--         class="absolute z-10 bg-white border border-gray-300 rounded-sm mt-1 w-full py-2 px-2 space-y-1 overflow-y-auto max-h-60">-->
-<!--      <slot name="options">-->
-<!--        <ShadcnSelectOption v-for="(option, index) in internalOptions"-->
-<!--                            :key="index"-->
-<!--                            :value="option.value"-->
-<!--                            :label="option.label"-->
-<!--                            :selected="isOptionSelected(option.value)"-->
-<!--                            :disabled="option.disabled"-->
-<!--                            :type="type"/>-->
-<!--      </slot>-->
-<!--    </div>-->
-<!--  </div>-->
-<!--</template>-->
-
 <template>
   <div ref="selectRef" class="relative">
-    <div :class="['flex border rounded px-2',
+    <div :class="['flex rounded px-2',
+                   border && 'border',
                   {
                     'cursor-pointer': !disabled,
                     'cursor-not-allowed opacity-50 bg-gray-100': disabled,
@@ -131,7 +77,8 @@ const props = withDefaults(defineProps<SelectProps>(), {
   disabled: false,
   size: 'default',
   type: 'primary',
-  multiple: false
+  multiple: false,
+  border: true
 })
 
 const isExpanded = ref(false)

diff --git a/src/ui/select/types.ts b/src/ui/select/types.ts
@@ -10,6 +10,7 @@ export interface SelectProps
     size?: keyof typeof Size
     type?: keyof typeof HoverType
     multiple?: boolean
+    border?: boolean
 }
 
 export interface SelectOptionProps

diff --git a/src/ui/tree/ShadcnTreeNode.vue b/src/ui/tree/ShadcnTreeNode.vue
@@ -96,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { TreeNode, TreeNodeEmits, TreeNodeProps } from './types'
 import ShadcnCheckbox from '@/ui/checkbox'
 
@@ -155,16 +155,21 @@ const onExpand = async (event: Event) => {
   if (!hasChildren.value && props.node.isLeaf === false && !isExpanded.value && props.loadData) {
     loading.value = true
     try {
-      // Get the child node data and update it
-      props.node.children = await props.loadData(props.node)
-      await nextTick()
+      // Use callbacks to load data
+      props.loadData(props.node, (children: TreeNode[]) => {
+        props.node.children = children
+        loading.value = false
+        isExpanded.value = true
+      })
     }
-    finally {
+    catch (error) {
+      console.error('Failed to load children:', error)
       loading.value = false
     }
   }
-
-  isExpanded.value = !isExpanded.value
+  else {
+    isExpanded.value = !isExpanded.value
+  }
   emit('on-expand', props.node)
 }
 

diff --git a/src/ui/tree/types.ts b/src/ui/tree/types.ts
@@ -26,7 +26,7 @@ export interface TreeNodeProps
     checkable?: boolean
     cascade?: boolean
     showLine?: boolean
-    loadData?: (node: TreeNode) => Promise<TreeNode[]>
+    loadData?: (node: TreeNode, callback: (children: TreeNode[]) => void) => void
 }
 
 export type TreeEmits = {