frappe-ui 0.1.44 → 0.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -8,9 +8,6 @@
     "prettier": "npx prettier -w ./src",
     "prepare": "husky install",
     "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
@@ -62,11 +59,11 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.16.1",
+    "@histoire/plugin-vue": "^0.17.14",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
-    "histoire": "^0.16.2",
+    "histoire": "^0.17.14",
     "husky": ">=6",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
@@ -75,7 +72,6 @@
     "tailwindcss": "^3.2.7",
     "typescript": "^5.0.2",
     "vite": "^4.1.0",
-    "vitepress": "^1.0.0-alpha.29",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

package/src/components/FormControl.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import FormControl from './FormControl.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import Avatar from './Avatar.vue'
@@ -10,8 +10,11 @@ const state = reactive({
   placeholder: 'Placeholder',
   disabled: false,
   label: 'Label',
-  modelValue: '',
 })
+const inputValue = ref('')
+const selectValue = ref(null)
+const autocompleteValue = ref(null)
+const checkboxValue = ref(false)
 
 const inputTypes = [
   'text',
@@ -34,11 +37,7 @@ const variants = ['subtle', 'outline']
       :title="inputType"
     >
       <div class="p-2">
-        <FormControl
-          :type="inputType"
-          v-bind="state"
-          v-model="state.modelValue"
-        />
+        <FormControl :type="inputType" v-bind="state" v-model="inputValue" />
       </div>
     </Variant>
     <Variant title="select">
@@ -51,6 +50,7 @@ const variants = ['subtle', 'outline']
             { label: 'Three', value: '3' },
           ]"
           v-bind="state"
+          v-model="selectValue"
         />
       </div>
     </Variant>
@@ -64,12 +64,13 @@ const variants = ['subtle', 'outline']
             { label: 'Three', value: '3' },
           ]"
           v-bind="state"
+          v-model="autocompleteValue"
         />
       </div>
     </Variant>
     <Variant title="checkbox">
       <div class="p-2">
-        <FormControl type="checkbox" v-bind="state" />
+        <FormControl type="checkbox" v-bind="state" v-model="checkboxValue" />
       </div>
     </Variant>
 

package/src/components/ListFilter/ListFilter.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script setup>
-import { Autocomplete, FeatherIcon, FormControl } from 'frappe-ui'
+import { Autocomplete, FeatherIcon, FormControl } from '../../index'
 import { computed, h } from 'vue'
 import FilterIcon from './FilterIcon.vue'
 import NestedPopover from './NestedPopover.vue'

package/src/components/ListFilter/SearchComplete.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { Autocomplete, createListResource } from 'frappe-ui'
+import { Autocomplete, createListResource } from '../../index'
 import { computed, ref, watch } from 'vue'
 
 const props = defineProps({

package/src/components/Select.vue

@@ -12,8 +12,9 @@
     </div>
     <div
       v-if="placeholder"
-      class="absolute select-none text-gray-500"
-      :class="paddingClasses"
+      v-show="!modelValue"
+      class="pointer-events-none absolute text-gray-500"
+      :class="[fontSizeClasses, paddingClasses]"
     >
       {{ placeholder }}
     </div>
@@ -96,6 +97,15 @@ const textColor = computed(() => {
   return props.disabled ? 'text-gray-500' : 'text-gray-800'
 })
 
+const fontSizeClasses = computed(() => {
+  return {
+    sm: 'text-base',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+  }[props.size]
+})
+
 const paddingClasses = computed(() => {
   return {
     sm: 'px-2',
@@ -107,10 +117,10 @@ const paddingClasses = computed(() => {
 
 const selectClasses = computed(() => {
   let sizeClasses = {
-    sm: 'text-base rounded h-7',
-    md: 'text-base rounded h-8',
-    lg: 'text-lg rounded-md h-10',
-    xl: 'text-xl rounded-md h-10',
+    sm: 'rounded h-7',
+    md: 'rounded h-8',
+    lg: 'rounded-md h-10',
+    xl: 'rounded-md h-10',
   }[props.size]
 
   let variant = props.disabled ? 'disabled' : props.variant
@@ -130,10 +140,11 @@ const selectClasses = computed(() => {
 
   return [
     sizeClasses,
+    fontSizeClasses.value,
     paddingClasses.value,
     variantClasses,
     textColor.value,
-    'transition-colors w-full',
+    'transition-colors w-full py-0',
   ]
 })