@mixd-id/web-scaffold 0.1.230406243 → 0.1.230406245

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406243",
+  "version": "0.1.230406245",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/DayTimeRange.vue

@@ -0,0 +1,126 @@
+<template>
+	<div :class="$style.comp">
+		<div v-for="(val, idx) in value" class="flex flex-row items-start">
+      <button type="button" @click="value.splice(idx, 1);updateModelValue()" class="p-2">
+        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z"/></svg>
+      </button>
+      <div class="pr-2">
+        <select v-model="val.key" @change="updateModelValue">
+          <option value="*">All Days</option>
+          <option value="sun">Sun</option>
+          <option value="mon">Mon</option>
+          <option value="tue">Tue</option>
+          <option value="wed">Wed</option>
+          <option value="thu">Thu</option>
+          <option value="fri">Fri</option>
+          <option value="sat">Sat</option>
+        </select>
+      </div>
+      <div class="flex-1 flex flex-col gap-1 pl-2 border-l-[1px] border-text-100 divide-y divide-text-100">
+        <div v-for="(range, i) in val.value" class="flex flex-row">
+          <div class="flex-1 flex flex-row">
+            <input type="time" v-model="val.value[i][0]">
+            <div class="py-2">-</div>
+            <input type="time" v-model="val.value[i][1]">
+          </div>
+          <div class="p-2 flex flex-row gap-2">
+            <button v-if="val.value.length > 1" type="button" @click="val.value.splice(i, 1)">
+              <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M140 274c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v12c0 6.6-5.4 12-12 12H140zm364-18c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>
+            </button>
+            <button type="button" @click="val.value.push([ '00:00', '23:59' ])">
+              <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 248.5l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L241 419.9V44c0-6.6-5.4-12-12-12h-10c-6.6 0-12 5.4-12 12v375.9L28.5 241.4c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.8 4.8-12.3.1-17z"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-center">
+      <button type="button" @click="add" class="p-2">
+        <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 250v12c0 6.6-5.4 12-12 12h-98v98c0 6.6-5.4 12-12 12h-12c-6.6 0-12-5.4-12-12v-98h-98c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h98v-98c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12v98h98c6.6 0 12 5.4 12 12zm120 6c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>
+      </button>
+    </div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'update:modelValue' ],
+
+  props: {
+
+    modelValue: {
+      type: Object
+    }
+
+  },
+
+  data(){
+    return {
+      value: [
+        { key:'mon', value:[ [ '08:00', '10:00' ], [ '12:00', '14:00' ] ] }
+      ]
+    }
+  },
+
+  methods: {
+
+    add(){
+
+      this.value.push({ value:[ [ '00:00', '23:59'] ] })
+
+    },
+
+    updateModelValue(){
+      const modelValue = {}
+      this.value.forEach( (val) => {
+        modelValue[val.key] = val.value
+      })
+
+      console.log(modelValue)
+
+      this.$emit('update:modelValue', modelValue)
+    },
+
+    updateValue(){
+      this.value = []
+      for( const key in this.modelValue ){
+        this.value.push({ key, value: this.modelValue[key] })
+      }
+    }
+
+  },
+
+  mounted() {
+    this.updateValue()
+  },
+
+  watch: {
+
+    modelValue(){
+      this.updateValue()
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply border-[1px] border-text-200 bg-base-50 rounded-lg;
+  @apply inline-flex flex-col divide-y divide-text-100;
+}
+
+.comp select{
+  @apply bg-transparent p-2 outline-none;
+}
+
+.comp input{
+  @apply bg-transparent p-1 outline-none appearance-none;
+}
+
+</style>

package/src/components/Dropdown.vue

@@ -165,6 +165,9 @@ export default {
 .dropdown:not(.readonly){
 	@apply hover:border-text-300;
 }
+.dropdown.readonly{
+  @apply bg-text-50;
+}
 
 .dropdown select,
 .dropdown input{

package/src/components/Textbox.vue

@@ -178,7 +178,7 @@ export default{
 }
 
 .textbox.readonly{
-	@apply bg-base-50;
+	@apply bg-text-50;
 }
 
 .size-sm input{ @apply text-sm; }

package/src/index.js

@@ -474,6 +474,7 @@ export default{
     app.component('ObjectTree', defineAsyncComponent(() => import("./components/ObjectTree.vue")))
     app.component('FBLogin', defineAsyncComponent(() => import("./components/FBLogin.vue")))
     app.component('GSignIn', defineAsyncComponent(() => import("./components/GSignIn.vue")))
+    app.component('DayTimeRange', defineAsyncComponent(() => import("./components/DayTimeRange.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))

package/src/utils/helpers.js

@@ -2,6 +2,7 @@ const md5 = require("md5");
 const fs = require("fs");
 const { Op } = module.parent.require('sequelize')
 const axios = module.parent.require('axios')
+const dayjs = module.parent.require('dayjs')
 
 
 const ceil = (num, precision = 0) => {
@@ -470,6 +471,26 @@ const datasourceLoad = async ({ datasource, Models }) => {
   return obj
 }
 
+const dayTimeRange = (params, value) => {
+
+  /*params = {
+    '*': [ [ '08:00', '12:00' ], [ '13:00', '18:00' ] ],
+    'sat': [ [ '08:00', '12:00' ], [ '13:00', '14:00' ] ],
+  }
+  value = '2023-02-06 17:59:00'*/
+
+  if(!value)
+    value = dayjs().format('YYYY-MM-DD HH:mm:ss')
+
+  const curDay = dayjs(value).format('ddd').toLowerCase()
+  const curTime = dayjs(value).format('HH:mm')
+  const ranges = params[curDay] ?? params['*']
+
+  return (ranges ?? []).some((range) => {
+    return curTime >= range[0] && curTime <= range[1]
+  })
+}
+
 
 module.exports = {
   ceil,
@@ -497,4 +518,5 @@ module.exports = {
   removeStyleFromTag,
   datasourceGet,
   datasourceLoad,
+  dayTimeRange,
 }