Updating the package for ARCANESOFT v4

.editorconfig

@@ -1,15 +1,15 @@
-# This file is for unifying the coding style for different editors and IDEs
-# editorconfig.org
-
 root = true
 
 [*]
-end_of_line = lf
 charset = utf-8
+end_of_line = lf
+insert_final_newline = true
 indent_style = space
 indent_size = 4
 trim_trailing_whitespace = true
-insert_final_newline = true
 
 [*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
 indent_size = 2

.gitattributes

@@ -1,11 +1,13 @@
 * text=auto
 
 /.github          export-ignore
+/_docs            export-ignore
 /tests            export-ignore
 .editorconfig     export-ignore
 .gitattributes    export-ignore
 .gitignore        export-ignore
 .scrutinizer.yml  export-ignore
 .travis.yml       export-ignore
+phpcs.xml.dist    export-ignore
 phpunit.xml.dist  export-ignore
 CONTRIBUTING.md   export-ignore

.gitignore

@@ -1,6 +1,5 @@
 /build/
-/node_modules/
 /vendor/
-/composer.lock
 /composer.phar
-/yarn.lock
+/composer.lock
+.phpunit.result.cache

assets/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+npm-debug.log
+yarn-error.log

assets/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@arcanesoft/media",
+    "private": true,
+    "version": "1.0.0",
+    "main": "scripts/index.ts",
+    "dependencies": {
+        "@arcanescripts/translator": "^1.0",
+        "@arcanesoft/core": "^1.0",
+        "@uppy/core": "^1.12.0",
+        "@uppy/dashboard": "^1.11.0",
+        "@uppy/xhr-upload": "^1.6.1",
+        "file-saver": "^2.0",
+        "vue": "^3.0"
+    },
+    "devDependencies": {
+        "@types/node": "^12.7",
+        "ts-loader": "^8.0.4",
+        "typescript": "^4.0.3"
+    }
+}

assets/scripts/components/buttons/close-tool.ts

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue'
+import { useActions } from '../../store'
+import { trans } from '../../helpers/translator'
+
+export default defineComponent({
+    name: 'v-media-close-button',
+
+    setup() {
+        const { closeMediaTool } = useActions()
+
+        const onClick = () => closeMediaTool()
+
+        return {
+            trans,
+            onClick,
+        };
+    },
+
+    template: `
+        <button @click.prevent="onClick" type="button"
+                class="btn btn-outline-secondary">
+            <i class="fas fa-fw fa-times"></i> {{ trans('Close') }}
+        </button>
+    `,
+})

assets/scripts/components/buttons/delete-media.ts

@@ -0,0 +1,30 @@
+import { defineComponent } from 'vue'
+import { MEDIA_TOOLS } from '../../enums'
+import { useActions, useGetters } from '../../store'
+import { trans } from '../../helpers/translator'
+
+export default defineComponent({
+    name: 'v-delete-media-button',
+
+    setup() {
+        const { openMediaTool } = useActions()
+        const { hasSelectedItems } = useGetters()
+
+        const onClick = (): void => openMediaTool(MEDIA_TOOLS.DELETE_MEDIA)
+
+
+        return {
+            trans,
+            hasSelectedItems,
+            onClick,
+        };
+    },
+
+    template: `
+        <button @click.prevent="onClick" type="button"
+                :disabled=" ! hasSelectedItems"
+                :title="trans('Delete')" class="btn btn-danger">
+            <i class="far fa-fw fa-trash-alt"></i>
+        </button>
+    `,
+})

assets/scripts/components/buttons/display-mode.ts

@@ -0,0 +1,40 @@
+import { defineComponent, PropType } from 'vue'
+import { DisplayMode } from '../../types'
+import { useHelpers, useMutations } from '../../store'
+import { trans } from '../../helpers/translator'
+
+export default defineComponent({
+    name: 'v-display-mode-button',
+
+    props: {
+        mode: {
+            type: Object as PropType<DisplayMode>,
+            required: true,
+        },
+    },
+
+    setup(props) {
+        const { setSelectedDisplayMode } = useMutations()
+        const { isDisplayModeSelected } = useHelpers()
+
+        const isSelected = isDisplayModeSelected(props.mode.key)
+
+        const onClick = (): void => {
+            if ( ! isSelected.value)
+                setSelectedDisplayMode(props.mode.key)
+        }
+
+        return {
+            trans,
+            isSelected,
+            onClick,
+        }
+    },
+
+    template: `
+        <button @click.prevent="onClick" :title="trans(mode.title)" type="button"
+            class="display-mode btn btn-outline-secondary" :class="{'active': isSelected}">
+            <i :class="mode.icon"></i>
+        </button>
+    `,
+})

assets/scripts/components/buttons/move-media.ts

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+import { MEDIA_TOOLS } from '../../enums'
+import { useActions, useGetters } from '../../store'
+import { trans } from '../../helpers/translator'
+
+export default defineComponent({
+    name: 'v-move-media-button',
+
+    setup() {
+        const { openMediaTool } = useActions()
+        const { hasSelectedItems } = useGetters()
+
+        const onClick = (): void => openMediaTool(MEDIA_TOOLS.MOVE_MEDIA)
+
+        return {
+            trans,
+            hasSelectedItems,
+            onClick,
+        };
+    },
+
+    template: `
+        <button @click.prevent="onClick" type="button"
+                :title="trans('Move')" :disabled=" ! hasSelectedItems"
+                class="btn btn-primary">
+            <i class="fas fa-fw fa-dolly"></i>
+        </button>
+    `,
+})

assets/scripts/components/buttons/new-folder.ts

@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue'
+import { useActions } from '../../store'
+import { MEDIA_TOOLS } from '../../enums'
+import { trans } from '../../helpers/translator'
+
+export default defineComponent({
+    name: 'v-media-new-folder-button',
+
+    setup() {
+        const { openMediaTool } = useActions()
+
+        const onClick = (): void => openMediaTool(MEDIA_TOOLS.NEW_FOLDER)
+
+        return {
+            trans,
+            onClick,
+        };
+    },
+
+    template: `
+        <button @click.prevent="onClick" type="button"
+                class="btn btn-outline-secondary">
+            <i class="fas fa-fw fa-folder-plus"></i> {{ trans('New Folder') }}
+        </button>
+    `,
+})