@mixd-id/web-scaffold 0.1.230406001

package/src/index.js

@@ -0,0 +1,255 @@
+import {defineAsyncComponent, ref} from "vue"
+import {observeInit} from './utils/helpers.mjs'
+import throttle from "lodash/throttle"
+
+const calculateIsMobile = () => {
+  if(typeof window === 'undefined') return false
+  return window.innerWidth < window.innerHeight && window.innerWidth <= 800
+}
+
+let _UNIQID = 0
+const uniqid = () => {
+  return _UNIQID++
+}
+
+const download = (url, as) => {
+  const downloader = document.createElement('a')
+  downloader.setAttribute('href', url)
+  downloader.target = '_blank'
+  if(as) downloader.download = as
+  document.body.appendChild(downloader)
+
+  downloader.click()
+
+  window.setTimeout(() => {
+    document.body.removeChild(downloader)
+  }, 100)
+}
+
+let preloads = []
+
+const preload = (params) => {
+
+  if(!params) return
+
+  if(typeof params === 'string'){
+    params.split(',').forEach((param) => {
+      let media, href
+      if(param.startsWith('sm:')){
+        media = 'sm'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('md:')){
+        media = 'md'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('lg:')){
+        media = 'lg'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('xl:')){
+        media = 'xl'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else if(param.startsWith('2xl:')){
+        media = '2xl'
+        href = param.substring(param.indexOf(':') + 1)
+      }
+      else{
+        media = ''
+        href = param
+      }
+
+      switch(media){
+        case 'sm':
+          media = "(min-width: 640px)"
+          break
+        case 'md':
+          media = "(min-width: 768px)"
+          break
+        case 'lg':
+          media = "(min-width: 1024px)"
+          break
+        case 'xl':
+          media = "(min-width: 1280px)"
+          break
+        case '2xl':
+          media = "(min-width: 1536px)"
+          break
+      }
+
+      const ext = href.split('.').slice(-1).pop()
+      let as
+      switch(ext){
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'webp':
+        case 'gif':
+          as = 'image'
+          break
+      }
+
+      if(href && as){
+        const preloadObj = {
+          href,
+          media,
+          as
+        }
+
+        preloads.push(preloadObj)
+      }
+    })
+  }
+  else{
+    if(Array.isArray(params)){
+      preloads.push(...params)
+    }
+    else{
+      preloads.push(params)
+    }
+  }
+}
+
+const popPreloads = () => {
+
+  let link = ''
+
+  preloads.forEach((obj) => {
+    let str = `<link rel="preload" href="${obj.href}" as="${obj.as}"`
+    if(obj.media)
+      str += ` media="${obj.media}"`
+    str += ' />'
+
+    link += str
+  })
+
+  preloads = []
+
+  return link
+}
+
+const util = {
+
+  push: (arr, item, opt = { key:"id" }) => {
+    const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
+    if(index >= 0){
+      Object.assign(arr[index], item)
+    }
+    else{
+      arr.push(item)
+    }
+  },
+
+  unshift: (arr, item, opt = { key:"id" }) => {
+    const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
+    if(index >= 0){
+      Object.assign(arr[index], item)
+    }
+    else{
+      arr.unshift(item)
+    }
+  },
+
+  onEvent: (arr, updates, opt = {}) => {
+
+    const [ model, event, items ] = updates
+
+    if(opt.model && opt.model !== model)
+      return
+
+    items.forEach((item) => {
+
+      const index = arr.findIndex((_) => _.id === item.id)
+
+      switch(event){
+
+        case 'create':
+        case 'update':
+          if(index >= 0){
+            Object.assign(arr[index], item)
+          }
+          else{
+            arr.push(item)
+          }
+          break
+
+        case 'destroy':
+          if(index >= 0){
+            arr.splice(index, 1)
+          }
+          break
+      }
+    })
+  }
+
+}
+
+export default{
+
+  install: (app, options) => {
+
+    let isMobile = ref(calculateIsMobile())
+
+    if(typeof window !== 'undefined' && 'IntersectionObserver' in window) {
+      app.config.globalProperties.$observe = observeInit()
+
+      window.addEventListener('resize', throttle(() => {
+        isMobile.value = calculateIsMobile()
+      }, 300, { trailing:true }))
+    }
+
+    app.config.globalProperties.uniqid = uniqid
+    app.config.globalProperties.isMobile = isMobile
+    app.config.globalProperties.$download = download
+    app.config.globalProperties.$preload = preload
+    app.config.globalProperties.$popPreloads = popPreloads
+    app.config.globalProperties.$util = util
+
+    app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
+    app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
+    app.component('SearchButton', defineAsyncComponent(() => import("./components/SearchButton.vue")))
+    app.component('ButtonGroup', defineAsyncComponent(() => import("./components/ButtonGroup.vue")))
+    app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
+    app.component('Checkbox', defineAsyncComponent(() => import("./components/Checkbox.vue")))
+    app.component('CopyToClipboard', defineAsyncComponent(() => import("./components/CopyToClipboard.vue")))
+    app.component('Countdown', defineAsyncComponent(() => import("./components/Countdown.vue")))
+    app.component('Datepicker', defineAsyncComponent(() => import("./components/Datepicker.vue")))
+    app.component('Dropdown', defineAsyncComponent(() => import("./components/Dropdown.vue")))
+    app.component('DynamicTemplate', defineAsyncComponent(() => import("./components/DynamicTemplate.vue")))
+    app.component('ErrorText', defineAsyncComponent(() => import("./components/ErrorText.vue")))
+    app.component('Feed', defineAsyncComponent(() => import("./components/Feed.vue")))
+    app.component('Gmaps', defineAsyncComponent(() => import("./components/Gmaps.vue")))
+    app.component('HTMLEditor', defineAsyncComponent(() => import("./components/HTMLEditor.vue")))
+    app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
+    app.component('Switch', defineAsyncComponent(() => import("./components/Switch.vue")))
+    app.component('Image', defineAsyncComponent(() => import("./components/Image.vue")))
+    app.component('Image360', defineAsyncComponent(() => import("./components/Image360.vue")))
+    app.component('ImagePreview', defineAsyncComponent(() => import("./components/ImagePreview.vue")))
+    app.component('ImageFullScreen', defineAsyncComponent(() => import("./components/ImageFullScreen.vue")))
+    app.component('ImportModal', defineAsyncComponent(() => import("./components/ImportModal.vue")))
+    app.component('ListPage1', defineAsyncComponent(() => import("./components/ListPage1.vue")))
+    app.component('ListPage1Filter', defineAsyncComponent(() => import("./components/ListPage1Filter.vue")))
+    app.component('ListItem', defineAsyncComponent(() => import("./components/ListItem.vue")))
+    app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
+    app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
+    app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))
+    app.component('OTPField', defineAsyncComponent(() => import("./components/OTPField.vue")))
+    app.component('Radio', defineAsyncComponent(() => import("./components/Radio.vue")))
+    app.component('TableView', defineAsyncComponent(() => import("./components/TableView.vue")))
+    app.component('TableViewHead', defineAsyncComponent(() => import("./components/TableViewHead.vue")))
+    app.component('Tabs', defineAsyncComponent(() => import("./components/Tabs.vue")))
+    app.component('Textbox', defineAsyncComponent(() => import("./components/Textbox.vue")))
+    app.component('Textarea', defineAsyncComponent(() => import("./components/Textarea.vue")))
+    app.component('Timepicker', defineAsyncComponent(() => import("./components/Timepicker.vue")))
+    app.component('Toast', defineAsyncComponent(() => import("./components/Toast.vue")))
+    app.component('VirtualScroll', defineAsyncComponent(() => import("./components/VirtualScroll.vue")))
+    app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
+    app.component('Slider', defineAsyncComponent(() => import("./components/Slider.vue")))
+    app.component('TabView', defineAsyncComponent(() => import("./components/TabView.vue")))
+    app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
+    app.component('SplitPane', defineAsyncComponent(() => import("./components/SplitPane.vue")))
+
+
+  }
+}

package/src/main.js

@@ -0,0 +1,38 @@
+import App from './App.vue'
+import {createSSRApp, defineAsyncComponent} from 'vue'
+import { createPinia } from 'pinia'
+import { createRouter } from './router'
+import WebScaffold from './index'
+import './index.css'
+
+const AppScaffold = {
+  install: (app, options) => {
+    app.component('PropertyTable', defineAsyncComponent(() => import("./pages/playground/components/PropertyTable.vue")))
+    app.component('Preview', defineAsyncComponent(() => import("./pages/playground/components/Preview.vue")))
+    app.component('SourceCode', defineAsyncComponent(() => import("./pages/playground/components/SourceCode.vue")))
+  }
+}
+
+export function createApp(){
+
+  const app = createSSRApp(App)
+  const router = createRouter()
+  const pinia = createPinia()
+
+  app.use(router)
+  app.use(pinia)
+  app.use(WebScaffold)
+  app.use(AppScaffold)
+
+  return { app, router, pinia }
+}
+
+
+/*
+createApp(App)
+    .use(componentPlugins)
+    .use(router)
+    .mount('#app')
+
+if(typeof document !== 'undefined')
+  document.body.firstElementChild.removeAttribute('data-v-app')*/

package/src/router.js

@@ -0,0 +1,57 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+
+const routes = [
+  { name:"", path:"/", component:() => import('./pages/Home.vue') },
+  { name:"", path:"/test", component:() => import('./pages/Test.vue') },
+  {
+    name:"inbox",
+    path:"/inbox",
+    component:() => import('./pages/Inbox.vue'),
+    children: [
+      { name:"message", path:":uid", component:() => import('./pages/Message.vue') },
+    ]
+  },
+  {
+    name: 'playground',
+    path: '/playground',
+    component: () => import('./pages/Playground.vue'),
+    children: [
+      { path:"initial", component: () => import('./pages/playground/Button.vue') },
+      { path:"ahref", component: () => import('./pages/playground/Ahref.vue') },
+      { path:"button", component: () => import('./pages/playground/Button.vue') },
+      { path:"dropdown", component: () => import('./pages/playground/Dropdown.vue') },
+      { path:"slider", component: () => import('./pages/playground/Slider.vue') },
+      { path:"switch", component: () => import('./pages/playground/Switch.vue') },
+      { path:"image", component: () => import('./pages/playground/Image.vue') },
+      { path:"carousel", component: () => import('./pages/playground/Carousel.vue') },
+      { path:"datepicker", component: () => import('./pages/playground/Datepicker.vue') },
+      { path:"textbox", component: () => import('./pages/playground/Textbox.vue') },
+      { path:"textarea", component: () => import('./pages/playground/Textarea.vue') },
+
+      { path:"modal", component: () => import('./pages/playground/Modal.vue') },
+      { path:"context-menu", component: () => import('./pages/playground/ContextMenu.vue') },
+      { path:"list-item", component: () => import('./pages/playground/ListItem.vue') },
+      { path:"toast", component: () => import('./pages/playground/Toast.vue') },
+      { path:"alert", component: () => import('./pages/playground/Alert.vue') },
+    ]
+  }
+]
+
+export function createRouter() {
+  return _createRouter({
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+      if(savedPosition){
+        return savedPosition
+      }
+      else{
+        return { top: 0 }
+      }
+    },
+  })
+}

package/src/themes/default/index.js

@@ -0,0 +1,200 @@
+const Plugin = require('tailwindcss/plugin')
+
+const plugin = Plugin(function({ addBase, config, theme }) {
+
+  addBase({
+
+    '*': {
+      'color': theme('colors.text.DEFAULT'),
+      'fontFamily': 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji',
+      'fontSize': '13px'
+    },
+
+    'html, .html': {
+
+      "--h-cp-sm": '2rem',
+      "--h-cp": '2.7rem',
+      "--h-cp-lg": '3.6rem',
+
+      '--base-50': '255, 255, 255',
+      '--base-200': '222, 224, 227',
+      '--base-300': '232, 234, 237',
+      '--base-400': '246, 248, 251',
+      '--base-500': '255, 255, 255',
+      '--base': '236, 236, 236',
+
+      "--text-50": '240, 240, 240',
+      "--text-100": '223, 223, 223',
+      "--text-200": '218, 218, 218',
+      "--text-300": '191, 191, 191',
+      "--text-400": '136, 136, 136',
+      "--text": '31, 41, 55',
+
+      "--primary": '81, 131, 240',
+      "--primary-50": '244, 248, 255',
+      "--primary-100": '230, 239, 255',
+      "--primary-200": '216, 230, 255',
+      "--primary-300": '116, 156, 243',
+      "--primary-400": '98, 143, 242',
+      "--primary-500": '81, 131, 240',
+      "--primary-600": '73, 118, 216',
+      "--primary-700": '65, 105, 192',
+      "--primary-800": '57, 92, 168',
+      "--primary-900": '49, 79, 144',
+
+      "--secondary": '191, 219, 254',
+      "--secondary-50": '248, 221, 159',
+      "--secondary-100": '246, 214, 139',
+      "--secondary-200": '245, 207, 120',
+      "--secondary-300": '243, 200, 101',
+      "--secondary-400": '174, 209, 252',
+      "--secondary-500": '191, 219, 254',
+      "--secondary-600": '219, 234, 254',
+      "--secondary-700": '192, 149, 50',
+      "--secondary-800": '168, 130, 43',
+      "--secondary-900": '144, 112, 37'
+
+    },
+
+    'html[data-theme="dark"], .html[data-theme="dark"]': {
+
+      "--base-50": '22, 26, 33',
+      "--base-300": '0, 0, 0',
+      "--base-400": '16, 20, 27',
+      "--base-500": '22, 26, 33',
+      "--base": '22, 26, 33',
+
+      "--text-50": '34, 40, 47',
+      "--text-100": '48, 54, 61',
+      "--text-200": '53, 59, 66',
+      "--text-300": '77, 77, 77',
+      "--text-400": '191, 193, 197',
+      "--text": '234, 234, 236',
+
+      "--primary-50": '24, 34, 51',
+      "--primary-100": '28, 38, 59',
+      "--primary-200": '27, 44, 74',
+    },
+
+    'body': {
+      '-webkit-font-smoothing': 'antialiased',
+      '-moz-osx-font-smoothing': 'grayscale',
+      'text-rendering': 'optimizeLegibility',
+      'fontSize': '14px',
+      'touchAction': "pan-x pan-y",
+      'backgroundColor': 'rgba(var(--base-400), 100)'
+    },
+
+    '@media screen and (orientation: portrait)': {
+      'body': {
+        'fontSize': '16px',
+      }
+    },
+
+    '::-webkit-scrollbar': {
+      'height': '5px',
+      'width': '5px',
+      'background': 'transparent'
+    },
+
+    '::-webkit-scrollbar-thumb': {
+      'backgroundColor': 'rgba(var(--text-50), 100)'
+    },
+
+    'h1': {
+      fontSize: config('theme.fontSize.4xl')[0],
+      ...config('theme.fontSize.4xl')[1],
+      fontWeight: theme('fontWeight.bold'),
+    },
+
+    'h2': {
+      fontSize: config('theme.fontSize.3xl')[0],
+      ...config('theme.fontSize.3xl')[1],
+      fontWeight: theme('fontWeight.bold'),
+    },
+
+    'h3': {
+      fontSize: config('theme.fontSize.2xl')[0],
+      ...config('theme.fontSize.2xl')[1],
+      fontWeight: theme('fontWeight.bold'),
+    },
+
+    'h4': {
+      fontSize: config('theme.fontSize.xl')[0],
+      ...config('theme.fontSize.xl')[1],
+      fontWeight: theme('fontWeight.bold'),
+    },
+
+    'h5': {
+      fontSize: config('theme.fontSize.lg')[0],
+      ...config('theme.fontSize.lg')[1],
+      fontWeight: theme('fontWeight.bold'),
+    },
+
+    '.flex-1': { minHeight: "0px", minWidth: "0px" }
+
+
+  })
+
+}, {
+  theme: {
+    extend:{
+      colors: {
+        primary: {
+          50: "rgba(var(--primary-50), <alpha-value>)",
+          100: "rgba(var(--primary-100), <alpha-value>)",
+          200: "rgba(var(--primary-200), <alpha-value>)",
+          300: "rgba(var(--primary-300), <alpha-value>)",
+          400: "rgba(var(--primary-400), <alpha-value>)",
+          500: "rgba(var(--primary-500), <alpha-value>)",
+          600: "rgba(var(--primary-600), <alpha-value>)",
+          700: "rgba(var(--primary-700), <alpha-value>)",
+          800: "rgba(var(--primary-800), <alpha-value>)",
+          900: "rgba(var(--primary-900), <alpha-value>)",
+          DEFAULT: "rgba(var(--primary), <alpha-value>)"
+        },
+        secondary: {
+          50: "rgba(var(--secondary-50), <alpha-value>)",
+          100: "rgba(var(--secondary-100), <alpha-value>)",
+          200: "rgba(var(--secondary-200), <alpha-value>)",
+          300: "rgba(var(--secondary-300), <alpha-value>)",
+          400: "rgba(var(--secondary-400), <alpha-value>)",
+          500: "rgba(var(--secondary-500), <alpha-value>)",
+          600: "rgba(var(--secondary-600), <alpha-value>)",
+          700: "rgba(var(--secondary-700), <alpha-value>)",
+          800: "rgba(var(--secondary-800), <alpha-value>)",
+          900: "rgba(var(--secondary-900), <alpha-value>)",
+          DEFAULT: "rgba(var(--secondary), <alpha-value>)"
+        },
+        base: {
+          50: "rgba(var(--base-50), <alpha-value>)",
+          100: "rgba(var(--base-100), <alpha-value>)",
+          200: "rgba(var(--base-200), <alpha-value>)",
+          300: "rgba(var(--base-300), <alpha-value>)",
+          400: "rgba(var(--base-400), <alpha-value>)",
+          500: "rgba(var(--base-500), <alpha-value>)",
+          600: "rgba(var(--base-600), <alpha-value>)",
+          700: "rgba(var(--base-700), <alpha-value>)",
+          800: "rgba(var(--base-800), <alpha-value>)",
+          900: "rgba(var(--base-900), <alpha-value>)",
+          DEFAULT: "rgba(var(--base), <alpha-value>)"
+        },
+        text: {
+          50: "rgba(var(--text-50), <alpha-value>)",
+          100: "rgba(var(--text-100), <alpha-value>)",
+          200: "rgba(var(--text-200), <alpha-value>)",
+          300: "rgba(var(--text-300), <alpha-value>)",
+          400: "rgba(var(--text-400), <alpha-value>)",
+          500: "rgba(var(--text-500), <alpha-value>)",
+          600: "rgba(var(--text-600), <alpha-value>)",
+          700: "rgba(var(--text-700), <alpha-value>)",
+          800: "rgba(var(--text-800), <alpha-value>)",
+          900: "rgba(var(--text-900), <alpha-value>)",
+          DEFAULT: "rgba(var(--text), 1)"
+        }
+      }
+    }
+  }
+})
+
+module.exports = plugin