frappe-ui 0.0.52 → 0.0.55

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.52",
+  "version": "0.0.55",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
     "test": "npx prettier --check ./src",
     "prettier": "npx prettier -w ./src",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "bump-and-release": "yarn version --patch && git push && git push --tags"
   },
   "files": [
     "src"
@@ -43,7 +44,8 @@
   "devDependencies": {
     "husky": ">=6",
     "lint-staged": ">=10",
-    "prettier": "2.7.1"
+    "prettier": "2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13"
   },
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"

package/src/components/Alert.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="block w-full">
     <div
-      class="items-start px-4 md:px-5 py-3.5 text-base rounded-md flex"
+      class="flex items-start rounded-md px-4 py-3.5 text-base md:px-5"
       :class="classes"
     >
       <svg
@@ -19,8 +19,8 @@
           fill="#318AD8"
         />
       </svg>
-      <div class="w-full ml-2">
-        <div class="flex flex-col md:items-baseline md:flex-row">
+      <div class="ml-2 w-full">
+        <div class="flex flex-col md:flex-row md:items-baseline">
           <h3 class="text-lg font-medium text-gray-900" v-if="title">
             {{ title }}
           </h3>

package/src/components/Autocomplete.vue

@@ -4,7 +4,7 @@
       <template #target="{ open: openPopover }">
         <div class="w-full">
           <ComboboxButton
-            class="flex items-center justify-between w-full py-1.5 pl-3 pr-2 rounded-md bg-gray-100"
+            class="flex w-full items-center justify-between rounded-md bg-gray-100 py-1.5 pl-3 pr-2"
             :class="{ 'rounded-b-none': isComboboxOpen }"
             @click="
               () => {
@@ -12,7 +12,10 @@
               }
             "
           >
-            <span class="text-base" v-if="selectedValue">
+            <span
+              class="overflow-hidden text-ellipsis text-base"
+              v-if="selectedValue"
+            >
               {{ displayValue(selectedValue) }}
             </span>
             <span class="text-base text-gray-500" v-else>
@@ -20,7 +23,7 @@
             </span>
             <FeatherIcon
               name="chevron-down"
-              class="w-4 h-4 text-gray-500"
+              class="h-4 w-4 text-gray-500"
               aria-hidden="true"
             />
           </ComboboxButton>
@@ -28,15 +31,15 @@
       </template>
       <template #body>
         <ComboboxOptions
-          class="px-1.5 pb-1.5 bg-white rounded-md shadow-md rounded-t-none max-h-[11rem] overflow-y-auto"
+          class="max-h-[11rem] overflow-y-auto rounded-md rounded-t-none bg-white px-1.5 pb-1.5 shadow-md"
           static
           v-show="isComboboxOpen"
         >
           <div
-            class="flex items-st items-stretch space-x-1.5 sticky top-0 pt-1.5 mb-1.5 bg-white"
+            class="items-st sticky top-0 mb-1.5 flex items-stretch space-x-1.5 bg-white pt-1.5"
           >
             <ComboboxInput
-              class="w-full placeholder-gray-500 form-input"
+              class="form-input w-full placeholder-gray-500"
               type="text"
               @change="
                 (e) => {
@@ -58,7 +61,7 @@
           >
             <li
               :class="[
-                'px-2.5 py-1.5 rounded-md text-base',
+                'rounded-md px-2.5 py-1.5 text-base',
                 { 'bg-gray-100': active },
               ]"
             >
@@ -67,7 +70,7 @@
           </ComboboxOption>
           <li
             v-if="filteredOptions.length == 0"
-            class="px-2.5 py-1.5 rounded-md text-base text-gray-600"
+            class="rounded-md px-2.5 py-1.5 text-base text-gray-600"
           >
             No results found
           </li>

package/src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden shrink-0" :class="styleClasses">
+  <div class="shrink-0 overflow-hidden" :class="styleClasses">
     <img
       v-if="imageURL"
       :src="imageURL"
@@ -8,7 +8,7 @@
     />
     <div
       v-else
-      class="flex items-center justify-center w-full h-full text-gray-600 uppercase bg-gray-200"
+      class="flex h-full w-full items-center justify-center bg-gray-200 uppercase text-gray-600"
       :class="{ sm: 'text-xs', md: 'text-base', lg: 'text-lg' }[size]"
     >
       {{ label && label[0] }}

package/src/components/Badge.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block px-3 py-1 text-xs font-medium rounded-md cursor-default"
+    class="inline-block cursor-default rounded-md px-3 py-1 text-xs font-medium"
     :class="classes"
   >
     <slot>{{ status }}</slot>
@@ -9,39 +9,50 @@
 <script>
 export default {
   name: 'Badge',
-  props: ['color', 'status'],
+  props: ['color', 'status', 'colorMap'],
+  data: {
+    defaultColorMap: {
+      Pending: 'yellow',
+      Running: 'yellow',
+      Success: 'green',
+      Failure: 'red',
+      Active: 'green',
+      Broken: 'red',
+      Updating: 'blue',
+      Rejected: 'red',
+      Published: 'green',
+      Approved: 'green',
+    },
+  },
   computed: {
     classes() {
-      let color = this.color
-      if (typeof color === 'object') {
-        for (let key in color) {
-          if (color[key]) {
-            color = key
-            break
-          }
-        }
-      }
-      if (!color && this.status) {
-        color = {
-          Pending: 'yellow',
-          Running: 'yellow',
-          Success: 'green',
-          Failure: 'red',
-          Active: 'green',
-          Broken: 'red',
-          Updating: 'blue',
-          Rejected: 'red',
-          Published: 'green',
-          Approved: 'green',
-        }[this.status]
-      }
-      return {
+      let color = this.getBadgeColor()
+
+      let cssClasses = {
         gray: 'text-gray-700 bg-gray-50',
         green: 'text-green-700 bg-green-50',
         red: 'text-red-700 bg-red-50',
         yellow: 'text-yellow-700 bg-yellow-50',
         blue: 'text-blue-700 bg-blue-50',
-      }[color || 'gray']
+      }[color]
+
+      return cssClasses
+    },
+  },
+  methods: {
+    getBadgeColor() {
+      let color = this.color
+      if (color) {
+        return color
+      }
+
+      let statusColorMap = Object.assign(
+        this.defaultColorMap,
+        this.colorMap || {}
+      )
+      color = statusColorMap[this.status] || 'gray'
+
+      return color
     },
   },
 }

package/src/components/Button.vue

@@ -7,7 +7,7 @@
   >
     <LoadingIndicator
       v-if="loading"
-      class="w-3 h-3 mr-2 -ml-1"
+      class="mr-2 -ml-1 h-3 w-3"
       :class="{
         'text-white': appearance == 'primary',
         'text-gray-600': appearance == 'secondary',
@@ -19,12 +19,12 @@
     <FeatherIcon
       v-else-if="iconLeft"
       :name="iconLeft"
-      class="w-4 h-4 mr-1.5"
+      class="mr-1.5 h-4 w-4"
       aria-hidden="true"
     />
     <template v-if="loading && loadingText">{{ loadingText }}</template>
     <template v-else-if="icon">
-      <FeatherIcon :name="icon" class="w-4 h-4" :aria-label="label" />
+      <FeatherIcon :name="icon" class="h-4 w-4" :aria-label="label" />
     </template>
     <span :class="icon ? 'sr-only' : ''">
       <slot>
@@ -34,7 +34,7 @@
     <FeatherIcon
       v-if="iconRight"
       :name="iconRight"
-      class="w-4 h-4 ml-2"
+      class="ml-2 h-4 w-4"
       aria-hidden="true"
     />
   </button>

package/src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col px-6 py-5 bg-white border rounded-lg shadow">
+  <div class="flex flex-col rounded-lg border bg-white px-6 py-5 shadow">
     <div class="flex items-baseline justify-between">
       <div class="flex items-baseline space-x-2">
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
@@ -11,16 +11,16 @@
         <slot name="actions"></slot>
       </div>
     </div>
-    <p class="text-base text-gray-600 mt-1.5" v-if="subtitle">
+    <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
       {{ subtitle }}
     </p>
     <div
       v-if="loading"
-      class="flex flex-col items-center justify-center flex-auto mt-4 rounded-md"
+      class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md"
     >
       <LoadingText />
     </div>
-    <div class="flex-auto mt-4 overflow-auto" v-else-if="$slots['default']">
+    <div class="mt-4 flex-auto overflow-auto" v-else-if="$slots['default']">
       <slot></slot>
     </div>
   </div>

package/src/components/DatePicker.vue

@@ -13,36 +13,36 @@
       />
     </template>
     <template #body-main="{ togglePopover }">
-      <div class="p-3 mt-1 text-left select-none">
+      <div class="mt-1 select-none p-3 text-left">
         <div class="flex items-center justify-between">
           <span class="text-base font-medium text-blue-500">
             {{ formatMonth }}
           </span>
           <span class="flex">
             <div
-              class="grid w-5 h-5 rounded-md cursor-pointer hover:bg-gray-100 place-items-center"
+              class="grid h-5 w-5 cursor-pointer place-items-center rounded-md hover:bg-gray-100"
             >
               <FeatherIcon
                 @click="prevMonth"
                 name="chevron-left"
-                class="w-4 h-4"
+                class="h-4 w-4"
               />
             </div>
             <div
-              class="grid w-5 h-5 ml-2 rounded-md cursor-pointer hover:bg-gray-100 place-items-center"
+              class="ml-2 grid h-5 w-5 cursor-pointer place-items-center rounded-md hover:bg-gray-100"
             >
               <FeatherIcon
                 @click="nextMonth"
                 name="chevron-right"
-                class="w-4 h-4"
+                class="h-4 w-4"
               />
             </div>
           </span>
         </div>
         <div class="mt-2 text-sm">
-          <div class="grid w-full grid-cols-7 text-gray-600 place-items-center">
+          <div class="grid w-full grid-cols-7 place-items-center text-gray-600">
             <div
-              class="grid w-6 h-6 gap-1 text-center place-items-center"
+              class="grid h-6 w-6 place-items-center gap-1 text-center"
               v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
               :key="i"
             >
@@ -50,11 +50,11 @@
             </div>
           </div>
           <div v-for="(week, i) in datesAsWeeks" :key="i" class="mt-1">
-            <div class="grid w-full grid-cols-7 gap-1 place-items-center">
+            <div class="grid w-full grid-cols-7 place-items-center gap-1">
               <div
                 v-for="date in week"
                 :key="toValue(date)"
-                class="grid w-6 h-6 rounded-md cursor-pointer place-items-center hover:bg-blue-100 hover:text-blue-700"
+                class="grid h-6 w-6 cursor-pointer place-items-center rounded-md hover:bg-blue-100 hover:text-blue-700"
                 :class="{
                   'text-gray-600': date.getMonth() !== currentMonth - 1,
                   'text-blue-500': toValue(date) === toValue(today),
@@ -73,9 +73,9 @@
             </div>
           </div>
         </div>
-        <div class="flex justify-end w-full mt-2">
+        <div class="mt-2 flex w-full justify-end">
           <div
-            class="px-2 py-1 text-sm rounded-md cursor-pointer hover:bg-gray-100"
+            class="cursor-pointer rounded-md px-2 py-1 text-sm hover:bg-gray-100"
             @click="
               () => {
                 selectDate('')

package/src/components/Dialog.vue

@@ -10,7 +10,7 @@
       @close="open = false"
     >
       <div
-        class="flex flex-col items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center"
+        class="flex min-h-screen flex-col items-center justify-center px-4 pt-4 pb-20 text-center"
       >
         <TransitionChild
           as="template"
@@ -22,7 +22,7 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
           />
         </TransitionChild>
 
@@ -36,15 +36,15 @@
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <div
-            class="inline-block w-full max-w-lg my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded-lg shadow-xl"
+            class="my-8 inline-block w-full max-w-lg transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all"
           >
             <slot name="body">
               <slot name="body-main">
-                <div class="px-4 py-5 bg-white sm:p-6">
+                <div class="bg-white px-4 py-5 sm:p-6">
                   <div class="flex flex-col sm:flex-row">
                     <div
                       v-if="icon"
-                      class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto mb-3 rounded-full sm:mx-0 sm:h-9 sm:w-9 sm:mb-0 sm:mr-4"
+                      class="mx-auto mb-3 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:mb-0 sm:mr-4 sm:h-9 sm:w-9"
                       :class="{
                         'bg-yellow-100': icon.appearance === 'warning',
                         'bg-blue-100': icon.appearance === 'info',
@@ -54,7 +54,7 @@
                     >
                       <FeatherIcon
                         :name="icon.name"
-                        class="w-6 h-6 text-red-600 sm:w-5 sm:h-5"
+                        class="h-6 w-6 text-red-600 sm:h-5 sm:w-5"
                         :class="{
                           'text-yellow-600': icon.appearance === 'warning',
                           'text-blue-600': icon.appearance === 'info',
@@ -85,7 +85,7 @@
                 </div>
               </slot>
               <div
-                class="px-4 py-3 space-y-2 sm:space-x-reverse sm:space-x-3 sm:space-y-0 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse"
+                class="space-y-2 bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:space-x-3 sm:space-y-0 sm:space-x-reverse sm:px-6"
                 v-if="options?.actions || $slots.actions"
               >
                 <slot name="actions" v-bind="{ close: () => (open = false) }">

package/src/components/Dropdown.vue

@@ -16,7 +16,7 @@
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        class="absolute z-10 mt-2 bg-white divide-y divide-gray-100 rounded-md shadow-lg min-w-40 ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="min-w-40 absolute z-10 mt-2 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="{
           'left-0 origin-top-left': placement == 'left',
           'right-0 origin-top-right': placement == 'right',
@@ -26,7 +26,7 @@
         <div v-for="group in groups" :key="group.key" class="px-1 py-1">
           <div
             v-if="group.group && !group.hideLabel"
-            class="px-2 py-1 text-xs font-semibold tracking-wider text-gray-500 uppercase"
+            class="px-2 py-1 text-xs font-semibold uppercase tracking-wider text-gray-500"
           >
             {{ group.group }}
           </div>
@@ -38,14 +38,14 @@
             <button
               :class="[
                 active ? 'bg-gray-100' : 'text-gray-900',
-                'group flex rounded-md items-center w-full px-2 py-2 text-sm',
+                'group flex w-full items-center rounded-md px-2 py-2 text-sm',
               ]"
               @click="item.onClick"
             >
               <FeatherIcon
                 v-if="item.icon"
                 :name="item.icon"
-                class="flex-shrink-0 w-4 h-4 mr-2 text-gray-500"
+                class="mr-2 h-4 w-4 flex-shrink-0 text-gray-500"
                 aria-hidden="true"
               />
               <span class="whitespace-nowrap">

package/src/components/ErrorMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="message"
-    class="text-sm text-red-600 whitespace-pre-line"
+    class="whitespace-pre-line text-sm text-red-600"
     role="alert"
     v-html="message"
   ></div>

package/src/components/Input.vue

@@ -2,7 +2,7 @@
   <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]">
     <span
       v-if="label && type != 'checkbox'"
-      class="block mb-2 text-sm leading-4 text-gray-700"
+      class="mb-2 block text-sm leading-4 text-gray-700"
     >
       {{ label }}
     </span>
@@ -13,11 +13,11 @@
         )
       "
       v-bind="inputAttributes"
-      class="placeholder-gray-500 border-gray-400"
+      class="border-gray-400 placeholder-gray-500"
       ref="input"
       :class="[
         {
-          'block w-full form-input': type != 'checkbox',
+          'form-input block w-full': type != 'checkbox',
           'form-checkbox': type == 'checkbox',
         },
         inputClass,
@@ -32,7 +32,7 @@
       v-bind="inputAttributes"
       :placeholder="placeholder"
       class="placeholder-gray-500"
-      :class="['block w-full resize-none form-textarea', inputClass]"
+      :class="['form-textarea block w-full resize-none', inputClass]"
       ref="input"
       :value="passedInputValue"
       :disabled="disabled"
@@ -40,7 +40,7 @@
     ></textarea>
     <select
       v-bind="inputAttributes"
-      class="block w-full form-select"
+      class="form-select block w-full"
       ref="input"
       v-if="type === 'select'"
       :disabled="disabled"
@@ -57,7 +57,7 @@
     </select>
     <span
       v-if="label && type == 'checkbox'"
-      class="inline-block ml-2 text-base leading-4"
+      class="ml-2 inline-block text-base leading-4"
     >
       {{ label }}
     </span>

package/src/components/Link.vue

@@ -2,7 +2,7 @@
   <component
     :is="isExternal ? 'a' : 'router-link'"
     v-bind="attributes"
-    class="text-blue-500 cursor-pointer hover:text-blue-600"
+    class="cursor-pointer text-blue-500 hover:text-blue-600"
   >
     <slot></slot>
   </component>

package/src/components/LoadingText.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center text-base text-gray-500">
-    <LoadingIndicator class="w-3 h-3 mr-2 -ml-1" /> {{ text }}
+    <LoadingIndicator class="mr-2 -ml-1 h-3 w-3" /> {{ text }}
   </div>
 </template>
 <script>

package/src/components/Modal.vue

@@ -14,7 +14,7 @@
 
       <div
         v-show="show"
-        class="w-full overflow-auto transition-all transform bg-white rounded-lg shadow-xl"
+        class="w-full transform overflow-auto rounded-lg bg-white shadow-xl transition-all"
         :class="!full ? 'sm:max-w-lg' : ''"
         style="max-height: 95vh"
       >

package/src/components/Popover.vue

@@ -18,7 +18,7 @@
       <div
         ref="popover"
         :class="popoverClass"
-        class="relative z-[100] popover-container"
+        class="popover-container relative z-[100]"
         :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
         v-show="isOpen"
       >
@@ -28,7 +28,7 @@
               name="body"
               v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
             >
-              <div class="bg-white border border-gray-100 rounded-lg shadow-xl">
+              <div class="rounded-lg border border-gray-100 bg-white shadow-xl">
                 <slot
                   name="body-main"
                   v-bind="{

package/src/components/SuccessMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="message"
-    class="text-sm text-green-600 whitespace-pre-line"
+    class="whitespace-pre-line text-sm text-green-600"
     role="success"
     v-html="message"
   ></div>

package/src/components/TextEditor/InsertImage.vue

@@ -7,7 +7,7 @@
   >
     <template #body-content>
       <label
-        class="relative py-1 bg-gray-100 rounded-lg cursor-pointer focus-within:bg-gray-200 hover:bg-gray-200"
+        class="relative cursor-pointer rounded-lg bg-gray-100 py-1 focus-within:bg-gray-200 hover:bg-gray-200"
       >
         <input
           type="file"
@@ -15,14 +15,14 @@
           @change="onImageSelect"
           accept="image/*"
         />
-        <span class="absolute inset-0 px-2 py-1 text-base select-none">
+        <span class="absolute inset-0 select-none px-2 py-1 text-base">
           {{ addImageDialog.file ? 'Select another image' : 'Select an image' }}
         </span>
       </label>
       <img
         v-if="addImageDialog.url"
         :src="addImageDialog.url"
-        class="w-full mt-2 rounded-lg"
+        class="mt-2 w-full rounded-lg"
       />
     </template>
     <template #actions>

package/src/components/TextEditor/MentionList.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="items.length"
-    class="p-1 text-base bg-white border rounded-lg shadow-lg min-w-40"
+    class="min-w-40 rounded-lg border bg-white p-1 text-base shadow-lg"
   >
     <button
       :class="[
         index === selectedIndex ? 'bg-gray-100' : 'text-gray-900',
-        'whitespace-nowrap flex rounded-md items-center w-full px-2 py-2 text-sm',
+        'flex w-full items-center whitespace-nowrap rounded-md px-2 py-2 text-sm',
       ]"
       v-for="(item, index) in items"
       :key="index"

package/src/components/TextEditor/Menu.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="inline-flex px-1 py-1 bg-white">
+  <div class="inline-flex bg-white px-1 py-1">
     <div class="inline-flex items-center gap-1">
       <template v-for="button in buttons" :key="button.label">
         <div
-          class="border-l w-[2px] h-4"
+          class="h-4 w-[2px] border-l"
           v-if="button.type === 'separator'"
         ></div>
         <div class="shrink-0" v-else-if="button.map">
           <Popover>
             <template #target="{ togglePopover }">
               <button
-                class="px-2 py-1 text-base font-medium text-gray-800 transition-colors rounded hover:bg-gray-100"
+                class="rounded px-2 py-1 text-base font-medium text-gray-800 transition-colors hover:bg-gray-100"
                 @click="togglePopover"
                 :set="
                   (activeBtn =
@@ -20,7 +20,7 @@
                 <component
                   v-if="activeBtn.icon"
                   :is="activeBtn.icon"
-                  class="w-4 h-4"
+                  class="h-4 w-4"
                 />
                 <span v-else>
                   {{ activeBtn.label }}
@@ -28,14 +28,14 @@
               </button>
             </template>
             <template #body="{ close }">
-              <ul class="p-1 bg-white border rounded shadow-md">
+              <ul class="rounded border bg-white p-1 shadow-md">
                 <li
                   class="w-full"
                   v-for="option in button"
                   v-show="option.isDisabled ? !option.isDisabled(editor) : true"
                 >
                   <button
-                    class="w-full px-2 py-1 text-base text-left rounded hover:bg-gray-50"
+                    class="w-full rounded px-2 py-1 text-left text-base hover:bg-gray-50"
                     @click="
                       () => {
                         onClick(option)
@@ -52,13 +52,13 @@
         </div>
         <button
           v-else
-          class="flex p-1 text-gray-800 transition-colors rounded"
+          class="flex rounded p-1 text-gray-800 transition-colors"
           :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
           @click="onClick(button)"
           :title="button.label"
         >
-          <component v-if="button.icon" :is="button.icon" class="w-4 h-4" />
-          <span class="inline-block h-4 text-sm leading-4 min-w-[1rem]" v-else>
+          <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+          <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
             {{ button.text }}
           </span>
         </button>

package/src/components/TextEditor/TextEditor.vue

@@ -8,14 +8,14 @@
     >
       <Menu
         :editor="editor"
-        class="border border-gray-100 rounded-md shadow-sm"
+        class="rounded-md border border-gray-100 shadow-sm"
         :buttons="bubbleMenuButtons"
       />
     </BubbleMenu>
 
     <Menu
       v-if="fixedMenuButtons"
-      class="w-full overflow-x-auto border border-gray-200 rounded-t-lg"
+      class="w-full overflow-x-auto rounded-t-lg border border-gray-200"
       :editor="editor"
       :buttons="fixedMenuButtons"
     />
@@ -29,13 +29,13 @@
       <button
         v-for="button in floatingMenuButtons"
         :key="button.label"
-        class="flex p-1 text-gray-800 transition-colors rounded"
+        class="flex rounded p-1 text-gray-800 transition-colors"
         :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
         @click="() => button.action(editor)"
         :title="button.label"
       >
-        <component v-if="button.icon" :is="button.icon" class="w-4 h-4" />
-        <span class="inline-block h-4 text-sm leading-4 min-w-[1rem]" v-else>
+        <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+        <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
           {{ button.text }}
         </span>
       </button>

package/src/components/Toast.vue

@@ -5,16 +5,16 @@
         v-if="shown"
         :style="style"
         :class="[
-          'absolute transition duration-200 ease-out m-4 pointer-events-auto',
+          'pointer-events-auto absolute m-4 transition duration-200 ease-out',
           position.includes('center') ? '-translate-x-1/2' : '',
         ]"
       >
         <div
-          class="p-4 bg-white border rounded-lg shadow-md min-w-[15rem] max-w-[40rem]"
+          class="min-w-[15rem] max-w-[40rem] rounded-lg border bg-white p-4 shadow-md"
         >
           <div class="flex items-start">
-            <div v-if="icon" class="grid w-5 h-5 mr-3 place-items-center">
-              <FeatherIcon :name="icon" :class="['w-5 h-5', iconClasses]" />
+            <div v-if="icon" class="mr-3 grid h-5 w-5 place-items-center">
+              <FeatherIcon :name="icon" :class="['h-5 w-5', iconClasses]" />
             </div>
             <div>
               <slot>
@@ -30,13 +30,13 @@
                 </p>
               </slot>
             </div>
-            <div class="pl-2 ml-auto">
+            <div class="ml-auto pl-2">
               <slot name="actions">
                 <button
-                  class="grid w-5 h-5 rounded hover:bg-gray-100 place-items-center"
+                  class="grid h-5 w-5 place-items-center rounded hover:bg-gray-100"
                   @click="shown = false"
                 >
-                  <FeatherIcon name="x" class="w-4 h-4 text-gray-700" />
+                  <FeatherIcon name="x" class="h-4 w-4 text-gray-700" />
                 </button>
               </slot>
             </div>

package/src/components/Tooltip.vue

@@ -6,7 +6,7 @@
     <template #body>
       <slot name="body">
         <div
-          class="px-2 py-1 text-xs text-white bg-gray-800 border border-gray-100 rounded-lg shadow-xl"
+          class="rounded-lg border border-gray-100 bg-gray-800 px-2 py-1 text-xs text-white shadow-xl"
         >
           {{ text }}
         </div>

package/src/style.css

@@ -6,10 +6,10 @@
   .form-input,
   .form-textarea,
   .form-select {
-    @apply py-1 text-base leading-5 placeholder-gray-700 bg-gray-100 border-0 rounded-md focus:ring-0 focus:bg-gray-200 focus:shadow-none;
+    @apply rounded-md border-0 bg-gray-100 py-1 text-base leading-5 placeholder-gray-700 focus:bg-gray-200 focus:shadow-none focus:ring-0;
   }
 
   .form-checkbox {
-    @apply text-blue-500 rounded-md;
+    @apply rounded-md text-blue-500;
   }
 }

package/src/utils/resources.js

@@ -320,6 +320,8 @@ export function createListResource(options, vm, getResource) {
     order_by: options.order_by,
     start: options.start || 0,
     limit: options.limit || 20,
+    parent: options.parent,
+    debug: options.debug || 0,
     originalData: null,
     data: null,
     next,
@@ -336,6 +338,8 @@ export function createListResource(options, vm, getResource) {
             order_by: out.order_by,
             limit_start: out.start,
             limit_page_length: out.limit,
+            parent: out.parent,
+            debug: out.debug,
           }
         },
         onSuccess(data) {