frappe-ui 0.1.261 → 0.1.262

package/frappe/Filter/utils.ts

@@ -140,7 +140,7 @@ export const getValueControl = (row: StateRow) => {
   }
 
   if (typeSelect.includes(fieldType) || typeCheck.includes(fieldType)) {
-    let _options = options || ['yes', 'no']
+    let _options = options || ['Yes', 'No']
 
     return h(Select, { placeholder: 'Select Option', options: _options })
   }
@@ -225,9 +225,10 @@ export const parseFilters = (filters: any) => {
 
   return _filters.map(transformIn).reduce((acc, cur) => {
     if (['equals', '='].includes(cur.operator)) {
-      cur.value = cur.toBoolean ? 'Yes' : cur.value
-    } //
-    else if (cur.operator === 'between') cur.value = [...cur.value.split(',')]
+      cur.value = cur.value == 'Yes' ? true : cur.value == 'No' ? false : cur.value
+    } else if (cur.operator === 'between') {
+      cur.value = [...cur.value.split(',')]
+    }
 
     return [
       ...acc,

package/frappe/drive/components/AppSwitcher.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+router.afterEach(() => {
+  open.value = false
+})
+
+defineProps<{
+  apps: Array<{
+    title: string
+    logo: string
+    route: string
+  }>
+}>()
+
+const open = ref(false)
+</script>
+
+<template>
+  <div class="fixed left-0 top-0 h-screen w-3 z-40" @mouseenter="open = true" />
+  <aside
+    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-white border-r border-gray-200 px-2"
+    :class="!open && '-translate-x-full'"
+    @mouseleave="open = false"
+  >
+    <div class="flex h-full items-center justify-center">
+      <div class="flex flex-col gap-6">
+        <a
+          v-for="app in apps"
+          :key="app.route"
+          :href="app.route"
+          :title="app.title"
+          class="group flex items-center justify-center rounded-md hover:shadow-sm transition"
+        >
+          <img
+            :src="app.logo"
+            :alt="app.title"
+            class="size-7 opacity-80 group-hover:opacity-100"
+          />
+        </a>
+      </div>
+    </div>
+  </aside>
+</template>

package/frappe/drive/components/DriveLogo.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="118"
+    height="118"
+    viewBox="0 0 118 118"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M93.9278 0H23.1013C10.3428 0 0 10.3428 0 23.1013V93.9278C0 106.686 10.3428 117.029 23.1013 117.029H93.9278C106.686 117.029 117.029 106.686 117.029 93.9278V23.1013C117.029 10.3428 106.686 0 93.9278 0Z"
+      fill="#016E7D"
+    />
+    <path
+      d="M80.1723 35.7545H59.7487L55.7059 28.2466H20.8965V38.7472H49.4056L53.4483 46.2551H82.955C83.9525 46.2551 84.7926 47.0951 84.7926 48.0927V76.4968C84.7926 77.4943 83.9525 78.3344 82.955 78.3344H33.2347C32.2371 78.3344 31.3971 77.4943 31.3971 76.4968V50.5603H20.8965V73.6616C20.8965 82.0096 27.6694 88.835 36.0173 88.835H80.1723C88.5203 88.835 95.2932 82.0621 95.2932 73.6616V50.8754C95.2932 42.5274 88.5203 35.702 80.1723 35.702V35.7545Z"
+      fill="#EEFBFF"
+    />
+  </svg>
+</template>

package/frappe/drive/components/InfoDialog.vue

@@ -0,0 +1,207 @@
+<template>
+  <Dialog v-model="open" @close="dialogType = ''">
+    <template #body-title>
+      <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9 cursor-pointer pr-2" @click="emitter.emit('rename')">
+        {{ entity.title }}
+      </h3>
+    </template>
+    <template #body-content>
+      <ul class="space-y-3 text-sm mb-4 text-ink-gray-8">
+        <span class="text-base font-semibold">Information</span>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Owner') }}:</span>
+          <span class="col-span-1">
+            <a :href="`mailto:${entity.owner}`">{{ entity.owner }}</a>
+          </span>
+        </li>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Type') }}:</span>
+          <span class="col-span-1">{{ entity.file_type }}</span>
+        </li>
+        <li v-if="entity.file_size">
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Size') }}:</span>
+          <span class="col-span-1">
+            {{ entity.file_size_pretty }}{{ ` (${entity.file_size})` }}
+          </span>
+        </li>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Modified') }}:</span>
+          <span class="col-span-1">{{ formatDate(entity.modified) }}</span>
+        </li>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Added') }}:</span>
+          <span class="col-span-1">{{ formatDate(entity.creation) }}</span>
+        </li>
+        <li class="flex items-center">
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Tags') }}:</span>
+          <TagInput class="flex-grow bg-transparent" :entity />
+        </li>
+      </ul>
+
+      <ul v-if="editor?.storage?.characterCount" class="space-y-3 text-sm mb-4 text-ink-gray-8">
+        <span class="text-base font-semibold">{{ __('Stats') }}</span>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Words') }}:</span>
+          <span class="col-span-1">{{
+            editor.storage.characterCount.words()
+            }}</span>
+        </li>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Characters') }}:</span>
+          <span class="col-span-1">{{
+            editor.storage.characterCount.characters()
+            }}</span>
+        </li>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Reading time') }}:</span>
+          <span class="col-span-1">
+            {{ Math.ceil(editor.storage.characterCount.words() / 200) }}
+            {{
+              Math.ceil(editor.storage.characterCount.words() / 200) > 1
+                ? 'minutes'
+                : 'minute'
+            }}
+          </span>
+        </li>
+      </ul>
+      <div class="flex justify-between items-center">
+        <span class="text-base font-semibold text-ink-gray-8">Access</span>
+        <Button v-if="entity.share" :variant="'subtle'" size="sm"
+          class="rounded flex justify-center items-center scale-[90%]" @click="emitter.emit('share')">
+          {{ __('Manage') }}
+        </Button>
+      </div>
+      <LoadingIndicator v-if="!getGeneralAccess.data?.type" class="size-4 mx-auto my-1" />
+      <ul v-else class="space-y-3 text-sm py-2">
+        <li class="flex">
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('General') }}:</span>
+          <div class="col-span-1 flex gap-2">
+            <div class="col-span-1 flex gap-2 items-center text-ink-gray-8">
+              <div class="rounded-full flex items-center justify-center p-0.5 size-4.5"
+                :class="accessConfig[getGeneralAccess.data.type].color">
+                <component :is="accessConfig[getGeneralAccess.data.type].icon" class="h-[90%] w-[90%]" />
+              </div>
+              <span>{{ accessConfig[getGeneralAccess.data.type].label }}</span>
+            </div>
+          </div>
+        </li>
+        <li>
+          <span class="inline-block w-24 text-ink-gray-5">{{ __('Shared') }}:</span>
+          <span v-if="userAccess.data?.length" class="col-span-1 text-ink-gray-8">
+            {{
+              userAccess.data.length +
+              ' ' +
+              (userAccess.data.length === 1 ? __('person') : __('people'))
+            }}
+            {{
+              userAccess.data.length < 3 ? '(' + userAccess.data.map((k) => k.user).join(', ') + ')'
+                : ''
+            }}
+          </span>
+          <span v-else>-</span>
+        </li>
+      </ul>
+      <ul v-if="developer" class="space-y-3 text-sm text-ink-gray-8 mb-4 mt-4">
+        <div>
+          <span class="text-base font-semibold">{{ __('Developer') }}</span>
+          <Button variant="subtle" size="sm" class="scale-[90%] float-right">
+            <a :href="'/app/drive-file/' + entity.name" target="_blank">Open in Desk</a>
+          </Button>
+        </div>
+        <li>
+          <span class="inline-block w-24">ID:</span>
+          <span class="col-span-1">{{ entity.name }}</span>
+        </li>
+        <li>
+          <span class="inline-block w-24">Disk path:</span>
+          <span class="col-span-1">{{ entity.path }}</span>
+        </li>
+        <li>
+          <span class="inline-block w-24">Team:</span>
+          <span class="col-span-1">{{ entity.team }}</span>
+        </li>
+        <li>
+          <span class="inline-block w-24">MIME type:</span>
+          <span class="col-span-1">{{ entity.mime_type }}</span>
+        </li>
+      </ul>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import {
+  Dialog,
+  Button,
+  LoadingIndicator,
+  createResource,
+} from '../../../src'
+import TagInput from './TagInput/TagInput.vue'
+import { ref, inject } from 'vue'
+import { onKeyDown } from '@vueuse/core'
+import { formatDate } from '../js/utils'
+
+import LucideBuilding2 from '~icons/lucide/building-2'
+import LucideLock from '~icons/lucide/lock'
+import LucideGlobe2 from '~icons/lucide/globe-2'
+
+
+const dialogType = defineModel()
+const open = ref(true)
+
+const editor = inject('editor')
+const props = defineProps({
+  entity: Object,
+  emitter: Object,
+})
+
+// Refactor to share with ShareDialog
+const getGeneralAccess = createResource({
+  url: 'drive.api.permissions.get_user_access',
+  makeParams: (params) => ({
+    ...params,
+    entity: props.entity.name,
+  }),
+  transform: (data) => {
+    if (!data || !data.read) {
+      if (getGeneralAccess.params.user === 'Guest')
+        getGeneralAccess.fetch({ team: 1 })
+      else
+        return {
+          type: 'restricted',
+        }
+    }
+    return { ...data, type: getGeneralAccess.params.team ? 'team' : 'public' }
+  },
+})
+getGeneralAccess.fetch({ user: 'Guest' })
+
+const userAccess = createResource({
+  url: 'drive.api.permissions.get_shared_with_list',
+  params: { entity: props.entity.name },
+  auto: true,
+})
+
+const developer = ref(false)
+onKeyDown('D', () => {
+  developer.value = !developer.value
+})
+
+const accessConfig = {
+  team: {
+    icon: LucideBuilding2,
+    color: 'bg-surface-blue-2 text-ink-blue-2',
+    label: 'Team',
+  },
+  public: {
+    icon: LucideGlobe2,
+    color: 'bg-surface-red-2 text-ink-red-3',
+    label: 'Public',
+  },
+  restricted: {
+    icon: LucideLock,
+    color: 'text-ink-gray-7 bg-surface-gray-4',
+    label: 'Restricted',
+  },
+}
+</script>