@kennofizet/apphub-frontend 0.1.0

package/src/modules/desktop/components/AppHubDesktopDevOriginBar.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-if="visible"
+    class="apphub-dev-origin-bar"
+    :class="`apphub-dev-origin-bar--${placement}`"
+    role="region"
+    :aria-label="labels.title"
+  >
+    <span class="apphub-dev-origin-bar__badge">DEV</span>
+    <div v-if="placement === 'corner'" class="apphub-dev-origin-bar__text">
+      <strong class="apphub-dev-origin-bar__title">{{ labels.title }}</strong>
+      <span class="apphub-dev-origin-bar__status">{{ statusLabel }}</span>
+    </div>
+    <span v-else class="apphub-dev-origin-bar__status apphub-dev-origin-bar__status--inline">
+      {{ statusLabel }}
+    </span>
+    <button
+      type="button"
+      class="apphub-dev-origin-bar__btn"
+      :title="labels.title"
+      @click="toggle"
+    >
+      {{ actionLabel }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+import { useDevOriginToggle } from '../../../composables/useDevOriginToggle.js'
+
+defineProps({
+  placement: { type: String, default: 'corner' },
+})
+
+const { visible, devFriendlyOn, toggle } = useDevOriginToggle()
+const moduleOptions = inject('apphubOptions', {})
+const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
+
+const labels = computed(() => ({
+  title: t('dev_origin_bar_title', lang.value),
+  status_relaxed: t('dev_origin_status_relaxed', lang.value),
+  status_strict: t('dev_origin_status_strict', lang.value),
+  action_enable_strict: t('dev_origin_action_strict', lang.value),
+  action_enable_relaxed: t('dev_origin_action_relaxed', lang.value),
+}))
+
+const statusLabel = computed(() =>
+  devFriendlyOn.value ? labels.value.status_relaxed : labels.value.status_strict,
+)
+
+const actionLabel = computed(() =>
+  devFriendlyOn.value ? labels.value.action_enable_strict : labels.value.action_enable_relaxed,
+)
+</script>

package/src/modules/desktop/components/AppHubDesktopDropLayer.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="apphub-drop-layer">
+    <div class="apphub-drop-layer__glow" />
+    <div class="apphub-drop-layer__hint">
+      <span class="apphub-drop-layer__hint-icon">⬇</span>
+      <p>{{ hint }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  hint: { type: String, default: '' },
+})
+</script>

package/src/modules/desktop/components/AppHubDesktopDropTarget.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    v-if="target"
+    class="apphub-desktop__drop-target"
+    :style="{ left: `${target.x}px`, top: `${target.y}px` }"
+  >
+    <div class="apphub-desktop__drop-target-panel">
+      <p class="apphub-desktop__drop-target-label">{{ label }}</p>
+      <div class="apphub-desktop__drop-target-grid">
+        <span
+          v-for="app in previewApps"
+          :key="app.id"
+          class="apphub-desktop__drop-target-icon"
+          :title="app.name"
+        >
+          {{ app.icon }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  target: { type: Object, default: null },
+  label: { type: String, default: '' },
+})
+
+const previewApps = computed(() => props.target?.apps?.slice(0, 9) ?? [])
+</script>

package/src/modules/desktop/components/AppHubDesktopIconContextMenu.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    v-if="open"
+    class="apphub-icon-menu"
+    :style="{ left: `${x}px`, top: `${y}px` }"
+    role="menu"
+    @click.stop
+    @contextmenu.prevent
+  >
+    <button type="button" class="apphub-icon-menu__item" role="menuitem" @click="emit('open')">
+      {{ openLabel }}
+    </button>
+    <button
+      v-if="showPin"
+      type="button"
+      class="apphub-icon-menu__item"
+      role="menuitem"
+      @click="emit('pin')"
+    >
+      {{ pinLabel }}
+    </button>
+    <button
+      v-if="showFavorite"
+      type="button"
+      class="apphub-icon-menu__item"
+      role="menuitem"
+      @click="emit('favorite')"
+    >
+      {{ favoriteLabel }}
+    </button>
+    <button
+      v-if="canRename"
+      type="button"
+      class="apphub-icon-menu__item"
+      role="menuitem"
+      @click="emit('rename')"
+    >
+      {{ renameLabel }}
+    </button>
+    <button
+      v-if="showUninstall"
+      type="button"
+      class="apphub-icon-menu__item apphub-icon-menu__item--danger"
+      role="menuitem"
+      @click="emit('uninstall')"
+    >
+      {{ uninstallLabel }}
+    </button>
+    <div class="apphub-icon-menu__sep" role="separator" />
+    <button type="button" class="apphub-icon-menu__item" role="menuitem" @click="emit('info')">
+      {{ propertiesLabel }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  open: { type: Boolean, default: false },
+  x: { type: Number, default: 0 },
+  y: { type: Number, default: 0 },
+  canRename: { type: Boolean, default: true },
+  showPin: { type: Boolean, default: false },
+  showFavorite: { type: Boolean, default: false },
+  showUninstall: { type: Boolean, default: false },
+  openLabel: { type: String, default: '' },
+  pinLabel: { type: String, default: '' },
+  favoriteLabel: { type: String, default: '' },
+  renameLabel: { type: String, default: '' },
+  uninstallLabel: { type: String, default: '' },
+  propertiesLabel: { type: String, default: '' },
+})
+
+const emit = defineEmits(['open', 'pin', 'favorite', 'uninstall', 'rename', 'info', 'close'])
+</script>

package/src/modules/desktop/components/AppHubDesktopIconFolder.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    v-if="open"
+    class="apphub-icon-folder"
+    :class="{ 'apphub-icon-folder--preview': preview }"
+    :style="{ left: `${x}px`, top: `${y}px` }"
+    @mousedown.stop
+    @click.stop
+  >
+    <div class="apphub-icon-folder__panel">
+      <header class="apphub-icon-folder__header">
+        <span class="apphub-icon-folder__title">{{ title }}</span>
+        <span class="apphub-icon-folder__count">{{ countLabel }}</span>
+      </header>
+      <div class="apphub-icon-folder__grid">
+        <button
+          v-for="app in apps"
+          :key="app.id"
+          type="button"
+          class="apphub-icon-folder__item"
+          :class="{
+            'apphub-icon-folder__item--dragging': !preview && isDragging(app.id),
+            'apphub-icon-folder__item--holding': !preview && isHolding(app.id),
+            'apphub-icon-folder__item--preview-new':
+              preview && previewNewIds.includes(app.id),
+          }"
+          :tabindex="preview ? -1 : 0"
+          @mousedown.stop="!preview && emit('item-pointer-down', app, $event)"
+          @dblclick.stop="!preview && emit('open-app', app)"
+          @contextmenu.prevent.stop="!preview && emit('item-context-menu', app, $event)"
+        >
+          <span class="apphub-icon-folder__item-icon-wrap">
+            <span class="apphub-icon-folder__item-icon">{{ app.icon }}</span>
+            <span v-if="app.status === 'draft'" class="apphub-icon-folder__item-flag">D</span>
+          </span>
+          <span class="apphub-icon-folder__item-label">{{ app.name }}</span>
+        </button>
+      </div>
+      <p class="apphub-icon-folder__hint">{{ hint }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  open: { type: Boolean, default: false },
+  preview: { type: Boolean, default: false },
+  x: { type: Number, default: 0 },
+  y: { type: Number, default: 0 },
+  apps: { type: Array, default: () => [] },
+  title: { type: String, default: '' },
+  countLabel: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  previewNewIds: { type: Array, default: () => [] },
+  isDragging: { type: Function, default: () => false },
+  isHolding: { type: Function, default: () => false },
+})
+
+const emit = defineEmits(['item-pointer-down', 'open-app', 'item-context-menu'])
+</script>

package/src/modules/desktop/components/AppHubDesktopIconGroup.vue

@@ -0,0 +1,58 @@
+<template>
+  <button
+    type="button"
+    class="apphub-desktop__icon apphub-desktop__icon--placed apphub-desktop__icon--group"
+    :class="{
+      'apphub-desktop__icon--dragging': dragging,
+      'apphub-desktop__icon--holding': holding,
+      'apphub-desktop__icon--drop-target': dropHighlight,
+    }"
+    :style="{ left: `${x}px`, top: `${y}px` }"
+    :title="title"
+    @mousedown.stop="emit('pointer-down', $event)"
+    @click.stop="emit('click')"
+    @contextmenu.prevent.stop="emit('context-menu', $event)"
+  >
+    <span class="apphub-desktop__group-preview">
+      <span
+        v-for="(app, i) in previewApps"
+        :key="app.id"
+        class="apphub-desktop__group-preview-item"
+        :style="previewStyle(i)"
+      >
+        {{ app.icon }}
+      </span>
+    </span>
+    <span class="apphub-desktop__icon-label" :title="label">{{ label }}</span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  apps: { type: Array, default: () => [] },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true },
+  label: { type: String, default: '' },
+  title: { type: String, default: '' },
+  dragging: { type: Boolean, default: false },
+  holding: { type: Boolean, default: false },
+  dropHighlight: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['pointer-down', 'click', 'context-menu'])
+
+const previewApps = computed(() => props.apps.slice(0, 4))
+
+const previewOffsets = [
+  { left: '4px', top: '4px' },
+  { left: '22px', top: '4px' },
+  { left: '4px', top: '22px' },
+  { left: '22px', top: '22px' },
+]
+
+function previewStyle(index) {
+  return previewOffsets[index] ?? previewOffsets[0]
+}
+</script>

package/src/modules/desktop/components/AppHubDesktopIconInfoDialog.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-if="open" class="apphub-icon-info" @click.self="emit('close')">
+    <div class="apphub-icon-info__panel" role="dialog" aria-modal="true">
+      <header class="apphub-icon-info__header">
+        <span class="apphub-icon-info__icon">{{ app?.icon }}</span>
+        <h3 class="apphub-icon-info__title">{{ title }}</h3>
+      </header>
+      <dl class="apphub-icon-info__list">
+        <div v-for="row in rows" :key="row.label" class="apphub-icon-info__row">
+          <dt>{{ row.label }}</dt>
+          <dd>{{ row.value }}</dd>
+        </div>
+      </dl>
+      <footer class="apphub-icon-info__actions">
+        <button type="button" class="apphub-icon-info__btn" @click="emit('close')">
+          {{ closeLabel }}
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  open: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  app: { type: Object, default: null },
+  rows: { type: Array, default: () => [] },
+  closeLabel: { type: String, default: '' },
+})
+
+const emit = defineEmits(['close'])
+</script>

package/src/modules/desktop/components/AppHubDesktopIconRenameDialog.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="open" class="apphub-icon-rename" @click.self="emit('cancel')">
+    <div class="apphub-icon-rename__panel" role="dialog" aria-modal="true">
+      <h3 class="apphub-icon-rename__title">{{ title }}</h3>
+      <label class="apphub-icon-rename__label">
+        <span>{{ nameLabel }}</span>
+        <input
+          ref="inputRef"
+          v-model="draft"
+          type="text"
+          class="apphub-icon-rename__input"
+          maxlength="64"
+          @keydown.enter="onSave"
+          @keydown.esc="emit('cancel')"
+        />
+      </label>
+      <p v-if="error" class="apphub-icon-rename__error">{{ error }}</p>
+      <div class="apphub-icon-rename__actions">
+        <button type="button" class="apphub-icon-rename__btn apphub-icon-rename__btn--primary" @click="onSave">
+          {{ saveLabel }}
+        </button>
+        <button type="button" class="apphub-icon-rename__btn" @click="emit('cancel')">
+          {{ cancelLabel }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  nameLabel: { type: String, default: '' },
+  initialName: { type: String, default: '' },
+  saveLabel: { type: String, default: '' },
+  cancelLabel: { type: String, default: '' },
+  error: { type: String, default: '' },
+})
+
+const emit = defineEmits(['save', 'cancel'])
+
+const draft = ref('')
+const inputRef = ref(null)
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (!isOpen) return
+    draft.value = props.initialName
+    await nextTick()
+    inputRef.value?.focus()
+    inputRef.value?.select()
+  },
+)
+
+function onSave() {
+  emit('save', draft.value.trim())
+}
+</script>

package/src/modules/desktop/components/AppHubDesktopSettings.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="apphub-desktop-settings">
+    <label v-if="showThemeToggle" class="apphub-desktop-settings__row">
+      <input
+        type="checkbox"
+        :checked="theme === 'light'"
+        @change="emit('update:theme', $event.target.checked ? 'light' : 'dark')"
+      />
+      <span>{{ themeLabel }}</span>
+    </label>
+    <label class="apphub-desktop-settings__row">
+      <input type="checkbox" :checked="snapToGrid" @change="emit('update:snapToGrid', $event.target.checked)" />
+      <span>{{ snapLabel }}</span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  theme: { type: String, default: 'dark' },
+  themeLabel: { type: String, default: '' },
+  showThemeToggle: { type: Boolean, default: true },
+  snapToGrid: { type: Boolean, default: true },
+  snapLabel: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:theme', 'update:snapToGrid'])
+</script>

package/src/modules/desktop/components/AppHubDropInstallBadge.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="apphub-drop-badge"
+    :class="{
+      'apphub-drop-badge--installing': job.status === 'installing',
+      'apphub-drop-badge--done': job.status === 'done',
+      'apphub-drop-badge--error': job.status === 'error',
+    }"
+    :style="badgeStyle"
+  >
+    <div class="apphub-drop-badge__icon-wrap">
+      <div class="apphub-drop-badge__icon-bg" />
+      <span class="apphub-drop-badge__icon">{{ job.icon }}</span>
+      <svg v-if="job.status === 'installing'" class="apphub-drop-badge__ring" viewBox="0 0 64 64">
+        <circle class="apphub-drop-badge__ring-track" cx="32" cy="32" r="28" />
+        <circle
+          class="apphub-drop-badge__ring-progress"
+          cx="32"
+          cy="32"
+          r="28"
+          :style="{ strokeDashoffset: ringOffset }"
+        />
+      </svg>
+      <span v-if="job.status === 'done'" class="apphub-drop-badge__check">✓</span>
+    </div>
+    <p class="apphub-drop-badge__label">
+      <template v-if="job.status === 'installing'">{{ loadingLabel }}</template>
+      <template v-else-if="job.status === 'done'">{{ doneLabel }}</template>
+      <template v-else>{{ job.errorMessage || errorLabel }}</template>
+    </p>
+    <p v-if="job.status === 'installing'" class="apphub-drop-badge__method">{{ methodLabel }}</p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  job: { type: Object, required: true },
+  loadingLabel: { type: String, default: '' },
+  errorLabel: { type: String, default: '' },
+  methodLabel: { type: String, default: '' },
+  donePublishLabel: { type: String, default: '' },
+})
+
+const doneLabel = computed(() => {
+  if (props.job.publishSubmitted && props.job.name) {
+    return props.job.name
+  }
+  if (props.job.publishSubmitted && props.donePublishLabel) {
+    return props.donePublishLabel
+  }
+  return props.job.name
+})
+
+const badgeStyle = computed(() => ({
+  left: `${props.job.x}px`,
+  top: `${props.job.y}px`,
+}))
+
+const ringOffset = computed(() => {
+  const circumference = 2 * Math.PI * 28
+  return circumference - (circumference * props.job.progress) / 100
+})
+</script>

package/src/modules/desktop/components/AppHubDuplicateAppDialog.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="open" class="apphub-dup-dialog" @click.self="onCancel">
+    <div class="apphub-dup-dialog__panel" role="dialog" aria-modal="true">
+      <h3 class="apphub-dup-dialog__title">{{ title }}</h3>
+      <p class="apphub-dup-dialog__message">{{ message }}</p>
+      <p class="apphub-dup-dialog__hint">{{ hint }}</p>
+      <div class="apphub-dup-dialog__actions">
+        <button type="button" class="apphub-dup-dialog__btn apphub-dup-dialog__btn--primary" @click="emit('replace')">
+          {{ replaceLabel }}
+        </button>
+        <button type="button" class="apphub-dup-dialog__btn" @click="emit('keep')">
+          {{ keepLabel }}
+        </button>
+        <button type="button" class="apphub-dup-dialog__btn apphub-dup-dialog__btn--ghost" @click="onCancel">
+          {{ cancelLabel }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  open: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  message: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  replaceLabel: { type: String, default: '' },
+  keepLabel: { type: String, default: '' },
+  cancelLabel: { type: String, default: '' },
+})
+
+const emit = defineEmits(['replace', 'keep', 'cancel'])
+
+function onCancel() {
+  emit('cancel')
+}
+</script>