Merge pull request #66 from hughsaffar/feature/abstract-bem-style

Refactor Components to Use BEM Convention

README.md

@@ -98,6 +98,11 @@ app.use(VueFinder, {
 </script>
 ```
 
+### Styling
+Vuefinder uses the BEM (Block Element Modifier) convention for its CSS classes, with default styles applied using TailwindCSS. This structured approach helps maintain a clear and consistent naming convention for CSS classes, making it easier to understand and manage styles across the project.
+
+To customize or update the styles, simply find the appropriate BEM class in the component’s style section and override the styles as needed.
+
 ### Props
 
 | Prop          |     Value     | Default  | Description                                                |

src/assets/css/_effects.scss

@@ -0,0 +1,10 @@
+/* modal fade effect */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

src/assets/css/_forms.scss

@@ -0,0 +1,52 @@
+.vf-btn {
+  @apply
+  inline-flex justify-center
+  w-full px-4 py-2 rounded-md border shadow-sm
+  text-base font-medium tracking-wide
+  focus:outline-none focus:ring-2 focus:ring-offset-2
+  mt-0.5 sm:mx-1 sm:w-auto sm:text-sm;
+}
+
+.vf-btn-primary {
+  @apply
+  border-transparent
+  text-white
+  bg-blue-600 hover:bg-blue-700
+  focus:ring-indigo-500
+  dark:text-gray-50 dark:border-gray-800 dark:bg-gray-700 dark:hover:bg-gray-500;
+}
+
+.vf-btn-primary.disabled {
+  @apply
+  hover:bg-blue-600
+  dark:hover:bg-gray-700
+}
+
+.vf-btn-secondary {
+  @apply
+  border-gray-300
+  text-gray-700
+  bg-white hover:bg-gray-50
+  focus:ring-gray-500
+  dark:text-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-500;
+}
+
+.vf-btn-secondary.disabled {
+  @apply
+  hover:bg-gray-50
+  dark:hover:bg-gray-800
+}
+
+.vf-btn-danger {
+  @apply
+  border-transparent
+  text-white
+  bg-red-600 hover:bg-red-700
+  focus:ring-red-200 focus:ring-1 focus:ring-offset-1
+  dark:text-gray-50 dark:border-red-800 dark:bg-red-700 dark:hover:bg-red-500;
+}
+
+.disabled {
+  @apply
+  opacity-50 cursor-not-allowed
+}

src/assets/css/_previews.scss

@@ -0,0 +1,115 @@
+// Default Previews
+
+.vuefinder__default-preview {
+  @apply flex flex-col;
+}
+
+.vuefinder__default-preview__header {
+  @apply flex mb-2;
+}
+
+.vuefinder__default-preview__title {
+  @apply text-lg leading-6 font-medium text-gray-900 dark:text-gray-400;
+}
+
+// Image Preview
+
+.vuefinder__image-preview {
+  @apply flex flex-col;
+}
+
+.vuefinder__image-preview__header {
+  @apply flex items-center mb-2;
+}
+
+.vuefinder__image-preview__title {
+  @apply text-lg leading-6 font-medium text-gray-900 dark:text-gray-400;
+}
+
+.vuefinder__image-preview__actions {
+  @apply ml-auto flex items-center;
+}
+
+.vuefinder .vuefinder__image-preview__crop-button {
+  @apply ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm;
+}
+
+.vuefinder .vuefinder__image-preview__edit-button {
+  @apply ml-1 px-2 py-1 text-blue-500;
+}
+
+.vuefinder__image-preview__image-container {
+  @apply w-full flex justify-center;
+}
+
+.vuefinder .vuefinder__image-preview__image {
+  @apply max-w-[50vh] max-h-[50vh];
+}
+
+// Auido Preview
+.vuefinder__audio-preview__title {
+  @apply mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400;
+}
+
+.vuefinder .vuefinder__audio-preview__audio {
+  @apply w-full;
+}
+
+// PDF Preview
+
+.vuefinder__pdf-preview__title {
+  @apply mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400;
+}
+
+.vuefinder .vuefinder__pdf-preview__object {
+  @apply h-[60vh];
+}
+
+.vuefinder .vuefinder__pdf-preview__iframe {
+  @apply border-0;
+}
+
+// Text Preview
+
+.vuefinder__text-preview {
+  @apply flex flex-col;
+}
+
+.vuefinder__text-preview__header {
+  @apply flex items-center mb-2;
+}
+
+.vuefinder__text-preview__title {
+  @apply text-lg leading-6 font-medium text-gray-900 dark:text-gray-400;
+}
+
+.vuefinder__text-preview__actions {
+  @apply ml-auto flex items-center;
+}
+
+.vuefinder .vuefinder__text-preview__save-button {
+  @apply ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm;
+}
+
+.vuefinder .vuefinder__text-preview__edit-button {
+  @apply ml-1 px-2 py-1 text-blue-500;
+}
+
+.vuefinder__text-preview__content {
+  @apply p-2 border font-normal whitespace-pre-wrap border-gray-200 dark:border-gray-700/50 dark:text-gray-200 rounded min-h-[200px] max-h-[60vh] text-xs overflow-auto;
+}
+
+.vuefinder .vuefinder__text-preview__textarea {
+  @apply w-full p-2 rounded dark:bg-gray-700 dark:text-gray-200 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:selection:bg-gray-500 min-h-[200px] max-h-[60vh];
+}
+
+// Video Preview
+
+.vuefinder__video-preview__title {
+  @apply mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400;
+}
+
+.vuefinder .vuefinder__video-preview__video {
+  @apply w-full aspect-video;
+}
+

src/assets/css/_scrollbars.scss

@@ -0,0 +1,38 @@
+.vf-scrollbar {
+  /* width */
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track-piece {
+    @apply bg-gray-100 dark:bg-slate-900/50;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    @apply bg-gray-300 dark:bg-slate-700;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-400 dark:bg-slate-600;
+  }
+
+  &::-webkit-scrollbar-corner {
+    @apply bg-transparent;
+  }
+}
+
+.vf-explorer-scrollbar {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track-piece,
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-thumb:hover,
+  &::-webkit-scrollbar-corner {
+    @apply bg-transparent;
+  }
+}

src/assets/css/components/_action_message.scss

@@ -0,0 +1,8 @@
+
+.vuefinder__action-message {
+  @apply text-sm text-green-600 dark:text-green-600 transition-opacity duration-500 ease-out;
+}
+
+.vuefinder__action-message--hidden {
+  @apply opacity-0;
+}

src/assets/css/components/_breadcrumb.scss

@@ -0,0 +1,80 @@
+
+.vuefinder__breadcrumb__container {
+  @apply space-x-0.5 flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm grow-0;
+}
+
+.vuefinder__breadcrumb__toggle-tree {
+  @apply h-6 w-6 p-0.5 rounded cursor-pointer text-slate-700;
+}
+
+.vuefinder__breadcrumb__toggle-tree--active {
+  @apply bg-gray-300 dark:bg-gray-700;
+}
+
+.vuefinder__breadcrumb__go-up--active {
+  @apply text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer;
+}
+
+.vuefinder__breadcrumb__go-up--inactive {
+  @apply text-gray-400 dark:text-neutral-500;
+}
+
+.vuefinder__breadcrumb__search-container {
+  @apply flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden;
+}
+
+.vuefinder__breadcrumb__list {
+  @apply flex leading-6;
+}
+
+.vuefinder__breadcrumb__hidden-list {
+  @apply flex;
+}
+
+.vuefinder__breadcrumb__separator {
+  @apply text-neutral-300 dark:text-gray-600 mx-0.5;
+}
+
+.vuefinder__breadcrumb__hidden-toggle {
+  @apply text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer;
+}
+
+.vuefinder__breadcrumb__hidden-toggle-icon {
+  @apply px-1 pointer-events-none;
+}
+
+.vuefinder__breadcrumb__visible-list {
+  @apply flex leading-6 w-full overflow-hidden;
+}
+
+.vuefinder__breadcrumb__item {
+  @apply px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer whitespace-nowrap;
+}
+
+.vuefinder__breadcrumb__search-mode {
+  @apply relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full;
+}
+
+.vuefinder__breadcrumb__search-input {
+  @apply w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent;
+}
+
+.vuefinder__breadcrumb__hidden-dropdown {
+  @apply z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600;
+}
+
+.vuefinder__breadcrumb__hidden-item {
+  @apply px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap;
+}
+
+.vuefinder__breadcrumb__hidden-item-content {
+  @apply flex pointer-events-none;
+}
+
+.vuefinder .vuefinder__breadcrumb__hidden-item-icon {
+  @apply h-5 w-5;
+}
+
+.vuefinder .vuefinder__breadcrumb__hidden-item-text {
+  @apply inline-block w-full text-ellipsis overflow-hidden;
+}

src/assets/css/components/_context_menu.scss

@@ -0,0 +1,16 @@
+
+.vuefinder__context-menu {
+  @apply z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-400 dark:border-gray-600 shadow rounded-sm select-none;
+}
+
+.vuefinder__context-menu__item {
+  @apply cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700;
+}
+
+.vuefinder__context-menu__link {
+  @apply block pl-2 pr-3 py-2;
+}
+
+.vuefinder__context-menu__action {
+  @apply pl-2 pr-3 py-1.5;
+}

src/assets/css/components/_drag_item.scss

@@ -0,0 +1,8 @@
+
+.vuefinder__drag-item__container {
+  @apply absolute -z-50 -top-96;
+}
+
+.vuefinder__drag-item__count {
+  @apply text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs;
+}