frappe-ui 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/ListView/ListHeader.vue

@@ -19,6 +19,7 @@
         v-for="column in list.columns"
         :key="column.key"
         :item="column"
+        @updateWidth="(w) => (column.width = w)"
       />
     </slot>
   </div>

package/src/components/ListView/ListHeaderItem.vue

@@ -1,22 +1,83 @@
 <template>
   <div
-    class="flex items-center space-x-2 text-sm text-gray-600"
+    ref="columnRef"
+    class="group flex items-center justify-between"
     :class="alignmentMap[item.align]"
   >
-    <slot name="prefix" v-bind="{ item }" />
-    <div>
-      {{ item.label }}
+    <div
+      class="flex items-center space-x-2 truncate text-sm text-gray-600"
+      :class="$attrs.class"
+    >
+      <slot name="prefix" v-bind="{ item }" />
+      <div class="truncate">
+        {{ item.label }}
+      </div>
+      <slot name="suffix" v-bind="{ item }" />
     </div>
-    <slot name="suffix" v-bind="{ item }" />
+    <slot v-if="list.options.resizeColumn" name="resizer" v-bind="{ item }">
+      <div
+        class="flex h-4 w-2 cursor-col-resize justify-center"
+        @mousedown="startResizing"
+      >
+        <div
+          ref="resizer"
+          class="h-full w-[2px] rounded-full transition-all duration-300 ease-in-out group-hover:bg-gray-400"
+        />
+      </div>
+    </slot>
   </div>
 </template>
 
 <script setup>
 import { alignmentMap } from './utils'
+import { ref, computed, inject } from 'vue'
+
 const props = defineProps({
   item: {
     type: Object,
     required: true,
   },
 })
+
+const emit = defineEmits(['updateWidth'])
+
+const resizer = ref(null)
+const columnRef = ref(null)
+
+const widthInPx = computed(() => {
+  if (typeof props.item.width === 'string') {
+    const parsedWidth = parseInt(props.item.width)
+    if (props.item.width.includes('rem')) {
+      return parsedWidth * 16
+    } else if (props.item.width.includes('px')) {
+      return parsedWidth
+    }
+  }
+  return columnRef.value.offsetWidth
+})
+
+const startResizing = (e) => {
+  const initialX = e.clientX
+  const initialWidth = widthInPx.value
+  const onMouseMove = (e) => {
+    document.body.classList.add('select-none')
+    document.body.classList.add('cursor-col-resize')
+    resizer.value.style.backgroundColor = 'rgb(199 199 199)'
+    let newWidth = initialWidth + (e.clientX - initialX)
+
+    props.item.width = `${newWidth < 50 ? 50 : newWidth}px`
+    emit('updateWidth', props.item.width)
+  }
+  const onMouseUp = () => {
+    document.body.classList.remove('select-none')
+    document.body.classList.remove('cursor-col-resize')
+    resizer.value.style.backgroundColor = ''
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+const list = inject('list')
 </script>

package/src/components/ListView/ListView.vue

@@ -42,6 +42,7 @@ const props = defineProps({
       onRowClick: null,
       showTooltip: true,
       selectable: true,
+      resizeColumn: true,
     },
   },
 })
@@ -64,6 +65,7 @@ let _options = computed(() => {
     onRowClick: props.options.onRowClick || null,
     showTooltip: defaultTrue(props.options.showTooltip),
     selectable: defaultTrue(props.options.selectable),
+    resizeColumn: defaultTrue(props.options.resizeColumn),
   }
 })
 

package/src/components/ListView.story.md

@@ -77,6 +77,8 @@ required to be passed in the `row` object.
    select/multiselect rows and perform some action on them - default is true
 4. showTooltip (Boolean) - if true, tooltip will be shown on hover of row -
    default is true
+5. resizeColumn (Boolean) - if true, column can be resized by dragging the
+   resizer on the right side of the column header - default is true
 
 ---
 

package/src/components/ListView.story.vue

@@ -15,9 +15,10 @@ import { reactive } from 'vue'
 const state = reactive({
   selectable: true,
   showTooltip: true,
+  resizeColumn: true,
 })
 
-const simple_columns = [
+const simple_columns = reactive([
   {
     label: 'Name',
     key: 'name',
@@ -36,7 +37,7 @@ const simple_columns = [
     label: 'Status',
     key: 'status',
   },
-]
+])
 
 const simple_rows = [
   {
@@ -55,7 +56,7 @@ const simple_rows = [
   },
 ]
 
-const custom_columns = [
+const custom_columns = reactive([
   {
     label: 'Name',
     key: 'name',
@@ -78,7 +79,7 @@ const custom_columns = [
     key: 'status',
     icon: 'check-circle',
   },
-]
+])
 
 const custom_rows = [
   {
@@ -127,6 +128,7 @@ const custom_rows = [
           getRowRoute: (row) => ({ name: 'User', params: { userId: row.id } }),
           selectable: state.selectable,
           showTooltip: state.showTooltip,
+          resizeColumn: state.resizeColumn,
         }"
         row-key="id"
       />
@@ -140,6 +142,7 @@ const custom_rows = [
           onRowClick: (row) => console.log(row),
           selectable: state.selectable,
           showTooltip: state.showTooltip,
+          resizeColumn: state.resizeColumn,
         }"
         row-key="id"
       >
@@ -203,6 +206,7 @@ const custom_rows = [
     <template #controls>
       <HstCheckbox v-model="state.selectable" title="Selectable" />
       <HstCheckbox v-model="state.showTooltip" title="Show tooltip" />
+      <HstCheckbox v-model="state.resizeColumn" title="Resize Column" />
     </template>
   </Story>
 </template>

package/src/resources/plugin.js

@@ -16,14 +16,18 @@ let createMixin = (mixinOptions) => ({
         if (typeof options == 'function') {
           watch(
             () => {
+              let out = null
               try {
-                return options.call(this)
+                out = options.call(this)
               } catch (error) {
                 console.warn('Failed to get resource options\n\n', error)
-                return null
+                out = null
               }
+              return JSON.stringify(out)
             },
-            (options, oldOptions) => {
+            (_options, _oldOptions) => {
+              let options = _options ? JSON.parse(_options) : null
+              let oldOptions = _oldOptions ? JSON.parse(_oldOptions) : null
               if (!options) {
                 return
               }
@@ -37,6 +41,7 @@ let createMixin = (mixinOptions) => ({
             },
             {
               immediate: true,
+              deep: true,
             }
           )
         } else {