frappe-ui 0.1.261 → 0.1.262

package/frappe/drive/components/MoveDialog.vue

@@ -0,0 +1,450 @@
+<template>
+  <Dialog v-model="open" :options="{ size: 'lg' }" @close="dialogType = ''">
+    <template #body-main>
+      <div class="p-4 sm:px-6">
+        <div class="flex w-full justify-between gap-x-15 mb-4">
+          <div class="font-semibold text-2xl flex text-nowrap overflow-hidden">
+            <template v-if="props.entities.length > 1">
+              Moving {{ props.entities.length }} items
+            </template>
+            <template v-else>
+              Moving "
+              <div class="truncate max-w-[80%]">
+                {{ props.entities[0].title }}
+              </div>
+              "
+            </template>
+          </div>
+          <Button class="ml-auto" variant="ghost" @click="dialogType = ''">
+            <template #icon>
+              <LucideX class="size-4" />
+            </template>
+          </Button>
+        </div>
+        <Tabs v-model="tabIndex" as="div" :tabs="tabs">
+          <template #tab-panel>
+            <div class="py-1 h-64 overflow-auto flex flex-col">
+              <TeamSelector
+                v-if="tabIndex === 1"
+                v-model="chosenTeam"
+                class="py-2 px-1"
+              />
+              <Tree
+                v-for="k in tree.children"
+                :key="k.value"
+                node-key="value"
+                :node="k"
+              >
+                <template
+                  #node="{ node, hasChildren, isCollapsed, toggleCollapsed }"
+                >
+                  <div
+                    class="flex items-center cursor-pointer select-none gap-1 h-7 shrink-0"
+                    @click="openEntity(node)"
+                  >
+                    <div
+                      ref="iconRef"
+                      @click="
+                        (e) => {
+                          if (isCollapsed)
+                            node.children.forEach((k) =>
+                              fetchFolderContents(
+                                k,
+                                { entity_name: k.value },
+                                true,
+                              ),
+                            )
+                          toggleCollapsed(e)
+                        }
+                      "
+                    >
+                      <LucideChevronDown
+                        v-if="hasChildren && !isCollapsed"
+                        class="size-3.5"
+                      />
+                      <LucideChevronRight
+                        v-else-if="hasChildren"
+                        class="size-3.5"
+                      />
+                      <div v-else class="ps-3.5" />
+                    </div>
+                    <div
+                      class="flex-grow rounded-sm text-base truncate h-full flex items-center pl-1"
+                      :class="[
+                        selected === node.value
+                          ? 'bg-surface-gray-3'
+                          : 'hover:bg-surface-gray-2',
+                        entities[0].parent_entity === node.value
+                          ? 'cursor-not-allowed hover:bg-surface-white'
+                          : 'group',
+                      ]"
+                    >
+                      <LucideFolderClosed
+                        v-if="isCollapsed"
+                        class="mr-1 size-4"
+                      />
+                      <LucideFolder v-else class="mr-1 size-4" />
+                      <div v-if="node.value === null" class="overflow-visible">
+                        <Input
+                          v-model="node.label"
+                          v-focus
+                          type="text"
+                          input-class=" !h-6"
+                          @click.stop
+                          @keydown.enter="openEntity(node)"
+                        />
+                      </div>
+                      <span v-else
+                        >{{ node.label }}
+                        <span
+                          v-if="entities[0].parent_entity === node.value"
+                          class="text-ink-gray-5"
+                          >(current)</span
+                        ></span
+                      >
+                      <Button
+                        class="shrink hidden group-hover:block ml-auto"
+                        :class="{
+                          '!bg-surface-gray-3': selected === node.value,
+                        }"
+                        @click.stop="
+                          (e) => {
+                            let obj = {
+                              parent: node.value,
+                              value: null,
+                              label: 'New folder',
+                            }
+                            node.children.push(obj)
+                            if (isCollapsed) toggleCollapsed(e)
+                          }
+                        "
+                      >
+                        <LucideFolderPlus class="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </template>
+              </Tree>
+              <div
+                v-if="tree.loading"
+                class="text-base flex justify-center flex-1"
+              >
+                <LoadingIndicator class="w-4.5" />
+              </div>
+              <div
+                v-else-if="!tree.children.length"
+                class="flex justify-center flex-1"
+              >
+                <div
+                  class="self-center text-sm text-ink-gray-6 flex flex-col gap-2"
+                >
+                  <LucideFolderClosed class="size-5 self-center" />
+                  No folders found
+                </div>
+              </div>
+            </div>
+          </template>
+        </Tabs>
+        <div class="flex items-center justify-between pt-4">
+          <div class="flex items-center my-auto justify-start">
+            <p class="text-sm pr-0.5 shrink-0">Moving to:</p>
+            <Dropdown
+              v-if="dropDownBreadcrumbs.length"
+              class="h-7"
+              :options="dropDownBreadcrumbs"
+            >
+              <Button variant="ghost">
+                <LucideEllipsis class="size-3.5" />
+              </Button>
+            </Dropdown>
+            <span
+              v-if="dropDownBreadcrumbs.length"
+              class="text-ink-gray-5 mx-0.5"
+            >
+              {{ '/' }}
+            </span>
+            <div class="flex w-24 overflow-hidden">
+              <div
+                v-for="(crumb, index) in slicedBreadcrumbs"
+                :key="index"
+                class="flex items-center"
+              >
+                <span
+                  v-if="breadcrumbs.length > 1 && index > 0"
+                  class="text-ink-gray-5 mx-0.5"
+                >
+                  {{ '/' }}
+                </span>
+                <button
+                  class="text-base cursor-pointer truncate max-w-20"
+                  :title="crumb.title"
+                  :class="
+                    index === slicedBreadcrumbs.length - 1
+                      ? 'text-ink-gray-9 text-base font-medium p-1'
+                      : 'text-ink-gray-5 text-base rounded-[6px] hover:bg-surface-gray-2 p-1'
+                  "
+                  @click="closeEntity(crumb.name)"
+                >
+                  {{ crumb.title }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <Button
+            variant="solid"
+            class="ml-auto"
+            size="sm"
+            :disabled="
+              entities[0].parent_entity !== selected &&
+              chosenTeam === entities[0].team
+            "
+            :loading="move.loading"
+            @click="moveFile"
+          >
+            <template #prefix>
+              <LucideArrowLeftRight class="size-4" />
+            </template>
+            Move
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { watch, computed, h, ref, reactive } from 'vue'
+
+import {
+  createResource,
+  Dialog,
+  Button,
+  Tabs,
+  Dropdown,
+  Tree,
+  Input,
+  LoadingIndicator,
+  toast,
+} from '../../../src'
+import { move, getTeams } from '../js/resources'
+
+import { useRoute } from 'vue-router'
+
+import LucideBuilding2 from '~icons/lucide/building-2'
+import LucideChevronDown from '~icons/lucide/chevron-down'
+import LucideFolder from '~icons/lucide/folder'
+import LucideHome from '~icons/lucide/home'
+import LucideArrowLeftRight from '~icons/lucide/arrow-left-right'
+import TeamSelector from './TeamSelector.vue'
+
+const props = defineProps({
+  entities: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+})
+const emit = defineEmits(['success', 'complete'])
+
+const dialogType = defineModel()
+const open = ref(true)
+
+const route = useRoute()
+const tabIndex = ref(route.name == 'Home' ? 0 : 1)
+const chosenTeam = ref(route.params.team || '')
+const tree = reactive({
+  name: '',
+  label: 'Home',
+  children: [],
+  options: {
+    isCollapsed: true,
+  },
+})
+
+// State variables
+const selected = ref('')
+const breadcrumbs = ref([
+  { name: '', title: tabIndex.value === 0 ? 'Home' : 'Team' },
+])
+
+const tabs = [
+  {
+    label: 'Home',
+    icon: h(LucideHome, { class: 'size-4' }),
+  },
+  {
+    label: 'Teams',
+    icon: h(LucideBuilding2, { class: 'size-4' }),
+  },
+  // {
+  //   label: "Favourites",
+  //   icon: h(Star, { class: "size-4" }),
+  // },
+]
+
+const folderContents = createResource({
+  url: 'drive.api.list.files',
+  makeParams: (params) => ({
+    ...params,
+    team: chosenTeam.value,
+    is_active: 1,
+    folders: 1,
+  }),
+})
+
+const fetchFolderContents = (tree, params = {}, nested = false) => {
+  folderContents.fetch(params, {
+    onSuccess: (data) => {
+      tree.children = []
+      data.forEach((item) => {
+        const node = reactive({
+          ...item,
+          label: item.title,
+          value: item.name,
+          children: [],
+        })
+        node.isCollapsed = true
+        tree.children.push(node)
+        if (!nested)
+          fetchFolderContents(
+            node,
+            { ...params, entity_name: node.value },
+            true,
+          )
+      })
+      tree.loading = false
+    },
+  })
+}
+
+const selectedPerms = createResource({
+  url: 'drive.api.permissions.get_entity_with_permissions',
+  makeParams: () => ({
+    entity_name: selected.value,
+  }),
+  onSuccess: (data) => {
+    const team = getTeams.data[data.team]
+    const first = [
+      {
+        name: '',
+        title: team ? team.title : 'Home',
+      },
+    ]
+    breadcrumbs.value = first.concat(data.breadcrumbs.slice(1))
+  },
+})
+
+watch(
+  [tabIndex, chosenTeam],
+  ([newValue, team], [prev, _]) => {
+    selected.value = ''
+    tree.loading = true
+    if ((newValue === 1 && !team) || (newValue === 0 && prev == newValue))
+      return
+    tree.children = []
+    switch (newValue) {
+      case 0:
+        chosenTeam.value = ''
+        breadcrumbs.value = [{ name: '', title: 'Home' }]
+        fetchFolderContents(tree)
+        break
+      case 1:
+        breadcrumbs.value = [{ name: '', title: getTeams.data[team].title }]
+        fetchFolderContents(tree)
+        break
+      case 2:
+        folderContents.fetch({
+          entity_name: '',
+          favourites_only: true,
+        })
+        break
+    }
+  },
+  { immediate: true },
+)
+
+// Breadcrumb logic
+const slicedBreadcrumbs = computed(() => {
+  if (breadcrumbs.value.length > 3) {
+    return breadcrumbs.value.slice(-3)
+  }
+  return breadcrumbs.value
+})
+
+const dropDownBreadcrumbs = computed(() => {
+  const allExceptLastTwo = breadcrumbs.value.slice(0, -3)
+  return allExceptLastTwo.map((item) => {
+    return {
+      ...item,
+      icon: null,
+      label: item.title,
+      onClick: () => closeEntity(item.name),
+    }
+  })
+})
+
+// New folder logic
+const createdNode = ref(null)
+const createFolder = createResource({
+  url: 'drive.api.files.create_folder',
+  makeParams(params) {
+    return {
+      ...params,
+      team: chosenTeam.value,
+    }
+  },
+  validate(params) {
+    if (!params?.title) return false
+  },
+  onSuccess(data) {
+    createdNode.value.value = data.name
+    createdNode.value.children = []
+    selected.value = data.name
+    selectedPerms.fetch()
+    createdNode.value = null
+  },
+  onError() {
+    toast.error('There is already a folder with this name here.')
+  },
+})
+
+// Selection logic
+function openEntity(node) {
+  if (props.entities[0].parent_entity === node.value) return
+  if (!node.value) {
+    createdNode.value = node
+    createFolder.fetch({
+      title: node.label,
+      personal: tabIndex.value === 0,
+      parent: node.parent,
+    })
+  } else {
+    selected.value = node.value
+    selectedPerms.fetch({
+      entity_name: selected.value,
+    })
+  }
+}
+
+function closeEntity(name) {
+  const index = breadcrumbs.value.findIndex((obj) => obj.name === name)
+  if (breadcrumbs.value.length > 1 && index !== breadcrumbs.value.length - 1) {
+    breadcrumbs.value = breadcrumbs.value.slice(0, index + 1)
+    selected.value = breadcrumbs.value[breadcrumbs.value.length - 1].name
+    folderContents.fetch({
+      entity_name: selected.value,
+      personal: selected.value === '' ? 1 : -1,
+    })
+  }
+}
+
+const moveFile = async () => {
+  open.value = false
+  emit('success')
+  await move.submit({
+    entity_names: props.entities.map((obj) => obj.name),
+    new_parent: selected.value,
+    team: chosenTeam.value,
+  })
+  emit('complete')
+}
+</script>

package/frappe/drive/components/RenameDialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <Dialog
+    v-model="open"
+    :options="{
+      title: 'Rename',
+      size: 'xs',
+      actions: [
+        {
+          label: 'Confirm',
+          variant: 'solid',
+          disabled: !newTitle || newTitle === entity.title,
+          onClick: submit,
+        },
+      ],
+    }"
+    @close="dialogType = ''"
+  >
+    <template #body-content>
+      <div class="flex gap-3">
+        <FormControl
+          v-model="newTitle"
+          v-focus
+          class="grow"
+          type="text"
+          @keyup.enter="submit"
+        />
+        <div
+          v-if="file_ext"
+          disabled
+          class="w-12 text-ink-gray-7 bg-surface-gray-2 rounded text-center self-center py-1.5 text-sm"
+        >
+          {{ file_ext }}
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Dialog } from '../../../src'
+import { rename } from '../js/resources'
+
+const props = defineProps({ entity: Object, modelValue: String })
+const emit = defineEmits(['update:modelValue', 'success'])
+const dialogType = defineModel()
+const open = ref(true)
+
+const newTitle = ref('')
+const file_ext = ref('')
+
+if (props.entity.is_group || props.entity.document) {
+  newTitle.value = props.entity.title
+} else {
+  const parts = props.entity.title.split('.')
+  if (parts.length > 1) {
+    newTitle.value = parts.slice(0, -1).join('.')
+    file_ext.value = parts[parts.length - 1]
+  } else {
+    newTitle.value = parts[0]
+  }
+}
+
+const submit = () => {
+  const formattedTitle =
+    newTitle.value + (file_ext.value ? '.' + file_ext.value : '')
+  rename.submit({
+    entity_name: props.entity.name,
+    new_title: formattedTitle,
+  })
+  emit('success', {
+    name: props.entity.name,
+    title: formattedTitle,
+  })
+}
+</script>

package/frappe/drive/components/Select/Select.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  SelectLabel,
+  SelectPortal,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from 'reka-ui'
+import { SimpleOption } from '../TagInput/types'
+import {
+  isGroup,
+  getLabel,
+  getMultipleLabel,
+  getValue,
+  getIcon,
+  RenderIcon,
+  isDisabled,
+} from '../TagInput/utils'
+
+import LucideChevronDown from '~icons/lucide/chevron-down'
+import { SelectProps, SelectValue as SelectValue_ } from './types'
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  placeholder: 'Select an option',
+})
+
+const selected = defineModel<SelectValue_>()
+const selectedOption = computed<SimpleOption | SimpleOption[]>(() => {
+  if (!selected.value) return null
+  if (props.multiple) {
+    return selected.value.map((k) =>
+      flatOptions.value.find((opt) => getValue(opt) === k),
+    )
+  }
+  return flatOptions.value.find((opt) => getValue(opt) === selected.value)
+})
+const selectedOptionIcon = computed(() =>
+  selectedOption.value && !props.multiple
+    ? getIcon(selectedOption.value)
+    : null,
+)
+
+const flatOptions = computed<SimpleOption[]>(() =>
+  props.options.flatMap((opt) => (isGroup(opt) ? opt.options : opt)),
+)
+
+const labelFunction = (val: SelectValue_, selected = false) => {
+  if (props.getLabel) return props.getLabel(val, selected)
+  if (!val || (val.map && !val.length)) return props.placeholder
+  return (val.map ? getMultipleLabel : getLabel)(val)
+}
+</script>
+
+<template>
+  <div class="relative">
+    <SelectRoot v-model="selected" :multiple>
+      <SelectTrigger
+        :disabled
+        class="flex h-7 w-full overflow-hidden focus:ring-0 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 focus:outline-0 focus:ring-0"
+        :class="{ 'opacity-50 pointer-events-none': disabled }"
+      >
+        <!-- Using SelectValue alone renders the icon too -->
+        <SelectValue
+          :placeholder
+          class="gap-2 text-base h-full flex items-center w-full focus:outline-0 text-ink-gray-8 data-[placeholder]:text-ink-gray-4"
+        >
+          <RenderIcon v-if="selectedOptionIcon" :icon="selectedOptionIcon" />
+          <div class="flex-1 flex justify-start truncate">
+            {{ labelFunction(selectedOption, true) }}
+          </div>
+          <RenderIcon :icon="LucideChevronDown" />
+        </SelectValue>
+      </SelectTrigger>
+
+      <SelectPortal>
+        <SelectContent
+          :hide-when-detached="true"
+          :align="'start'"
+          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+        >
+          <SelectViewport
+            class="max-h-60 overflow-auto p-1.5"
+            :class="{ 'pt-0': isGroup(options[0]) }"
+          >
+            <template v-for="(optionOrGroup, index) in options" :key="index">
+              <component
+                :is="isGroup(optionOrGroup) ? SelectGroup : 'div'"
+                :class="{ '': isGroup(optionOrGroup) }"
+              >
+                <template v-if="isGroup(optionOrGroup)">
+                  <hr v-if="optionOrGroup.group === true" class="my-1.5" />
+                  <SelectLabel
+                    v-else
+                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
+                  >
+                    {{ optionOrGroup.group }}
+                  </SelectLabel>
+                </template>
+                <SelectItem
+                  v-for="(option, idx) in optionOrGroup.options || [
+                    optionOrGroup,
+                  ]"
+                  :key="idx"
+                  :value="getValue(option)"
+                  :disabled="isDisabled(option)"
+                  class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 px-2.5 py-1.5 relative select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3"
+                >
+                  <SelectItemText>
+                    <span class="flex items-center gap-2 pr-6 flex-1">
+                      <RenderIcon :icon="getIcon(option)" />
+                      {{ labelFunction(option) }}
+                    </span>
+                  </SelectItemText>
+                  <SelectItemIndicator
+                    class="inline-flex ml-auto items-center justify-center"
+                  >
+                    <LucideCheck class="size-4" />
+                  </SelectItemIndicator>
+                </SelectItem>
+              </component>
+              <SelectSeparator />
+            </template>
+          </SelectViewport>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
+  </div>
+</template>

package/frappe/drive/components/Select/types.ts

@@ -0,0 +1,18 @@
+type SelectOption =
+  | string
+  | {
+      label: string
+      value: string
+      icon?: any
+      disabled?: boolean
+    }
+
+export type SelectValue = string | string[] | undefined
+
+export interface SelectProps {
+  options: SelectOption[]
+  placeholder?: string
+  disabled?: boolean
+  multiple?: boolean
+  getLabel?: Function
+}